DOM、事件

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

答：innerText是获取不带标签的文本，而innerHTML获取的是带标签的文本。都可以用作改写页面上的内容，innerHTML会获取该元素所子元素的内容。一般使用innerText的多一些，这样可以防止用户所提交的数据中存在代码，对页面产生影响。

    hello hunger

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

答：elem.children和elem.childNodes都是返回元素的直接子元素。区别有：

children只返回有标签的元素节点。
childNodes除了返回元素节点，还会返回文本节点，文本节点包括：空格、换行符等等。

    
        青青子衿， 悠悠我心
    hello hunger

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

答：常用的有六种方法他们分别是getElementById()、getElementsByClassName()、getElementsByTagName()、getElementByName()、querySelector()、querySelectAll()。

getElementById()：通过Id名称来查询元素

document.getElementById('ct') //查询id为ct的元素

getElementsByClassName():通过Class名称来获取元素。

document.getElementsByClassName('box')//获取Class名称为box的元素。

getElementsByTagName():获取指定标签的元素，返回值是一个HTMLCollection对象（类似一个数组）。

document.getElementsByTagName('p')//获取所有p标签内容的一个类数组。

getElementsByName():查询拥有Name属性的HTML元素，比如form、img等，返回一个NodeList格式对象，不会实时反映元素变化。

document.getElementsByName('text')

querySelector():查询匹配指定的CSS选择器的元素节点，如果有多个节点满足条件，只返回第一项，IE8以上支持，现在很常用。

document.querySelector('#ct')//获取Id为ct的元素

querySelectorAll()：同上但返回对象是NodeList。

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

答：创建一个元素createElement(),createTextNode()来往元素中添加文本，定义属性setAttribute()，里面传入两个值，第一个值为元素的属性，第二个值为定义的值。


        青青子衿，悠悠我心

5.元素的添加、删除？

答：使用appendchild()在元素的末尾添加元素参数为添加进的元素，在上一题的例子中已经使用过这个。
使用insertBefore在某个元素之前插入元素节点，该方法有两个参数一个是被添加的元素，另一个被替换的元素。

        
            青青子衿，悠悠我心

使用 removChild（）来删除某个元素，参数是待删除元素。
使用replaceChild（）来替换某个元素，它有两个参数一个是替换的元素，另一个是被替换的元素。

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

答：DOM0事件就是通过onclick写在HTML标签里的事件，

点我

这种写法的缺点是不利于日后的代码维护，以及一个代码只能使用一次，没有复用性。
DOM2事件有两种方法一个是addEventListener()和removeEventListener() 它们都返回三个参数分别是事件类型、事件处理方法和布尔值默认为false，false是冒泡阶段处理，如果是ture就是在调用阶段处理。

DOM2可以给上面代码添加多个事件处理程序，对IE9以下的浏览器不支持。

7.attachEvent与addEventListener的区别？

答：

addEventListener是W3C标准，而attachEvent()不是W3C标准，并只支持IE8浏览器以下的
addEventListener里面有三个参数（类型、函数、布尔值）而attachEvent只有两个（类型、函数），只支持事件冒泡。
addEventListener接收的类型为click而attachEvent接收的是onclick。
addEventListener的移除函数方法是removeEventListener，而attachEvent移除函数的方法是detachEvent。
addEventListener的作用域是元素本身，this指的是触发元素，attachEvent的作用域是全局this指的是window。
addEventListener按照添加顺序执行，attachEvent没有顺序执行。

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

答：

IE事件冒泡是事件由第一个被触发的元素接收，然后逐级向上传播，
DOM2事件传播，事件由最外层元素接收，然后逐层向内传播，这个过程为捕获阶段，当达到目标元素时，处于目标阶段，然后事件由目标元素向最外层开始传递，这个过程称之为冒泡阶段

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

答：阻止事件冒泡：e.stopPropagation()用来阻止事件传播，事件在document冒泡阶段是听不到响应的。
使用cancelable来查询默认事件是否被阻止，如果返回值为true，可以使用e.preventDefault()来阻止默认事件,比如阻止a链接的跳转。

代码题

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


    这里是
    饥人谷
    前端6班


方法2

    这里是
    饥人谷
    前端6班

代码2
代码3
代码4
代码5