Vue、React等前端框架实际上是对DOM（文档对象模型）操作的一种封装和抽象，旨在让开发者能够更专注于业务逻辑和用户体验。尽管如此，我们仍然需要掌握基本的DOM操作原理，学会使用JavaScript来选择元素、修改内容、添加样式以及处理事件。

I、DOM简介

文档对象类型（Document Object Model）简称DOM

• 一个页面就是一个文档，DOM中使用document表示；
• 页面中的所有标签都是元素，DOM中使用element表示；
• 页面中所有内容的都是节点，DOM中使用node表示；

当涉及DOM（文档对象模型）操作时，有几个关键方面需要注意。

1. 创建元素

在DOM中，有几种方法可以创建新的元素并将其添加到页面中：

document.write：将内容直接写入文档流中，但要小心使用，以避免影响页面结构。

innerHTML：设置元素的HTML内容，可以一次性添加一块HTML代码。

createElement：通过创建新元素节点并设置其属性和内容，然后将其添加到指定位置。

2. 新增元素

要向现有元素添加子元素，可以使用以下方法：

appendChild：将一个元素添加为另一个元素的子元素，放在已有子元素的最后。

insertBefore：将一个元素插入到另一个元素的前面，指定一个参考节点。

3. 删除元素

若要删除现有元素，可以使用以下方法：

removeChild：从其父元素中移除一个子元素。

4. 修改元素

通过以下方法，可以修改元素的属性、内容、样式和其他属性：

修改元素属性：使用setAttribute和getAttribute来修改和获取元素的属性，如src、href、title等。

修改元素内容：使用innerHTML和innerText来设置元素的HTML内容和纯文本内容。

修改表单元素：针对表单元素，可以操作其value、type、disabled等属性。

修改元素样式：使用style属性直接操作元素的CSS样式，或使用className修改元素的类名。

5. 查询元素

若要查询元素，有多种方法可以选择：

使用DOM提供的API：例如getElementById、getElementsByTagName来选择元素。

使用H5新方法：如querySelector和querySelectorAll，可以根据CSS选择器查询元素。

利用节点操作：使用parentNode、children、previousElementSibling、nextElementSibling等属性来定位相关节点。

6. 属性操作

针对元素属性的操作：

setAttribute：设置元素的属性。

getAttribute：获取元素的属性值。

removeAttribute：移除元素的指定属性。

7. 事件操作

操作元素事件的方式：

例如，onclick、onmouseover、onmouseout、onfocus、onblur等属性，用于分配和处理相应的事件。

II、获取元素

1.根据ID获取

使用getElementByID()方法可以获取带有ID的元素对象；

注意事项：

解释性语言脚本要写在待操作的标签下面；

参数id是大小写敏感的字符串；

返回的是DOM的element对象；

可以使用console.dir打印返回的元素对象，可以更好的查看里面的属性和方法；

2.通过标签名获取

使用getElementByTagName()方法可以返回带有指定标签名的对象集合；

3.通过类名获取

使用getElementByClassName()根据类名获得某些元素集合；注意这是HTML5才具备的属性；

4.通过querySelector()获取

也可以通过querySelector()返回指定选择器的第一个元素对象；

注意事项：

类选择器使用.

id选择器使用#

如果要选择全部，则使用querySelectorAll()

5.获取body元素、获取html元素

使用document.body获取body元素;

使用document.documentElement获取html元素；

III、事件

事件的三要素

事件由三部分组成：事件源、事件类型、事件处理程序

var btnObject = document.getElementById('btn');
btnObject.onclick = function(){
    alert('good job!');
}

执行事件的步骤：

（1）获取事件源；

（2）注册事件；

（3）添加事件处理程序；

常见的鼠标事件有：

IV.操作元素

1.改变元素内容

element.innerText

从起始位置到终止位置的内容，但它不识别HTML标签，并去除空格和换行；

innerText可以看成是对应元素的文字内容属性，可以对其进行赋值操作；

element.innerHTML

起始位置到终止位置的全部内容，可以识别HTML标签，同时保留空格和换行；

<p>
    我是文字
    <span>123</span>
</p>

var p = document.querySelector('p');
console.log(p.innerText);
console.log(p.innerHTML);

使用innerText效果:

我是文字 123

使用innerHTM效果：

        我是文字
        <span>123</span>

2.常用元素的属性操作

innerText、innerHTML改变元素内容；

除此之外src可以更换图片的路径、href更换元素的字符串转化器信息、id更换元素的ID、alt更换图片的替换文本、title更换图片的提示文本

