JavaScript之DOM

 一、DOM简介

文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可拓展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

文档 ：一个页面就是一个文档，DOM中使用document表示。

元素：页面中所有的标签都是元素，DOM中使用element表示。

节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示。

二、获取元素

<div id="time">2023-1-29</div>
<p>hello world!1</p>
<p>hello world!2</p>
<p>hello world!3</p>
<div class="c1">你好，世界！</div>

<script>
    // 1.根据ID获取元素getElementById
    var timer = document.getElementById('time');
    console.log(timer);
    console.log(typeof timer);
    // console.dir 打印返回的元素对象，更好的查看里面的属性和方法
    console.dir(timer);
    // 2.根据标签名获取元素getElementsByTagName()可以返回带有标签名的对象的集合
    var elEp = document.getElementsByTagName('p');
    console.log(elEp);
    console.log(elEp[0]);
    // 3.根据类名获取元素
    var elEc1 = document.getElementsByClassName('c1');
    console.log(elEc1);
    console.log(elEc1[0]);
    // 4.querySelector 返回指定选择器的第一个元素对象
    var elEp1 = document.querySelector('p');
    console.log(elEp1);
    // 5.querySelectorAll()返回指定选择器的所有元素对象集合
    var allP = document.querySelectorAll('p');
    console.log(allP);
    // 6.document.body 返回body元素对象
    console.log(document.body);
    // 7.document.documentElement 返回html元素对象
    console.log(document.documentElement);
</script>

三、事件基础

3.1.事件三要素

点击一个按钮，弹出对话框

事件是有三部分组成，事件源、事件类型和事件处理程序，我们也称为事件三要素。

1.事件源 事件被触发的对象

var btn = document.getElementById('btn');

2.事件类型 如何触发，什么事件，比如鼠标点击(onclick)

3.事件处理程序，通过一个函数赋值的方式完成

btn.onclick = function() { alert('hello world!') }

3.2.常见的鼠标事件

onclick：鼠标点击左键触发。

onmouseover：鼠标经过触发。

onmouseout：鼠标离开触发。

onfocus：获得鼠标焦点触发。

onblur：失去鼠标焦点触发。

onmousemove：鼠标移动触发。

onmouseup：鼠标弹起触发。

onmousedown：鼠标按下触发。

四、操作元素

4.1.改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉。

element.innerHTML

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。

4.2.常用元素的属性操作

1.innerText、innerHTML改变元素内容

2.src、href

3.id、alt、title

4.3.表单元素属性操作

<button>按钮</button>
<input type="text" value="输入内容">
<script>
    // 利用DOM可以操作如下表单元素的属性：
    // type、value、checked、selected、disabled
    // 1.获取元素
    var btn = document.querySelector('button');
    var inp = document.querySelector('input');
    btn.onclick = function () {
        // inp.innerHTML = '点击了';   // 这个是普通盒子 比如div标签里面的内容
        // 表单里面的值文字内容是通过value来修改的
        inp.value = '被点击了'
        // 如果想要某个表单被禁用不能在点击disabled，想要这个按钮button禁用
        // btn.disabled = true;
        this.disabled = true;
        // this指向的是事件函数的被调用者 btn
    }
</script>

4.4.样式属性操作

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }

    .change {
        color: #5bc0de;
        font-size: 30px;
        margin: 100px;
    }
</style>
<div>文本</div>
<script>
    // element.style 行内样式操作
    // 注意：
    // JS里面的样式采取驼峰命名法，比如：fontSize、backgroundColor
    // JS修改style样式操作，产生的是行内样式，CSS权重比较高
    // element.className 类名样式操作
    // 注意：
    // 如果样式修改较多，可以采用操作类名方式更改元素样式
    // class因为是个保留字，因此使用className来操作元素类名属性
    // className会直接改变元素的类名，会覆盖原先的类名
    // 1.获取元素
    var div = document.querySelector('div');
    // 2.注册事件
    div.onclick = function () {
        // div.style里面的属性采取驼峰命名法
        this.style.backgroundColor = 'purple';
        this.style.width = '300px';
        this.className = 'change';
    }
