DOM 操作

题目一、dom 对象的 innerText 和 innerHTML 有什么区别？

• innerText 获取 DOM 对象下的文本节点内容
• innerHTML 获取 DOM 对象下的所有节点

题目二、 elem.children和elem.childNodes的区别？

DOM 对象有多种类型，如下

节点类型	NodeType
元素 element	1
属性 attr	2
文本 text	3
注释 comments	8
文档 document	9

如果用elem.children来获取节点的话，那么返回的都是element元素，而用elem.childNodes来获取节点的话，返回的是所有类型的节点。

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

传统的常用元素获取方法：

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

ES5 的元素选择方法：

• document.querySelector() => 以 CSS 选择器的方法返回匹配的对应元素,返回匹配的第一个
• document.querySelectorAll() => 以 CSS 选择器的方法返回匹配的对应的所有元素

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

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

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

添加元素

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

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

• add() => 添加一个指定的新 class
• item() => 获取指定索引的 class
• remove() => 移除指定的一个或者多个 class
• contains() => 判断 element 是否有指定的 class

题目七、 如何选中如下代码所有的 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')