3.表单元素的属性操作

利用DOM可以操作如下表单元素的属性：type、value、checked、selected、disabled，

在注册事件的处理程序时，可以食用关键字this代表事件的调用者；

// 获取元素
var btn_obj = document.querySelector('#btn');
var input_obj = document.querySelector('input');
// 注册事件，处理程序
btn_obj.onclick = function(){
    input_obj.value = '输入完成';
    // 执行完成后，按钮被禁用,this指向的是事件的调用者，这里是btn_obj
    this.disabled = true;
}

案例：模拟密码输入框，点击图标，输入框由明文显示转为密文显示，并且可以通过按钮来回切换；

var password_obj = document.querySelector('#password_input');
var eye_obj = document.querySelector('#eye');
var flag = false;
eye_obj.onclick = function(){
    if(flag == false){
        password_obj.type = 'text';
        this.src = "img/open.jpg";
        flag = true;
    }else{
        password_obj.type = 'password';
        this.src = "img/close.jpg";
        flag = false;
    }
}

4.样式属性操作

可以通过JS修改元素的大小、颜色、位置等样式；

方法一：element.style.属性 行内样式操作

注意：

JavaScript里面的样式采取驼峰命名法，如fontSize、backgroundColor与css里的background-color不同；

JavaScript修改style样式操作，产生的是行内样式，JavaScript的权重比css高；

示例代码：

var obj = document.querySelector('div');
obj.onclick = function(){
    this.style.backgroundColor = 'purple';
    this.style.width = '400px';
}

方法二：element.className 类名样式操作

可以手动设置元素是否加载某个css样式类

.change {
    background-color: purple;
    color: #fff;
    font-size: 24px;
    margin-top: 10px;
}

var obj = document.querySelector('div');
obj.onclick = function(){
    this.className = 'change';
}

注意：

如果样式修改较多，可以采取操作类名的方式更改元素样式；

class是一个保留字，因此使用className来操作元素类名属性；

className会直接更改元素的样式类名，有时需要再原有样式类的基础上叠加样式，赋值时可以给出多个样式类，用空格隔开即可。

5.操作元素总结

V、排他思想案例

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法。

在设置某个属性之前，循环删除同组的其他属性。

案例1：一组按钮，只有被点击的按钮，其颜色才会发生变化；

var btns = document.getElementsByTagName('button');
for(var i = 0; i < btns.length; i++){
    btns[i].onclick = function(){
        for(var j = 0; j < btns.length; j++){
            btns[j].style.backgroundColor = '';
        }
        this.style.backgroundColor = 'pink';
    }
}

案例2：点击图片预览框，实现对网页背景的修改；

// 获取元素
var body_obj = document.body;
var imgs = document.querySelector('.box').querySelectorAll('img');
// 定义事件
for(var i = 0; i < imgs.length; i++){
    imgs[i].onclick = function(){
        body_obj.style.backgroundImage = `url(`+this.src+`)`;
    }
}

案例3：高亮显示表格中鼠标滑过的某一行

 <style>
    .bg {
        background-color: pink;
    }
</style>

 var trs = document.querySelector('tbody').querySelectorAll('tr');
for(var i = 0; i < trs.length; i++){
trs[i].onmouseover = function(){
this.className = 'bg';
}
trs[i].onmouseleave = function(){
this.className = '';
}
}

案例4：实现表单全选和取消全选功能

这里主要实现两个需求，

需求1：点击全选能够实现对子项全部选中，如果取消全选则子项全部取消选中；

需求2：子项的全部选中与否可以对汇总项的选中情况产生影响。

实现思路：需求1很简单，遍历一次就可以了；

需求2的思路为：首先对每一个子项绑定点击事件，每一次点击都会产生一次都所有子项的遍历，如果存在一个未选中的状态，则全选按钮为未选中；否则全选按钮为选中状态；

var checkboxSum = document.getElementById('j_cbAll');
var checks = document.querySelector('tbody').querySelectorAll('input');
//实现全选与取消全选
checkboxSum.onclick = function(){
    for(var i = 0; i < checks.length; i++){
        checks[i].checked = checkboxSum.checked;
    }
}
// 实现子项对汇总的控制
for(var i = 0; i < checks.length; i++){
    checks[i].onclick = function(){
        var flag = true;
        for(var j = 0; j < checks.length; j++){
            if(!checks[j].checked){
                flag = false;
            }
        } 
        checkboxSum.checked = flag;   
    }
}

VI、元素属性的获取与设置

