DOM、事件

问答

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

• innerText，输出/更改纯文本

• innerHTML，不仅可以输出/更改纯文本，还可以输出/更改DOM节点树

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

• elem.children，输出父节点包含的子节点组成的类数组

• elem.children，输出父节点包含的所有元素（包括空格、换行、文本、子节点）组成的类数组

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

1. 下面的方法里面的参数都是字符串：

• getElementById()
  通过 id 查找。返回值为单个元素。
• getElementsByClassName()
  通过 class 查找。返回值为类数组。
• getElementsByTagName()
  通过 tagname(标签名字) 查找。返回值为类数组。

2. 下面的方法通过** CSS 选择符**查询：

• querySelector()
  返回与该模式匹配的第一个元素，如果没有，返回 null 。
• querySelectorAll()
  与上类似，返回一个 NodeList 对象（与该模式匹配的所有元素）（类数组），如果没有，Nodelist 为空。

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

1. 创建元素
   document.createElement('Tagname')
2. 设置属性
   setAttribute(‘属性名’, ‘属性值’)
   tips: 不规范的属性名也能够被设置。

5. 元素的添加、删除？

1. 元素添加
   appendChild(要添加的节点) tips: 在末尾添加
   insertBefore(要插入的节点, 作为参照的节点)
2. 元素删除
   appendChild(要插入的节点, 要替换的节点)
   removeChild(要移除的节点)

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

• DOM0 事件监听器无法处理多个事件（当在同一个元素上再添加一个监听事件时会覆盖之前的事件方法），DOM2 级事件监听器可以处理多个事件（事件列表）。
• DOM2 级 (addEventListener()) : 可以选择在捕获阶段触发事件或者在冒泡阶段触发事件。DOM0 无法选择。
• DOM0 不存在兼容性问题，DOM2 在 IE8 之前不支持。（ IE 使用attachEvent(‘click’, func) ）

7. attachEvent 与 addEventListener 有什么区别？

• attachEvent是老版本IE浏览器上监听事件的方法，接受两个参数，第一个参数是事件类型，格式为”on+type”(onclick),第二个参数是事件处理程序函数。事件处理程序只能发生在冒泡阶段。
• addEventListener是现代大多数逐渐主流浏览器（Chrome,firefox,safari）监听事件的方法，接受三个参数，第一个参数时事件类型，格式为”type”(click),第二个参数是事件处理程序函数，第三个参数是布尔值,默认为false(冒泡事件),true为捕获阶段事件。

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

• IE事件冒泡：事件由触发元素所在的具体节点开始，逐级向上传播，直至html根节点。
• DOM2事件传播机制：DOM2事件传播机制属于DOM事件流(DOM2级事件规定事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段)，并且第三个参数可以设置事件触发时是捕获阶段或者冒泡阶段。

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

• 阻止事件冒泡：
  • event.stopPropagation()
  • IE: event.cancelBubble=true ( 这里默认为 false )
• 阻止默认事件：
  • event.preventDefault()
  • IE: event.returnValue = false ( 这里默认为 true )

---

---

代码

1. 要求：

• 当点击每一个元素li时控制台展示该元素的文本内容。不考虑兼容

效果预览

2. 补全代码，要求：

• 当点击按钮开头添加时在 <li> 这里是 </li> 元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在 <li> 前端6班 </li> 后添加用户输入的非空字符串.
• 当点击每一个元素li时控制台展示该元素的文本内容。

效果预览

3. 补全代码，要求：

• 当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

效果预览

4. 实现如下图Tab切换的功能

JSBin_代码地址_方法 1
JSbin_代码地址_方法 2

5. 实现下图的模态框功能

效果预览