DOM操作

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

innerText：返回元素包含的文本内容，是可以修改的；多层次会从外到内拼接文本内容。
innerHtml：返回的是元素的DOM结构，在写入的时候会自动构建DOM;

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

elem.children:子元素列表(HTMLCollection);
elem.childNodes:子元素列表（NodeList）;
两者主要有两点不同：
1 包含节点的类型；
(1)NodeList 是一个节点的集合，既可以包含元素也可以包含其他元素和其他节点（文本节点，注释节点）；
(2)HTMLCollection是元素集合，只有Element；Element继承自Node，是Node的一种。在HTML中，它一般是HTML元素，例如p标签
2 使用方法
相同点：
(1) 他们都有length属性；
(2) 都有元素的getter，叫做item,可以传入索引值取得元素；
(3) 都是类数组；
不同点：
HTMLCollection还有一个nameItem()方法，可以返回集合中name属性和id属性值的元素（部分浏览器也支持NodeList的nameItem()方法），HTMLCollection的item()方法通过属性获取元素可以支持id和name获得元素，而NodeList对象只支持id。

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

getElementById()，getElementsByClassName()，getElementsByTagName()，getElementsByName()；
ES5元素选择方法：
querySelector()：返回匹配指定CSS选择器的元素节点，如果多个匹配只返回第一个。//PS无法选中CSS伪元素。
querySelectorAll()：返回匹配指定CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象是静态对象。

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

创建：
document.createElement() 创建html元素节点；
document.createTextNode() 创建文本节点；
document,createDocumentFragment() 创建一个DocumentFragment对象。
设置属性：
getAttribute()获取元素的attribute的值；
createAttribute()方法生成一个新的属性对象节点，并返回它。参数是name，是属性的名称。
setAttribute()方法用于设置元素的属性

var node =document.getElementById('div1');
node.setAttribute('my_attrib','newVal')

删除属性：
removeAttribute()用于删除元素属性。

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

添加子元素：appendChild()在元素的末尾添加新元素；insertBefore在某个元素之前添加新元素。
删除子元素：removeChild() //parentNode.removeChild(childNode);

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

element.classList有如下几个方法：
add(class1,class2)增加一个或多个类名；
contains(class)返回布尔值，是否包含某个类名；
item(index)返回类名在元素中的索引值；
remove(class1, class2, ...)移除一个或多个类名；
toggle(class)为要移除/添加的类名，如果没有则添加，如果有删除；

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

   

       
list1
       
list2
       
list3
   
   点我