1.获取元素属性的方法：

（1）element.属性用于获取元素的内置属性（元素本身自带的属性）；

（2）element.getAttribute('属性')用于获得元素的自定义属性；

2.设置元素属性的方法：

（1）element.属性 ='值' 设置内置属性；

（2）element.setAttribute('属性'，'值')主要用于设置元素的自定义属性；

3.移除元素属性的方法：

element.removeAttribute('属性')

案例：tab栏切换

错误写法：

var lis = document.querySelectorAll('li');
var contents = document.querySelectorAll('.item');
for(var i = 0; i < lis.length; i++){
    lis[i].onclick = function(){
        for(var j = 0; j < lis.length; j++){
            lis[j].removeAttribute('class');
            contents[j].display = 'none';    
        }
        this.setAttribute('class','current');
        contents[i].display = 'block';
    }
}

正确写法：

// 获取元素
var lis = document.querySelectorAll('li');
var contents = document.querySelectorAll('.item');
for(var i = 0; i < lis.length; i++){
    // 在绑定事件之前就需要给li创建一个索引；
    lis[i].setAttribute('index',i);
    lis[i].onclick = function(){
        for(var j = 0; j < lis.length; j++){
            lis[j].removeAttribute('class'); 
        }
        this.setAttribute('class','current');
        var idx = this.getAttribute('index');
        for(var i = 0; i < contents.length; i++){
            contents[i].style.display = 'none';
        }
        contents[idx].style.display = 'block';
    }
}

4.区分自定义属性与内置属性

在H5中规定了自定义属性的名称使用data-开头,读取属性可以通过dataset集合来读取；

<div data-index="2">hello</div>

var res = document.querySelector('div');
console.log(res.getAttribute('data-index'));//兼容性比较好
console.log(res.dataset.index); //照样能读出data-index的属性值为2
console.log(res.dataset['index']); //由于dataset是一个集合，用这种方式也能读取出属性值

VII、节点操作

1.为什么使用节点操作

利用DO提供的方法获取元素逻辑性不强，而利用节点的层级关系获取元素可以利用父子兄关系来获取；

2.节点属性

节点至少拥有nodeType、nodeName、nodeValue这三个属性，

• 元素节点nodeType为1
• 属性节点nodeType为2
• 文本节点nodeType为3（文本节点包含了文字、空格、换行等）

3.节点层级

获取父级节点node.parentNode

获取子节点parentNode.childNodes包含了元素节点以及文本节点；如果只需要获取里面的元素节点则需要专门处理（筛选出nodeType位1的节点）故一般不提倡使用childNodes；

获取子节点parentNode.children返回所有的字元素节点，该方法是一个非标准用法，但是得到了各个浏览器的支持；

获取第一个子节点parentNode.firstChild,文本节点也会被获取。如果只获取第一个元素节点则使用parentNode.fristElementChild

获取最后一个子节点parentNode.lastChild,同样也会获取子节点中的文本节点，使用parentNode.lastElementChild获取最后一个元素节点，但是该方法存在兼容性问题，ie9以上才支持，实际应用中可以使用parentNode.children[index]的方法获取第一个元素或者最后一个元素。

获取下一个兄弟节点node.nextSibling包含元素节点以及文本节点，如果要指定下一个元素节点则使用node.nextElementSibling

获取上一个兄弟节点node.previousSibling包含元素节点以及文本节点,如果要获取上一个元素节点则使用node.previousElementSibling

案例：新浪下拉菜单

var nav = document.querySelector('.nav');
var lis = nav.children;
for(var i = 0; i < lis.length; i++){
    lis[i].onmouseover = function(){
        this.children[1].style.display = 'block';
    }
    lis[i].onmouseout = function(){
        this.children[1].style.display = 'none';
    }
}

4.添加新元素

（1）创建节点：

document.createElement('tagName')由tagName指定HTML元素，由于这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点；

（2）添加节点：

node.appendChild(child)可以将一个节点添加到指定父节点的子节点列表结尾，类似于css里的after伪元素；

如果需要再指定元素的前面插入元素可以使用node.insertBefore(child,指定元素)来实现。

动态创建元素主要有三种方式：

document.write()直接将内容写入页面的内容流，但是文档流执行完毕，会导致页面全部重绘；(在事件中使用会导致页面中的其他元素被清空)

element.innerHTML将内容写入DOM节点，不用担心页面全部重绘制。如果采用拼接字符串的方式效率会很低，但是采用数组的方式进行拼接，则效率很高。

