进阶8

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

• innerText：返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容
• innerHTML：属性设置或返回元素的html结构

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

• elem.children:只输出普通的DOM元素；
• elem.childNode: 会输出所有的子元素，包括文本节点、文字；
  大多数情况下我们应该使用element.children；

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

• getElementById()：返回匹配指定ID属性的元素节点。
• getElementsByClassName()：返回一个类似数组的对象（HTMLCollection类型的对象），包括了所有class名字符合指定条件的元素（搜索范围包括本身），元素的变化实时反映在返回结果中。
• getElementsByTagName()：返回所有指定标签的元素（搜索范围包括本身）
• getElementsByName()：返回一个NodeList格式的对象，不会实时反映元素的变化。

ES5的元素选择方法：

• querySelector()方法返回匹配指定的CSS选择器的元素节点
• querySelectorAll()方法返回匹配指定的CSS选择器的所有节点

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

• 通过createElement()方法用来生成HTML元素节点
  然后createElement()创建一个元素；
• setAttribute()方法用于设置元素属性
• removeAttribute()用于删除元素属性

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

• appendchild() 方法给元素添加子元素，添加到元素末尾。
• removechild() 方法删除元素的子元素

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

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 liList = document.querySelectorAll('.mod-tabs>li');
var btn = document.querySelector('.btn');

//兼容IE7，8
var liList = document.getElementByTagName('li');
var btn = document.getElementByClassName('btn')[0]