日夜谈——Dom、事件

DOM和事件

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

innerText会返回一个节点内部所有文本内容，并以文档未添加样式的方式排列。

example1.png
innerHTML会返回一个节点内部所有带有标签的文本，并且以HTML源文档的排版格式出现。 example2.png

另外还有一个textContent，textContent会返回一个带标签的文本，但是会按照原HTML文档的方式排列。

example3.png

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

elem.children是一个只读属性，属于HTML Collection类型,将返回当前节点所有子元素的动态伪数组。
elem.childNodes是一个只读属性，为NodeList类型，将返回当前节点的所有子节点的伪数组。

example4.png

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

1. document.getElementById()  通过Id名查询元素
2.document.getElementsByClassName() 通过class名来查询元素（注：此方法只会返回所有包含该class
的元素，不含子元素）
3.document.getElmentByTagName() 通过标签名查询元素
4.document.getElementByName 通过标签设置的name来查询元素
5.document.querySelector() 通过输入对应的id或者Class来查询含有id或者Class的第一个元素。
6.document.querySelectorAll()通过输入对应的id或者Class来查询含有该id或者Class的所有元素。

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

1.创建元素节点使用documen.createElement()方法。
2.帮元素添加属性使用setAttribute()方法或者node.style方法

example5.png

5.元素的添加、删除？

1.元素的添加方法parentNode.appendChild(),或是parentNode.insertBefore()
2.元素的删除方法parentNode.removeChild()

demo:

example6.png

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

DOM0级事件处理程序是通过JavaScript的传统定制方式去处理事件程序，例如onclick，onload等等。

优点：可以兼容不同浏览器。
缺点：只能添加一个执行函数。

demo：

example7.png

DOM 2级事件处理程序，在DOM事件中规定两个API：添加事件方法addEventListener()和去除事件函数 removeEventListener()。(另外IE是attachEvent()与detachEvent())
demo：demo

优点：可以添加多个执行函数。
缺点：对IE的兼容性不足。

example8.png
详细资料

7.attachEvent与addEventListener的区别？

1. 支持浏览器不同，attachEvent支持IE9以下的浏览器，而addEventListener不支持。其他都支持addEventListener。

2. addEventListener第三个参数可以指明是否去捕获事件，而attachEvent不能。

3. 事件名不同，addEvent第一个参数，即事件名要加’on‘，例如'onclick','onload'等等。

4. this不同，attachEvent的this总是window，而addEventListener的this总是正在处理事件的DOM对象。

详细：the differener of attachEvent and addEventListener

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

IE事件冒泡：IE的事件冒泡：当发生事件时，目标节点先捕获，然后逐级向上传播到父节点，即事件监听处于冒泡阶段

DOM2事件传播机制：有3个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段。
事件处理详细

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

<li>停止事件传播：停止事件传播可以通过调用事件对象的stopPropagation()方法，在任何阶段(事件冒泡和事件捕获)都可以停止事件进一步传播。

另外如果你还想阻止当前事件的(冒泡行为或者捕获行为)并且阻止当前事件所在元素上的所有相同类型事件的事件处理函数的继续执行。则你可以使用stopimmediatePropagation()方法。stopimmediatePropagation()方法MDN
demo
<li>阻止浏览器的默认行为:
如果你想取消浏览器默认的行为，你可以调用preventdefault()方法，举个例子，例如当你去点击一个复选框的时候，浏览器会默认你的点击行为，然后添加一个小勾，这个时候当个调用preventdefault()方法，你就会阻止浏览器在复选框上加勾这一行为。
demo

练习代码：

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

<ul class="ct">
    <li>这里是</li>
    <li>饥人谷</li>
    <li>前端6班</li>
</ul>
<script>
//todo ...
</script>

demo1
源代码1

example9.png

demo2
源代码2

3.补全代码，要求：当鼠标放置在li元素上，会在img-preview里展示当前li元素的data-img对应的图片。

<ul class="ct">
    <li data-img="1.png">鼠标放置查看图片1</li>
    <li data-img="2.png">鼠标放置查看图片2</li>
    <li data-img="3.png">鼠标放置查看图片3</li>
</ul>
<div class="img-preview"></div>
<script>
//todo ...
</script>

demo3
源代码3

4.Tab切换

ex10.png

demo4
源代码4

5.modal框功能实现
demo5
源代码5

版权归饥人谷peter和饥人谷所有，若有转载，请注明来源

感谢瓜子观众：

gaki22