doucument.createElement()效率比拼接数组的方式低一点，但是结构更清晰。

案例：简单留言板功能

var input = document.querySelector('textarea');
var button = document.querySelector('button');
var box = document.querySelector('.reply');
// 定义一个li对象
var li = document.createElement('li');
button.onclick = function(){
    if(input.value == ''){
        alert('请输入内容')
    }else{
        // 定义一个li对象
        var li = document.createElement('li');
        li.innerHTML = input.value;
        box.insertBefore(li,box.children[0]);
        input.value = '';
    }
    
}

5.删除元素

node.removeChild(child)方法可以从DOM中删除一个子节点，并返回删除的节点；

6.复制元素

node.cloneNode()返回调用该方法的节点的一个副本；

注意：

如果括号参数为空或者false，则是浅拷贝，只会复制节点本身，不会克隆里面的文本内容或者子节点；

如果括号里面为true，则为深拷贝，会克隆里面的文本内容以及子节点；

案例：动态生成和删除表格

// 根据数据动态生成tbody里的行和单元格
var tbody = document.querySelector('tbody');
var tr = document.querySelector('tr');
// 数据填充
for(var i = 0; i < dates.length; i++){
    var stu_tr = tr.cloneNode();
    for(var k in dates[i]){
        var td = document.createElement('td');
        td.innerHTML = dates[i][k];
        stu_tr.appendChild(td);
    }
    // 添加超链接
    var td_a = document.createElement('td');
    td_a.innerHTML = '<a href="javascript:;">删除</a>'
    stu_tr.appendChild(td_a);
    tbody.appendChild(stu_tr);
}
// 删除操作
var a_objs = document.querySelectorAll('a');
for(var i = 0; i < a_objs.length; i++){
    a_objs[i].onclick = function(){
        tbody.removeChild(this.parentNode.parentNode);
    }
}

效果：

VIII、事件高级

目标：

• 元素注册的两种方式
• 删除事件的两种方式
• DOM事件流的三个阶段
• 利用事件对象完成跟随鼠标
• 封装组织冒泡的兼容性函数
• 事件委托原理
• 常用的鼠标和键盘事件

1.注册事件

传统注册方式：

称为绑定事件同一个元素只能设置一个处理函数，最后注册的出来函数会覆盖前面注册的处理函数；

btn[0].onclick = function(){
    alert('11');
}

监听注册方式：

方式一：

addEventListener()，同一个元素可以注册多个监听器，并且按注册顺序依次执行；

envenTarget.addEventListener(type,listener[,useCapture])

将指定监听器注册到目标对象上，当该对象触发指定事件时，就会执行事件处理函数；

• type：事件类型字符串，比如click、mouseover,注意不要带on
• listener：事件处理函数，事件发生时，会调用该监听函数；
• useCapture：可选函数，是一个布尔值，默认是false;

var btn = document.querySelectorAll('button');
btn[1].addEventListener('click',function(){
    alert('22');
});
btn[1].addEventListener('click',function(){
    alert('33');
});

方式二：（ie9以前使用的方法，不建议使用）

attachEvent()将指定的监听器注册到eventTarget目标对象上，当该对象触发指定事件时，指定的回调函数就会被执行；

eventTarget.attachEvent(eventNameWithOn,callback)

该方法接收两个参数：

• eventNamewithOn:事件类型字符串，比如onclick、onmouseover
• callback:事件处理函数，当目标触发事件回调函数时被调用；

2.删除事件

传统方式注册的事件解绑可以使用eventTarget.onclick = null

div.onclick = function(){
    alert('11');
    this.onclick = null;
}

方法监听注册方式的解绑可以使用evnetTarget.removeEventListener(type,listener[,useCapture])

div.addEventListener('click',fn);
function fn(){
    alert('22');
    div.removeEventListener('click',fn);
}

这里面考虑到要移除事件，所有addEventListener里面就不要用匿名函数的方式了，直接绑定函数的引用即可。

3.DOM事件流

事件流描述的是从页面中接收事件的顺序，事件发生时会在元素节点间按照特定的顺序进行顺序传播，这个传播的过程即DOM事件流。

注意：

JS代码只能执行捕获或者冒泡其中的一个阶段；

onclick和attachEvent只能得到冒泡阶段；

addEventListener(type,listener[,useCapture])第三个参数如果是true，表示事件捕获阶段调用事件处理程序；如果是false（默认为false)，表示在冒泡阶段处理事件处理程序；

在实际开发中很少使用事件捕获，我们更关注事件冒泡；

