DOM、事件
问答
1. dom 对象的 innerText 和 innerHTML 有什么区别？
innerText，输出/更改纯文本
innerHTML，不仅可以输出/更改纯文本，还可以输出/更改DOM节点树
2. elem.children 和 elem.childNodes 的区别？
elem.children，输出父节点包含的子节点组成的类数组
elem.children，输出父节点包含的所有元素（包括空格、换行、文本、子节点）组成的类数组
3. 查询元素有几种常见的方法？
- 下面的方法里面的参数都是字符串：
- getElementById()
通过 id 查找。返回值为单个元素。 - getElementsByClassName()
通过 class 查找。返回值为类数组。 - getElementsByTagName()
通过 tagname(标签名字) 查找。返回值为类数组。
- 下面的方法通过** CSS 选择符**查询：
- querySelector()
返回与该模式匹配的第一个元素，如果没有，返回 null 。 - querySelectorAll()
与上类似，返回一个 NodeList 对象（与该模式匹配的所有元素）（类数组），如果没有，Nodelist 为空。
4. 如何创建一个元素？如何给元素设置属性？
- 创建元素
document.createElement('Tagname') - 设置属性
setAttribute(‘属性名’, ‘属性值’)
tips: 不规范的属性名也能够被设置。
5. 元素的添加、删除？
- 元素添加
appendChild(要添加的节点) tips: 在末尾添加
insertBefore(要插入的节点, 作为参照的节点) - 元素删除
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. 实现下图的模态框功能
