DOM操作

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

a)innerText：获取的是选取节点里的内容，会自动过滤到HTML标签
b)innerHTML：获取的是选取节点里的全部，包括HTML标签

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

elem.children获取的节点都是element元素，而elem.childNodes获取的不仅包含element还有文本、属性、注释等

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

传统方法

document.getElementById() => 获取对应 id 的元素
document.getElementsByTagName() => 获取符合对应标签名的所有元素
document.getElementsByClassName() => 获取类的所有元素
document.getElementsByName() => 获取元素 name 属性为对应值的所有元素

ES5选择方法

document.querySelector() => 返回匹配的第一个
document.querySelectorAll() => 返回匹配的对应的所有元素

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

创建元素
document.createElement() => 创建一个指定 tag 的新元素
设置属性
element.setAttribute() => 设置指定名字属性的值
删除属性
element.removeAttribute() => 删除指定名字属性

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

添加子元素
element.appendChild() => 往对应元素的末尾添加新元素，作为其子元素
parentElement.insertBefore(new, brother) => 在父元素内，往对应元素的前面添加新元素，作为其兄弟元素
删除子元素
parentElement.removeChild(child) => 在父元素内，移除指定子元素

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

方法：
element.classList.add('active')   //新增 class
element.classList.remove('active')  //删除 class
element.classList.toggle('active')   //新增/删除切换
element.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 liArray = document.querySelectorAll('.mod-tabs li')
var btn = documents.querySelector('.mod-tabs .btn')