JS基础第二课（元素篇）

原创

申小兮

发布于 2023-04-13 19:10:39

7130

发布于 2023-04-13 19:10:39

文章被收录于专栏：前端开发基础前端开发基础

介绍元素前，带小伙伴们了解一下，什么是DOM？🧐

一、DOM：全称Document Object Model(文档对象模型)

1、用于HTML和XML文档的编辑接口，给文档提供一种结构化的表示方法，可以修改文档的内容和结构

2、XML 是一种标记语言类似html，被设计用来传输和存储数据

3、DOM可以把网页和脚本语言以及其他编程语言联系起来

4、DOM开发中主要用于操作元素（因此DOM与元素紧密相连）

二、获取元素的五种方式

1、根据ID获取

返回元素对象（仅获取到匹配的第一个元素的标签）

<div id="box"></div>
<div id="box"></div>
<script>
    var boxDom = document.getElementById('box')
    console.log(boxDom);
</script>

2、根据类名获取

返回元素的对象集合（类似数组），注意不是标签！需要通过循环遍历，来获取最终需要的标签

<h1 class="title">标题</h1>
<h1 class="title">标题</h1>
<script>
    var titleDom = document.getElementsByClassName('title')
    console.log(titleDom);
    for (var i = 0; i < titleDom.length; i++) {
        console.log(titleDom[i]);
    }
</script>

3、根据标签名获取

返回带有指定标签名的对象集合（类似数组），不是标签！与类名获取同样，需要通过循环遍历，来获取最终需要的标签

<p>段落</p>
<p>段落</p>
<script>
    var pDom = document.getElementsByTagName('p')
    console.log(pDom);
    for (var i = 0; i < pDom.length; i++) {
        console.log(pDom[i]);
    }
</script>

4、根据选择器获取【注意：选择器对应的符号不能漏，不能错（class对应. ）、（id对应# ）】

（1）获取指定元素的第一个对象

<div id="box"></div>
<script>
    var box =document.querySelector('#box')
    console.log(box);
</script>

（2）获取指定元素对象集合，一样需要循环遍历来取标签

<div id="box"></div>
<div id="box"></div>
<script>
    var box =document.querySelectorAll('#box')
    console.log(box);
    for (var i = 0; i < box.length; i++) {
        console.log(box[i]);
    }
</script>

（3）获取子级对象（querySelector也可以直接获取标签名）

<div class="demo">
    <p>段落</p>
    <p>段落</p>
</div>
<script>
    var demoArr = document.querySelectorAll('.demo p')
    console.log(demoArr);
</script>

5、根据特殊元素获取

（1）获取body

（2）获取html

<div class="demo">
    <p>段落</p>
    <p>段落</p>
</div>
<script>
    var bodyDom = document.body
    console.log(bodyDom);
    var htmlDom = document.documentElement
    console.log(htmlDom);
</script>

三、事件（HTML DOM 事件）

1、组成

（1）事件源：触发的对象

（2）事件类型：如何触发

（3）事件处理程序：通过函数响应事件

2、三种写法（用监听按钮事件为例子）

（1）通过dom事件类型【常用】

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var list = document.querySelectorAll('li')
    console.log(list);
    for (var i = 0; i < list.length; i++) {
        console.log(list[i]);
        list[i].onclick = function(){
            alert('点击成功')
        }
    }
</script>

（2）通过dom.addEventListener事件类型

<div class="box">点击</div>
<script>
    var divDom = document.querySelector('.box')
    console.log(divDom);
    divDom.addEventListener('click',function(){
        alert('点击成功')
    })
</script>

（3）直接在标签上编写<标签名 οnclick="方法">确定</标签名>【常用】

①

<body>
    <div onclick="alert('OK')">请点击</div>
</body>

②

<!-- 注意值是一个方法，不能漏了() -->
<div onclick="divClick()">请点击</div>
<script>
    function divClick(){
        alert('点击成功')
    }
</script>

3、其他例子：焦点离开、焦点聚集

<input type="text" onfocus="iptfoucs()">
<script>
    var inputDom = document.querySelector('input')
    inputDom.onblur = function(){
        console.log('焦点离开');
    }
    function iptfoucs(){
        console.log('焦点聚焦');
    }
</script>

四、操作元素

1、概念

JavaScript的DOM操作可以改变网页内容、结构和样式，通过利用Dom操作元素来改变元素里面的内容、属性等

注意：事件和操作元素都是对标签进行操作的

2、改变获取元素的内容

