1. dom对象的 innerText 和 innerHTML 有什么区别？
例子
<div id="test">
<span style="color:red">test1</span> test2
</div>
test.innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2”。test.innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的test.innerText的值也就是“test1 test2”, 其中span标签去除了。
完整示例：
<div id="test">
<span style="color:red">test1</span> test2
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
特别说明：innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器（在谷歌下调试的所以innerText是没问题的，不知道火狐），因此，尽可能地去使用innerHTML，而少用innerText。
补充：
- innerHTML 设置或获取位于对象起始和结束标签内的 HTML
- outerHTML 设置或获取对象及其内容的 HTML 形式
- innerText 设置或获取位于对象起始和结束标签内的文本
- outerText 设置(包括标签)或获取(不包括标签)对象的文本
2. elem.children 和 elem.childNodes 的区别？
- childNodes 属性
- children 属性
children和childNodes - snandy - 博客园
DOM 之 children & childNodes - big军 的个人空间
3. 查询元素有几种常见的方法？
有7种常见方式查询DOM：
- getElementById()
- getElementsByClassName()（除了 IE<9）
- querySelector（除了 IE<8 和 IE8 兼容模式）
- querySelectorAll()
- getElementsByName()
- getElementsByTagName()（不建议单独使用，可与其它嵌套使用更安全）
- elementFromPoint()
饥人谷课件
在DOM中搜索元素 - S.K.Park - 博客园
4. 如何创建一个元素？如何给元素设置属性？
-
createElement()用来生成HTML元素节点
var newDiv = document.createElement("div");
createElement()方法的参数为元素的标签名，即元素节点的tagName属性。如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。
-
createAttribute()方法生成一个新的属性对象节点，并返回它。
attribute = document.createAttribute(name);
createAttribute方法的参数name，是属性的名称。
5. 元素的添加、删除？
- 删除元素使用removeChild()方法即可
parentNode.removeChild(childNode);
6. DOM0 事件和DOM2级在事件监听使用方式上有什么区别？
- dom0级事件
DOM0即直接通过 onclick写在html里面的事件，如:
<input onclick="alert(1)" />
<a href="#" id="hash" onclick="fn();fn1();">// 像这样把onclick写在标签内，都是dom0级事件，
// fn和fn1依次执行;
<button type="button">返回上面进行开通</button>
</a>
----------------------------------------------------------------------------------------
var btn=$('#hash').get(0);
btn.onclick=function(){// 获取元素，绑定onclick事件也是dom0级
alert('111');
};
btn.onclick=function(){
alert('222');// 第二个会覆盖第一个onclick，也会覆盖行内的onclick，只会弹出222
};
- dom2级事件
DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定
$('#hash').click(function(){
alert('jq的dom2级点击第一次')
});
$('#hash').click(function(){
alert('jq的dom2级点击第二次')
});
btn.addEventListener('click',function(){
alert('原生dom2级第一次click')
},false);
btn.addEventListener('click',function(){
alert('原生dom2级第二次click')
},false)
// 以上的绑定都属于dom2级事件绑定，前面两种都是jq的绑定方式，后面都是原生js的绑定方式，
// 不会覆盖，会依次执行jq的绑定方法和原生的绑定方法，这就是与dom0级的区别处
DOM0的事件具有极好的跨浏览器优势, 会以最快的速度绑定, 如果你通过DOM2绑定要等到JS运行, DOM0不用, 因为DOM0是写在元素上面的。
dom0级事件和dom2级事件
DOM0,DOM2,DOM3事件,事件基础知识入门
JavaScript事件-DOM0级事件和DOM2级事件处理
7. attachEvent与addEventListener的区别？
代码
1. 有如下代码，要求当点击每一个元素 li 时控制台展示该元素的文本内容。不考虑兼容
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul>
<script>
//todo ...
</script>
代码
<script>
document.getElementById('ct1').onclick = function(e){
console.log(this.innerText);
}
document.getElementById('ct2').onclick = function(e){
console.log(this.innerText);
}
document.getElementById('ct3').onclick = function(e){
console.log(this.innerText);
}
</script>
2. 补全代码，要求：
1. 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在<li>前端6班</li>后添加用户输入的非空字符串。
2. 当点击每一个元素 li 时控制台展示该元素的文本内容。
<ul class="ct">
<li>这里是</li>
<li>饥人谷</li>
<li>前端6班</li>
</ul><input class="ipt-add-content" placeholder="添加内容"/>
<button id="btn-add-start">开头添加</button>
<button id="btn-add-end">结尾添加</button>
<script>
//todo ...
</script>