</script>

4.5.自定义属性的操作

自定义属性目的：是为了保存并使用数据。有些数据可以保存到网页中而不用保存到数据库中。

4.5.1.获取属性值

element.属性， 获取属性值。

element.getAttribute('属性');

区别：

        1.element.属性，获取内置属性值(元素本身自带的属性)。

        2.element.getAttribute('属性');主要获得自定义的属性

4.5.2.设置属性值

element.属性 = '值'，设置内置属性值

element.setAttribute('属性','值');

区别：

        1.element.属性，设置内置属性值

        2.element.setAttribute('属性');主要设置自定义的属性。

4.5.3.移出属性值

element.removeAttribute('属性');

<div id="demo" index="1"></div>
<script>
    var div = document.querySelector('div');
    // 1.获取元素的属性
    // (1)element.属性
    console.log(div.id);
    // (2)element.getAttribute('属性'_get得到获取attribute属性的意思
    console.log(div.getAttribute('id'));
    console.log(div.getAttribute('index'));
    // 2.设置元素属性值
    // (1)element.属性 = '值'
    div.id = 'test';
    // (2)element.setAttribute('属性','值');主要这对于自定义属性
    div.setAttribute('index', '2');
    // 3.移出属性removeAttribute('属性')
    div.removeAttribute('index');
</script>

4.6.小结

五、节点操作

5.1.节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

父级节点

node.parentNode：属性可以返回某些节点的父节点，注意是最近的一个父节点。

如果指定的节点没有父节点则返回null。

子节点（标准）

parentNode.childNodes：返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。

如果只想要获取里面的元素节点，则需要专门处理，所以一般不提倡使用childNodes。

var ul = document.querySelector('ul');

for (var i = 0; i < ul.childNodes.length; i++) {

        if (ul.childNodes[i].nodeType === 1) {

                // ul.childNodes[i]是元素节点

                console.log(ul.childNodes[i]);

        }

}

子节点（非标准）

parentNode.children：是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返回。

虽然children是一个非标准，但是得到了各个浏览器的支持，可以放心使用。

parentNode.firstElementChild：返回第一个子元素节点，找不到则返回null。

parentNode.lastElementChild：返回最后一个子元素节点，找不到则返回null。

注意：这两个方法有兼容问题，IE9以上才支持。

实际开发的写法，即没有兼容性问题又返回第一个元素

console.log(ol.children[0]);

console.log(ol.children[ol.children.length - 1]);

兄弟节点

node.nextSibling：返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

node.previousSibling：返回当前元素的上一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

node.nextElementSibling：返回当前元素下一个兄弟元素节点，找不到返回null。

node.previousElementSibling：返回当前元素上一个兄弟节点，找不到则返回null。

注意：这两个方法有兼容性问题，IE9以上才支持。

如何解决兼容性问题？封装一个兼容性的函数

function getNextElementSibling(element) {

        var el = element;

        while (el = el.nextSibling) {

                if (el.nodeType === 1) { return el; }

        }

        return null;

}

5.2.创建节点

document.createElement('tagName');

document.createElement()方法创建由tagName指定的HTML元素。因此这些元素原先不存在，是根据需求动态生成的，所以也称为动态创建元素节点。

5.3.添加节点

node.appendChild(child)：方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面的after伪元素。

node.insertBefore(child，指定元素)：方法将一个节点添加到父节点的指定子节点前面。类似于CSS里面的before伪元素。 

5.4.删除节点

node.removeChild(child)：方法从DOM中删除一个子节点，返回删除的节点。

5.5.复制节点(克隆节点)

node.cloneNode()：方法返回调用该方法的节点的一个副本。也成为克隆节点/拷贝节点。

注意：

        1.如果括号参数为空或者为false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

        2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

<ul>
    <li>123</li>
