2021-07-24

3.兄弟节点

如何解决兼容性问题？

自己封装一个兼容性的函数

 5.4 创建节点

document.createElement('tagName')

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

node.appendChild(child)

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

node.insertBefore(child，指定元素)

node.insertBefore（）方法将一个节点添加到父节点的指定子节点前面。类似于css里面的before伪元素。

5.5 删除节点

node.removeChild(child)

node.removeChild（）方法从DOM中删除一个子节点，返回删除的节点。

5.6 复制节点

node.cloneNode()

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

注意：

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

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

5.7 三种动态创建元素区别

document.write()

element.innerHTML

document.createElement（）

区别

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

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

3.innerHTML创建多个元素效率更高，结构稍微复杂

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

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

6. DOM重点核心

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页内容、结构和样式。

1. 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。

2.对于HTML，dom使得HTML形成一棵dom树，包含文档、元素、节点

 6.1 创建

1.document.write

2.innerHTML

3.createElement

6.2 增

1.appendChild

2.insertBefore

6.3 删

1.removeChild

6.4 改

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

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

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

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

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

6.5 查

主要获取查询dom的元素

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

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

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

6.6 属性操作

主要针对于自定义属性

1.setAttribute：设置dom的属性值

2.getAttribute：得到dom属性值

3.removeAttribute：移除属性

6.7 事件操作

给元素注册事件，采取  事件源.事件类型=事件处理程序

  高级事件

1.注册事件

1.1 注册事件概述

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

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

传统注册方式

利用on开头的事件 onclick

<button οnclick="alert（‘hi~’）"></button>

btn.οnclick=function{}

特点：注册事件的唯一性。

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

方法监听注册方式

W3C标准 

addEventlistener（）它是一个方法

IE9之前的IE不支持此方法，可使用attachEvent（）代替

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

           按注册顺序依次执行

1.2 addEventListener事件监听方式

eventTarget.addEventListener（type，listenner[,useCapture]）

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

1.3 attachedEvent 事件监听方式

eventTarget.addEvent（eventNameWithon，callback）

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

1.4 注册事件兼容性解决方案

 兼容性处理的原则：首先照顾大多数浏览器，再处理特殊；浏览器

2.删除事件

2.1 删除事件的方式

1.传统注册方式

eventTarget.onclick = null ;

2.方法监听注册方式

2.2 删除事件兼容性解决方案

 3. DOM事件流

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

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

比如我们给一个div注册了点击事件：

DOM事件流分3个阶段：

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

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

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

 4.什么是事件对象

eventTarget.onclick = function(event){}
eventTarget.addEventListenner('click',function(event){})
//这个event就是事件对象，我们还喜欢写成e或者evt

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

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