第二十二弹-DOM、事件

一、问答

1.dom对象的innerText和innerHTML有什么区别？

dom对象中的innerText获取当前节点的文本内容，而innerHTML包含了代码块。
在赋值操作时 innerText安全性更高，因为innerHTML会执行用户输入的代码

---

2.elem.children和elem.childNodes的区别？

childNodes是子节点列表集合（包括空白字符等非元素类型的节点），只读属性，有兼容性问题
children是只获取元素类型的节点。

---

3.查询元素有几种常见的方法？

1.getElementById() 返回id对应的元素节点
2.getElementsByClassName() 返回相同class 元素节点的类数组对象
3.getElemetsByTagName() 返回相同标签 元素节点的类数组对象
3.querySelector() 返回回匹配指定的CSS选择器的元素节点
4.querySelectorAll() 返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象

---

4.如何创建一个元素？如何给元素设置属性？

createElement()方法用来生成HTML元素节点
createTextNode()方法用来生成文本节点
.id .className .style 来赋值
setAttribute("属性","赋值") 来设置属性

---

5.元素的添加、删除？

appendChild() 在元素末尾添加元素
insertBefore() 在元素的前面添加元素
parentNode.removeChild(childNode); 删除元素

---

6.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？

DOM0实现事件监听的方式是单一事件只能监听一次oDiv.onclick=function(){};这种方法如果该事件下方还有一个事件，那么将被覆盖，且不支持事件捕获
DOM2级事件监听的方式是oDiv.addEventListener(‘click’,function(){})这种方法可以实现多个事件捆绑，并且支持事件捕获。

---

7.attachEvent与addEventListener的区别？

addEventListener是DOM2级事件绑定,支持非ie789浏览器，支持事件捕获，书写方法是oDiv.addEventListener(‘click’,function(){},false)
其中最后一个参数如果是true表示在捕获阶段调用事件处理程序，如果是false，则是在事件冒泡阶段处理
attachEvent是ie789事件绑定，不支持事件捕获，书写方法是attachEvent(‘onclick’,function(){})
二者的this所指不一样，addEventListener指的是触发事件的元素，attachEvent指的是window

---

8.解释IE事件冒泡和DOM2事件传播机制？

IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素
DOM事件流：DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段

---

9.如何阻止事件冒泡？ 如何阻止默认事件？

非IE浏览器：阻止事件冒泡： e.stopPropagation()
阻止默认事件 ：e.preventDefault()
IE浏览器：取消事件冒泡：设置e.cancelBubble属性为true，默认为false
阻止默认事件：设置e.returnValue属性为false，默认为true

---

二、代码

task22

---

参考文档：饥人谷课件

---

本教程版权归小韩同学和饥人谷所有，转载须说明来源