DOM操作

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

• innerText 是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容。设置innerText 属性时，给定的值都会被视为文本内容，即使其中包含 HTML 标签
• innerHTML 返回元素的 HTML 结构，在写入时会自动构建 DOM

---

elem.children和elem.childNodes的区别？

• children 为只读属性，返回一个节点的子元素（元素子节点），是一个动态更新的 HTMLCollection
• childNodes 返回包含指定节点的子节点的集合，包括文本子节点，该集合为即时更新的集合（live collection）

---

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

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
document.getElementsByName()
// 以下为 ES5 新增的方法
document.querySelector() // => 只能获取第一个
document.querySelectorAll()

---

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

// 创建元素
var script = document.createElement('script')
// 设置属性
script.setAttribute('src', 'xxx')
// 删除属性
script.removeAttribute('src')

---

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

// 如上，虽然创建了新的 script 元素，却没有添加到文档中
var body = document.getElementsByTagName('body')[0]
body.appendChild(script)
// 删除子元素
body.removeChild(script)

---

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

element.classList.add() // 新增 class
element.classList.remove() // 删除 class
element.classList.toggle() // 新增/删除切换
element.classList.contains() // 判断是否拥有 class，返回值为boolean

---

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

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

// 选取 li 元素
// 1
var li_1 = document.getElementsByTagName('li')
// 2
var li_2 = document.getElementsByTagName('ul').childNodes
// 3
var li_3 = document.querySelectorAll('li')
// 选中 btn 元素
// 1
var btn_1 = document.getElementsByClassName('btn')[0]
// 2
var btn_2 = document.getElementsByTagName('button')
// 3
var btn_3 = document.querySelector('.btn')
// 4
var btn_4 = document.querySelector('button')