Javascript:DOM、事件

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

• innerHTML包含了对象从起始到终止的全部内容,<>&此类符号会被替换成相应字符
  <pre>
  <div className="one">
  <span>hello<>&world</span>nihaoshijie
  </div>
  //document.getElementById('one').innerHTML就是<span>hello<>&world</span>nihaohsijie
  </pre>

• innerText包含了该对象从起始位置到终止的所有除标签的内容
  <pre>
  <div className="one">
  <span>hello<>&world</span>nihaoshijie
  </div>
  //这里的document.getElementById('one').innerText包含了hello<>&worldnihaohsijie
  </pre>

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

• elem.childern是非标准属性，但是获得了大部分浏览器的支持。它返回指定元素的子元素合集。只返回HTML节点不返回文本。
  <pre>
  <div className="one">
  <span>hello<>&world</span>nihaoshijie
  </div>
  //这里children返回[<span>hello<>&world</span>]
  </pre>
• elem.childNodes是标准属性，返回节点的子节点集合，包含HTML节点，属性和文本。
  <pre>
  <div className="one">
  <span>hello<>&world</span>nihaoshijie
  </div>
  //这里childNodes返回一个类数组对象。
  </pre>

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

• getElementById() 返回拥有指定ID的第一个对象的引用
• getElementsByClassName()返回具有指定类名的类数组对象
• getElementBytagName()返回带有指定标签名的类数组对象
• querySelector() 返回拥有指定css选择器的第一个元素
• querySelectorAll()返回拥有指定css选择器的类数组对象

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

• createElement()创建一个节点元素
• createTextNode()创建一个文本节点
• setAttribute()来设置属性

5.元素的添加、删除？

• removeChild()删除元素
• appendChild在尾部添加元素
• insertBefore在某个节点前添加元素

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

• DOM 0就是通过onclick写在HTML里面的事件，此方法只能绑定一个函数，如果想绑定多个函数，则后一个将前一个函数覆盖。
• DOM 2是通过addEventListener或者attachEvent绑定事件，该方法可以绑定多个函数并且不会被覆盖。

7.attachEvent与addEventListener的区别？

• attachEvent(type,handler)是IE79的事件绑定函数，不支持事件捕获阶段，只支持冒泡，this指代的是window。
• addEventListener(type,handler,boolean),DOM2的事件绑定函数，支持捕获和冒泡阶段，this指代的是触发事件的元素，，boolean为true表示捕获阶段，false表示冒泡阶段。

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

• IE事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素。
• DOM2事件：DOM2事件流包括三个阶段，捕获阶段，目标阶段，冒泡阶段。首先事件从根节点开始逐级向下传播到具体节点，到达目标节点后，向上传播，回至根节点。

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

• 标准：
  阻止冒泡.stopPropagation()
  阻止默认.preventDefault()
• IE：
  阻止冒泡.cancelBubble(boolean)ture为取消，默认false
  阻止默认.returnValue默认为true，false为阻止

代码3

第三题，当鼠标滑过li时，下面显示图片，遇到了问题。
第一种方案是获取所有li，然后for遍历每个li，捆绑一个时间监听，这种方案直接用mouseenter没有问题。
但是第二种父容器的方案，如果还是用mouseenter的话，就会报错。

Paste_Image.png Paste_Image.png

解决方案有两种，第一种是换成mouseover,mouseover是指无论鼠标穿不穿过目标，都会触发，而mouseenter只有穿过时才会触发，但是上图，即使穿过了元素，也不会显示图片也会报错，不知道什么原因。

Paste_Image.png Paste_Image.png

另一种是将addeventlistener调成捕获阶段，不过会报一些错误，虽然不耽误使用，不是很清楚这个错误的来源。

Paste_Image.png Paste_Image.png

代码4

不是很明白这句话，它的作用应该是判断el的长度是否大于零且大于一，但是不知道这句话的逻辑
<pre>
if (el.length && ele.length > 0)
</pre>

代码5

首先看到老师的代码，这个用btn呼出模态框的事件监听，是否可以用不需要禁止冒泡，感觉这个不禁止的话，也不会因为点错而造成呼出

Paste_Image.png

其次是不知道为什么老师写的确认按键，点击可以不响应，而我的点击后和其他close按钮一样，回到了页面，但是jscode中并未看到老师对确认按钮进行了设置。