DOM操作

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

• innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容。
• innerHTMLinnerHTML属性作用和innerText类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM。

---

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

• elem.children只返回HTML元素节点。
• elem.childNodes返回所有的子节点，包括HTML元素，属性，文本。

---

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

常见方法：getElementById查询指定ID属性的元素节点；getElementsByClassName查询一个包括了所有class名字符合指定条件的元素（类数组对象）；getElementsByTagName查询所有指定标签的元素；
getElementsByName查询拥有name属性的HTML元素。
ES5的元素选择方法：querySelector()返回匹配指定的CSS选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null;
querySelectorAll()返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。

---

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

createElement()创建元素，

var newDiv = documment.createElement("div");

setAttribute()设置元素属性，

var newDiv = documment.createElement("div");
newDiv.setAttribute("my_attrib", "newVal");

removeAttribute()删除元素属性，

var newDiv = document.createElement("div");
newDiv.setAttribute("id", "newVal");
newDiv.removeAttribute("id");

---

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

appendChild()在元素末尾添加元素；
insertBefore()在某个元素前插入元素；
removeChild()删除子元素。

---

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

element.classList有add，remove，toggle，contains等方法。用contains判断是否拥有class，用add添加一个class，用remove删除一个class。

---

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

document.getElementsByTagName("li");
document.querySelectorAll("li"); //选中所有的li元素。
document.getElementsByClassName("btn");
document.querySelector(".btn"); //选中btn元素。