（1）修改获取文本内容

<h1>标题</h1>
<button>修改</button>
<script>
    var title = document.querySelector('h1')
    console.log(title);
    var btn = document.querySelector('button')
    btn.onclick = function(){
        title.innerText = '修改成功'
    }
</script>

（2）修改获取标签文本

<h1>标题</h1>
<button>修改</button>
<script>
    var title = document.querySelector('h1')
    console.log(title);
    var btn = document.querySelector('button')
    btn.onclick = function(){
        title.innerHTML = '<a href="">修改成功</a>'
        console.log(title.innerHTML);//<a href="">修改成功</a>
        console.log(title.innerText);//修改成功
    }
</script>

3、修改获取元素属性（dom.属性名 = 修改值）

<h1 title="我是标题">标题</h1>
<button>修改属性</button>
<script>
    var h1Dom =document.querySelector('h1')
    var btn = document.querySelector('button')
    btn.onclick =function(){
        h1Dom.title='我不是标题'
    }
</script>

4、修改样式属性

（1）格式：dom.style.样式属性 = 值

（2）适用于较少的样式修改

（3）复合型的属性需要用驼峰的编写方法，否则会出错

<div></div>
<button>修改属性</button>
<script>
    var divDom = document.querySelector('div')
    var btn = document.querySelector('button')
    btn.onclick = function(){
        divDom.style.backgroundColor = 'red'
        divDom.style.width = '200px'
    }
</script>

修改前：

修改后：

5、使用className修改样式属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .default {
        width: 100px;
        height: 100px;
        background-color: skyblue;
        color: white;
        margin-bottom: 10px;
      }
      .active {
        background-color: red;
        color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="default">div</div>
    <div class="default">div</div>
    <div class="default">div</div>
    <button>点击修改</button>
    <script>
      var divArr = document.querySelectorAll('.default')
      var  btn = document.querySelector('button')
      btn.onclick =function(){
        for(var i =0;i<divArr.length;i++ ){
            divArr[i].className = 'default active'
        }
      }
</script>
  </body>
</html>

修改前：

修改后：

6、HTML标签自定义属性

（1）目的：为了保存属性并使用的数据

（2）设置属性：setAttribute('属性名','值')

（3）获取属性：getAttribute('属性名')

<h1 index="0">我是标签</h1>
<script>
    var h1 = document.querySelector('h1')
    h1.setAttribute('idid',666)
    console.log(h1.getAttribute('idid'));
    console.log(h1.getAttribute('index'));
</script>

五、节点操作

1、节点层级

<div id="box">
        <div id="box1"></div>
        <div id="box2"></div>
        <div id="box3"></div>
</div>
<script>
        // 获取最近的父节点
        var box1 = document.querySelector('#box1')
        console.log(box1.parentNode);
        // 获取所有的子节点
        var box = document.querySelector('#box')
        console.log(box.childNodes);
        // 获取第一个子节点
        console.log(box.firstElementChild);
        // 获取最后一个子节点
        console.log(box.lastElementChild);
        // 上一个兄弟
        var box2 = document.querySelector('#box2')
        console.log(box2.previousElementSibling);
        // 下一个兄弟
        console.log(box2.nextElementSibling);
</script>

2、创建节点

document.createElement("标签名")

3、添加节点

添加的位置.appendChild(添加的节点)

4、删除节点

选择.removeChild(节点)

5、复制节点/克隆节点

cloneNode(true)：克隆整个节点包括里面的内容 cloneNode(false)：克隆节点不包括里面的内容

<ul>
        <li>1</li>
</ul>
<button class="add">添加</button>
<button class="del">删除</button>
<script>
        var btn1 = document.querySelector('.add')
        var btn2 = document.querySelector('.del')
        var ul = document.querySelector('ul')
        btn1.onclick = function(){
            var newli = document.createElement('li')//创建节点
            var liArr = document.querySelectorAll('li')
            for (var i = 0; i <= liArr.length; i++) {
                newli.innerHTML = i+1;
            }
            ul.appendChild(newli);//添加节点
        }
        btn2.onclick = function(){
            ul.removeChild(ul.lastElementChild);//删除ul的最后一个孩子
        }
 
        //克隆节点
        var newNode = document.createElement('div')//创建节点
        newNode.innerHTML = '你好'//修改文本内容
        var cloneDom1 = newNode.cloneNode(true)
        var cloneDom2 = newNode.cloneNode(false)
        console.log(cloneDom1);
        console.log(cloneDom2);
</script>