DOM操作

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

• Element.innerText属性返回该元素包含的文本代码。该属性可读写，常用来设置某个节点的内容。
  如果将该属性设为空，等于删除所有它包含的所有节点。
• Element.innerHTML属性返回该元素包含的HTML代码。该属性可读写，常用来设置某个节点的内容。
  如果将该属性设为空，等于删除所有它包含的所有节点。

---

elem.children和elem.childNodes的区别？

• Element.children属性返回一个HTMLCollection对象，包括当前元素节点的所有子元素。它是一个类似数组的动态对象（实时反映网页元素的变化）。如果当前元素没有子元素，则返回的对象包含零个成员。
• childNodes属性返回一个NodeList集合，成员包括当前节点的所有子节点。注意，除了HTML元素节点，该属性返回的还包括Text节点和Comment节点。如果当前节点不包括任何子节点，则返回一个空的NodeList集合。由于NodeList对象是一个动态集合，一旦子节点发生变化，立刻会反映在返回结果之中。

---

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

• ** document.getElementsByTagName**方法返回所有指定HTML标签的元素，返回值是一个类似数组的HTMLCollection对象，可以实时反映HTML文档的变化。如果没有任何匹配的元素，就返回一个空集。
• document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例对象），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。
• document.getElementsByName方法用于选择拥有name属性的HTML元素（比如<form>、<radio<img>、<frame>、<embed>和<object>等），返回一个类似数组的的对象（NodeList对象的实例），因为name属性相同的元素可能不止一个。
• getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。

ES5

• document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。
• document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点。

但是，它们不支持CSS伪元素的选择器（比如:first-line和:first-letter）和伪类的选择器（比如:link和:visited），即无法选中伪元素和伪类。
如果querySelectorAll方法的参数是字符串*，则会返回文档中的所有HTML元素节点。另外，querySelectorAll的返回结果不是动态集合，不会实时反映元素节点的变化。
最后，这两个方法除了定义在document对象上，还定义在元素节点上，即在元素节点上也可以调用。

---

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

• **document.createElement **方法用来生成网页元素节点。
• Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。
• Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。
• Element.hasAttribute方法返回一个布尔值，表示当前元素节点是否包含指定属性。
• Element.removeAttribute方法用于从当前元素节点移除属性。

---

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

• Node.appendChild方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。
  Node.appendChild**方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。
• Node.removeChild方法接受一个子节点作为参数，用于从当前节点移除该子节点。它返回被移除的子节点。注意，这个方法是在父节点上调用的，不是在被移除的节点上调用的。
• Node.replaceChild方法用于将一个新的节点，替换当前节点的某一个子节点。它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点。它返回被替换走的那个节点。
• Node.insertBefore方法用于将某个节点插入当前节点的指定位置。它接受两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点，新的节点将插在这个节点的前面。该方法返回被插入的新节点。

---

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

classList属性则返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。该对象的length属性（只读）返回当前元素的class数量。
classList对象有下列方法。

• add()：增加一个class。
• remove()：移除一个class。
• contains()：检查当前元素是否包含某个class。
• toggle()：将某个class移入或移出当前元素。
• item()：返回指定索引位置的class。
• toString()：将class的列表转为字符串。

---

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

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</btn>
</div>
  
<script>
  var liElements = document.querySelectorAll(".mod-tabs>ul>li");
  var btnElements = document.getElementsByClassName('btn');
  console.log(liElements);
  console.log(btnElements);
</script>