JavaScript Dom、事件

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

• innerText：innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容，也就是说获取到的是不带标签的文本的拼接组合。
• innerHTML：innerHTML属性作用和innerText类似，但不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM，获取到的是带标签的文本，当然也能获取所有的子标签。
  举例：

<p>123<span>456</span></p>

输出结果

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

• elem.children：children属性是HTMLCollection的实例，返回的值是有标签的元素节点。
• elem.childNodes：返回元素的直接子元素及文本节点，文本节点包含了空格、换行符等。

举例：

<p>123<span>456</span></p>

输出结果

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

• document.getElamentById()
• document.getElementsByName()
• document.getElementsByTagName()
• document.getElementsByClassName()
• document.querySelector()
• document.querySelectorAll()
• document.elementFromPoint()

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

• 通过createElement方法用来生成HTML元素节点。再使用createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
• 通过setAttribute()方法来设置元素属性。

<p class="ct">123<span>456</span></p>
<script>
  var newP = document.createElement('span');
  var newContent = document.createTextNode('hello');
  newP.appendChild(newContent);
  document.body.appendChild(newP);
  var node = document.getElementsByClassName(".ct");
  node.setAttribute("font-size","20px");  
</script>

5.元素的添加、删除？

• 通过appendChild()在元素的末尾添加元素。
• 通过removeChild()来删除元素。

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

• DOM0：写在html标签里面，一个事件只能绑定一个函数，但书写方便，兼容性好，缺点就是后期维护不方便。
• DOM2级事件定义了addEventListener和removeEventListener两种方法对事件进行监听，可以接受事件类型、事件处理方法及布尔参数三个参数，其中addEventListener方法只能通过removeEventListener取消。该方法可以为一个事件绑定多个函数。

7.attachEvent与addEventListener的区别？

• addEventListener有三个参数，而attachEvent只有两个参数；
• addEventListener第一个参数是事件类型（click，load），而attachEvent第一个参数指明的是事件处理函数名称（onclick，onload）；
• addEventListener的作用域是元素本身，this指的是触发元素，而attachEvent事件处理程序会在全局变量内运行，this是window；
• addEventListener添加会按照添加顺序执行，而attachEvent添加多个事件处理程序时顺序无规律。

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

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

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

• 可以通过stopPropagation()来阻止时间冒泡
• 通过preventDefault()来阻止默认事件

10.有如下代码，要求当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

<ul class="ct">
   <li>这里是</li>
   <li>饥人谷</li>
   <li>前端6班</li>
</ul>
<script>
   var ct = document.querySelector('.ct');
   ct.addEventListener('click',function (e){
       console.log(e.target.innerText)
},false);
</script>

输出结果