有些事件时没有冒泡阶段的：onbulr、onfocus、onmouseenter、onmouseleave

事件冒泡有时候会带来麻烦，有时候会巧妙的帮助做某些事情；

var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('click',function(){
    alert('father');
});
son.addEventListener('click',function(){
    alert('son');
});

例如以上代码，在father div里面嵌套了son div的例子中，点击son div会根据时间捕获的顺序，先弹出father提示框后弹出son提示框；

4.事件对象

event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态；事件发生后，跟事件相关的一系列信息数据的集合会放到这个对象里面，这个对象就是事件对象event,它有很多属性和方法；

event就是一个事件对象，写到监听函数的小括号里面当形参来看；只有有了事件才会存在事件对象，它是系统自动创建的，不需要传递参数；

var son = document.querySelector('.son');son.onclick = function(event){
    console.log(event);
}

var son = document.querySelector('.son');
son.addEventListener('click',function(e){
    console.log(e);
})

如果需要处理兼容性问题，IE678需要到window.event中查找，可以使用方法e = e || window.event

5.事件对象的常见属性和方法

e.target与this的区别是：e.target返回的是触发事件的对象，this返回的是绑定事件的对象；

阻止默认事件，（让连接不跳转，或者让提交按钮不提交）

var a = document.querySelector('a');
a.addEventListener('click',function (e) {
    e.preventDefault();
})

6.阻止事件冒泡

事件冒泡：开始由最具体的元素接收，然后逐级向上传播到DOM顶层节点；

标准写法：利用事件对象里的stopPropagation()写法；

var father = document.querySelector('.father');
var son = document.querySelector('.son');
father.addEventListener('click',function(){
    alert('father');
});
son.addEventListener('click',function(e){
    e.stopPropagation();
    alert('son');
});

阻止事件冒泡的兼容性方案：

if(e && e.stopPropagation){
  e.stopPropagation();
}else{
  window.event.cancelBubble = true;
}

7.事件委托

事件委托也称为事件代理，在jQuery里面称为事件委派；

事件委托的原理：不是给每个子节点单独设置事件监听器，而是时间监听器设置在其父节点上，利用冒泡原理影响设置每个子节点。

实际用法：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li,因为点击li,事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

8.常用的鼠标事件

（1）禁止鼠标右键菜单，contextmenu主要控制应该如何显示上下文菜单；

document.addEventListener('contextmenu',function(e){
    e.preventDefault();
})

（2）禁用鼠标选中selectstart

document.addEventListener('selectstart',function(e){
    e.preventDefault();
})

鼠标事件对象MouseEvent键盘事件对象KeyboardEvent

var mouse = document.querySelector('img');
document.addEventListener('mousemove',function(e){
    mouse.style.left = e.pageX + 'px';
    mouse.style.top = e.pageY + 'px';
})

9.常用键盘事件

注意：

如果同时添加三个监听事件，则三个事件的执行顺序是：keydown --> keypress --> keyup

keyup和keydown事件是不区分字母大小写，a和A得到的keyCode都是65

keypress事件是区分字母大小写的；a是97，A是65

案例：检测按键光标定位到搜索框；

思路：使用keyCode判断用户按键，搜索框获取焦点使用focus()方法

var input = document.querySelector('input');
document.addEventListener('keyup',function(e){
    if(e.keyCode === 83){
        input.focus();
    }
})

案例：模拟快递单号查询效果

在输入框中输入文字，会显示放大框； 若输入框中的文字为空，则隐藏输入框。移入输入框，若为空，则不显示放大框；若不为空，则显示放大框

var input = document.querySelector("input");
var con = document.querySelector(".con");
// ? 注意:这里不能使用keydown和keypress。因为我们的需求是输入进去后再进行判断里面的值是否为空。
// 而keydown事件触发后文字才会被键入输入框，此时是监测不到最新键入的数据的。
input.addEventListener("keyup", function () {
  // 键入文字，为空时隐藏放大镜，不会空则显示放大镜
  if (this.value.trim() === "") {
    con.style.display = "none";
  } else {
    con.style.display = "block";
    con.innerHTML = this.value;
  }
});
// 焦点移出输入框，隐藏放大镜
input.addEventListener("blur", function () {
  con.style.display = "none";
});
// 点击输入框，若有内容则显示放大镜
input.addEventListener("focus", function () {
  if (this.value != "") {
    con.style.display = "block";
  }
});

至此，DOM操作就介绍到这里，下一节，我们将继续介绍JavaScript中的BOM（浏览器对象模型）操作~