</ul>
<script>
    // 想要在页面添加一个新元素：1.创建元素 2.添加元素
    // 1.创建节点元素节点
    var li = document.createElement('li');
    // 2.添加节点node.appendChild
    var ul = document.querySelector('ul');
    ul.appendChild(li);
    // 3.添加节点node.insertBefore
    var lili = document.createElement('li');
    ul.insertBefore(lili, ul.children[0]);
    // 4.删除节点node.removeChild
    var res = ul.removeChild(ul.children[0]);
    console.log(res);
    // 5.复制节点node.cloneNode
    var ulli = ul.children[0].cloneNode(true);
    ul.appendChild(ulli);
</script>

5.6.三种动态创建元素区别

document.write()

element.innerHTML

document.createElement()

区别：

1.document.write是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘。

2.innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘。

3.innerHTML创建多个元素效率更高(不要拼接字符串，采取数组形式拼接)，结构稍微复杂。

4.createElement()创建多个元素效率稍低一点，但是结构更清晰。

总结：不同浏览器下，innerHTML效率要比createElement高。

5.7.DOM小结

创建：1.document.write    2.innerHTML    3.createElement

增：1.appendChild    2.insertBefore

删：removeChild

改：主要修改dom的元素属性，don元素的内容、属性，表单的值等。

        1.修改元素属性：src、href、title等

        2.修改普通元素内容：innerHTML、innerText

        3.修改表单元素：value、type、disabled等

        4.修改元素样式：style、className

查：主要获取查询dom的元素

        1.DOM提供的API方法：getElementByld、getElementsByTagName

        2.H5提供的新方法：querySelector、querySelectorAll

        3.利用节点操作获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling)

属性操作：主要针对于自定义属性

        1.setAttribute：设置dom的属性值

        2.getAttribute：得到dom的属性值

        3.removeAttribute：移出属性

事件操作：给元素注册事件，采取数据源.事件类型 = 事件处理程序

        1.onclick：鼠标点击左键触发。

        2.onmouseover：鼠标经过触发。

        3.onmouseout：鼠标离开触发。

        4.onfocus：获得鼠标焦点触发。

        5.onblur：失去鼠标焦点触发。

        6.onmousemove：鼠标移动触发。

        7.onmouseup：鼠标弹起触发。

        8.onmousedown：鼠标按下触发。

六、事件高级

6.1.注册事件(绑定事件)

6.1.1.注册事件概述

给元素添加数据，称为注册事件或者绑定事件。

注册事件有两种方式：传统方式和方法监听注册方式。

传统注册方式：

        1.利用on开头的事件onclick

        2.<button οnclick="alert('hello')"></button>

        3.btn.onclick = function() {}

        4.特点：注册事件的唯一性

        5.同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

方法监听注册事件：

        1.w3c标准，推荐方式

        2.addEventListener()它是一个方法

        3.IE9之前的IE不支持此方法，可使用attachEvent()代替

        4.特点：同一个元素同一个事件可以注册多个监听器

6.1.2.addEventListener事件监听方式

eventTarget.addEventListener(type，listener[，useCapture])

eventTarget.addEventListener()方法将指定的监听器注册到eventTarget(目标对象)上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

type：事件类型字符串，比如click、mouseover，注意这里不要带on

listener：事件处理函数，事件发生时，会调用该监听函数

useCapture：可选参数，是一个布尔值，默认是false

6.2.删除事件(解绑事件)

1.传统注册方式

eventTarget.onclick = null;

2.方法监听注册方式

eventTarget.removeEventListener(type，listener[，useCapture]);

6.3.DOM事件流

事件流描述的是从页面中接收事件的顺序。

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

比如我们给一个div注册了点击事件：1.捕获阶段    2.当前目标阶段    3.冒泡阶段

事件冒泡：IE最早提出，事件开始时由具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。

事件捕获：王景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。

注意：

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

        2.onclick和attachEvent只能得到冒泡阶段

        3.addEventListener(type，listener[，useCapture]);第三个参数如果是true，表示在捕获阶段调用事件处理程序；如果是false(不写默认就是false)，表示在事件冒泡阶段调用事件处理程序。

        4.实际开发中很少使用事件捕获，更关注事件冒泡

        5.有些数据是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

6.4.事件对象

eventTarget.onclick = function(event) {}

eventTarget.addEventListener('click', function(event) {})

官方解释：event对象代表事件的状态，比如键盘案件的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息事件的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

