1.dom对象的innerText和innerHTML有什么区别？
答：innerText是获取不带标签的文本，而innerHTML获取的是带标签的文本。都可以用作改写页面上的内容，innerHTML会获取该元素所子元素的内容。一般使用innerText的多一些，这样可以防止用户所提交的数据中存在代码，对页面产生影响。
<p>hello <a href="#">hunger</a></p>
<script>
var p = document.getElementsByTagName('p')[0]
</script>
2.elem.children和elem.childNodes的区别？
答：elem.children和elem.childNodes都是返回元素的直接子元素。区别有：
- children只返回有标签的元素节点。
- childNodes除了返回元素节点，还会返回文本节点，文本节点包括：空格、换行符等等。
<div id="ct">
<p>青青子衿， 悠悠我心</p>
<p>hello <a href="#">hunger</a></p>
</div>
<script>
var a = document.getElementById("ct")
console.log(a.children)
console.log(a.childNodes)
</script>
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()，里面传入两个值，第一个值为元素的属性，第二个值为定义的值。
<body>
<p class="a">青青子衿，悠悠我心</p>
<script>
var newP = document.createElement('p');
var newText = document.createTextNode('但为君故，沉吟至今')
newP.appendChild(newText)
document.body.appendChild(newP)
var a = document.querySelector('.a')
a.setAttribute('align','center')
</script>
</body>
5.元素的添加、删除？
答：使用appendchild()在元素的末尾添加元素参数为添加进的元素，在上一题的例子中已经使用过这个。
使用insertBefore在某个元素之前插入元素节点，该方法有两个参数一个是被添加的元素，另一个被替换的元素。
<div id="ct">
<p>青青子衿，悠悠我心</p>
</div>
<script>
var div = document.getElementById('ct'),
newContent = document.createTextNode('但为君故，沉吟至今');
div.insertBefore(newContent, div.firstChild);
</script>
使用 removChild（）来删除某个元素，参数是待删除元素。
使用replaceChild（）来替换某个元素，它有两个参数一个是替换的元素，另一个是被替换的元素。
6.DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
答：DOM0事件就是通过onclick写在HTML标签里的事件，
<a href="#" onclick="console.log('clicked');">点我</a>
这种写法的缺点是不利于日后的代码维护，以及一个代码只能使用一次，没有复用性。
DOM2事件有两种方法一个是addEventListener()和removeEventListener() 它们都返回三个参数分别是事件类型、事件处理方法和布尔值默认为false，false是冒泡阶段处理，如果是ture就是在调用阶段处理。
<input id='btn' type="button" name="name" value="点我啊" />
<script>
var btn = document.querySelector("#btn")
btn.addEventListener("click",function(){
console.log("哈哈")
},false)
</script>
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时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.querySelector(".ct")
ct.addEventListener("click",function(e){
console.log(e.target.innerText)
},false)
</script>
方法2
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
var ct = document.getElementsByClassName("ct")[0].getElementsByTagName("li")
for (var i= 0;i<ct.length;i++){
ct[i].addEventListener("click",function(){
console.log(this.innerText)
})
}
</script>
