DOM操作

题目1： dom对象的innerText和innerHTML有什么区别？
innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。
同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。其实，innerHTML 是W3C 组织规定的属性；而innerText 属性是IE浏览器自己的属性，不过后来的浏览器部分实现这个属性罢了。

题目2： elem.children和elem.childNodes的区别？
childNodes:标准的，返回指定元素的子元素集合，包括HTML属性，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

children:非标准的，它返回指定元素的子元素集合。经测试，它只返回HTML节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在Firefox下不支持()取集合元素。因此如果想获取指定元素的第一个HTML节点，可以使用children[0]来替代上面的 getFirst函数。需注意children在IE中包含注释节点。

题目3：查询元素有几种常见的方法？ES5的元素选择方法是什么?

1.getElementById() 返回id对应的元素节点
2.getElementsByClassName() 返回相同class 元素节点的类数组对象
3.getElemetsByTagName() 返回相同标签 元素节点的类数组对象
3.querySelector() 返回回匹配指定的CSS选择器的元素节点
4.querySelectorAll() 返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象

题目4：如何创建一个元素？如何给元素设置属性？如何删除属性

createElement()方法用来生成HTML元素节点
createTextNode()方法用来生成文本节点
.id .className .style 来赋值
setAttribute("属性","赋值") 来设置属性

题目5：如何给页面元素添加子元素？如何删除页面元素下的子元素?

页面元素添加元素
appendChild()
在元素末尾添加元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.appendChild(newContent);

insertBefore()

在某个元素之前插入元素

var newDiv = document.createElement("div");
var newContent = document.createTextNode("Hello");
newDiv.insertBefore(newContent, newDiv.firstChild);

replaceChild()
replaceChild()接受两个参数：要插入的元素和要替换的元素

newDiv.replaceChild(newElement, oldElement);

删除元素

删除元素使用removeChild()方法即可

parentNode.removeChild(childNode);

题目6： element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?

element.classList.item()//index 可以返回class里面包含的class
element.classList.remove('')//删除
element.classList.contains('')// 包含就是true / 没有则返回flase
element.classList.toggle('')// 有则删除返回false，没有则加上返回true

题目7： 如何选中如下代码所有的li元素？ 如何选中btn元素？

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</button>
</div>

选中li所有元素
var mod = document.querySelector('.mod-tabs ul');
var modc = mod.children;
选中btn元素
var btn = document.querySelector('.mod-tabs>.btn');