进阶8

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

• innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。
• innerText 指的是从起始位置到终止位置的内容,但它去除Html标签。

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

• children 属性，非标准的，它返回指定元素的子元素集合。经测试，它只返回html节点，甚至不返回文本节点。且在所有浏览器下表现惊人的一致。和childNodes 一样，在firefox下不支持()取集合元素。因此如果想获取指定元素的第一个html节点，可以使用children[0]来替代上面的getFirst函数。需注意children在IE中包含注释节点。
• childNodes 属性，标准的，它返回指定元素的子元素集合，包括html节点，所有属性，文本。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点。

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

• getElementById()

• getElementsByClassName()

• getElementsByTagName()

• getElementsByName()

• querySelector()

• querySelectorAll()

• ES5选择元素的方法是querySelector()和querySelectorAll()

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

var node = document.createElement('img');
node.setAttribute('src', 'http://ssss');
node.removeAttribute('src');

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

添加子元素

• appendChild()
• insertBefore()
• replaceChild()
  删除子元素
• removeChild()

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

var nodeBox = document.querySelector('.box')
console.log( nodeBox.classList )
nodeBox.classList.add('active')   //新增 class
nodeBox.classList.remove('active')  //删除 class
nodeBox.classList.toggle('active')   //新增/删除切换
node.classList.contains('active')   // 判断是否拥有 class

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

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

var nodes = document.querySelectorAll('.mod-tabs li');
var node = document.querySelector('.btn');