比如：

        1.谁绑定了这个事件

        2.鼠标触发事件的话，会得到鼠标的相关信息，如鼠标位置

        3.键盘触发事件的话，会得到键盘的相关信息，如按了哪个键

事件对象的使用语法：

eventTarget.onclick = function(event) {}

eventTarget.addEventListener('click'，function(event) {})

这个event是个形参，系统帮我们设定为事件对象，不需要传递实参过去。

当注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件处理函数)。

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

e.target：返回触发事件的对象    标准

e.srcElement：返回触发事件的对象    非标准ie6-8使用

e.type：返回数据的类型，比如click mouseover不带on

e.cancelBubble：该属性阻止冒泡    非标准ie6-8使用

e.returnValue：该属性阻止默认事件(默认行为)  非标准ie6-8使用，比如不让链接跳转

e.preventDefault()：该方法阻止默认事件(默认行为)  标准，比如不让链接跳转

e.stopPropagation()：阻止冒泡  标准

6.5.阻止事件冒泡

6.5.1.阻止事件冒泡的两种方式

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

事件冒泡本身的特征，会带来的坏处，也会带来的好处，需要灵活掌控。

阻止事件冒泡：

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

非标准写法：IE6-8利用事件对象cancelBubble属性

6.5.2.阻止事件冒泡的兼容性解决方案

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

6.6.事件委托(代理、委派)

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

事件委托的原理： 

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。给ul注册点击事件，然后利用事件对象的target来找到当前的点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

事件委托的作用：只操作了一次DOM，提高了程序的性能。

<ul>
    <li>宇宙很大，生活更大，也许以后还有缘相见。</li>
    <li>宇宙很大，生活更大，也许以后还有缘相见。</li>
    <li>宇宙很大，生活更大，也许以后还有缘相见。</li>
    <li>宇宙很大，生活更大，也许以后还有缘相见。</li>
    <li>宇宙很大，生活更大，也许以后还有缘相见。</li>
</ul>
<script>
    // 事件委托的核心原理：给父节点添加监听器，利用事件冒泡影响每一个子节点
    var ul = document.querySelector('ul');
    ul.addEventListener('click', function (e) {
        // e.target这个可以得到我们点击的对象
        e.target.style.backgroundColor = 'pink';
    })
</script>

6.7.常用的鼠标事件

6.7.1.常用的鼠标事件

onclick：鼠标点击左键触发。

onmouseover：鼠标经过触发。

onmouseout：鼠标离开触发。

onfocus：获得鼠标焦点触发。

onblur：失去鼠标焦点触发。

onmousemove：鼠标移动触发。

onmouseup：鼠标弹起触发。

onmousedown：鼠标按下触发。

禁止鼠标右键菜单：

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单。

document.addEventListener('contextmenu', function(e) {

        e.preventDefault();

})

禁止鼠标选中(selectstart开始选中)：

document.addEventListener('selectstart', function(e) {

        e.preventDefault();

})

6.7.2.鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。

e.clientX：返回鼠标相对于浏览器窗口可视区的X坐标。

e.clientY：返回鼠标相对于浏览器窗口可视区的Y坐标。

e.pageX：返回鼠标相对于文档页面的X坐标 IE9+ 支持。

e.pageY：返回鼠标相对于文档页面的Y坐标 IE9+ 支持。

e.screenX：返回鼠标相对于电脑屏幕的X坐标。

e.screenY：返回鼠标相对于电脑屏幕的Y坐标。

6.8.常用的键盘事件

6.8.1.常用键盘事件

事件处理使用鼠标触发，还可以使用键盘触发。

onkeyup：某个键盘被松开时触发。

onkeydown：某个键盘被按下时触发

onkeypress：某个键盘被按下时触发，但是它识别功能键比如：ctrl shift 箭头等

注意：

        1.如果使用addEventListener不需要加on

        2.onkeypress和前面2个的区别是，它识别功能键，比如左右箭头，shift等

        3.三个事件的执行顺序是：keydown--keypress--keyup

6.8.2.键盘事件对象

keyCode：返回该键的ASCII值。