DOM操作

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

• innerText是获取DOM对象下的文本节点内容
• innerHTML是获取DOM对象下的所有节点
  例子：
  http://js.jirengu.com/kuragopuke/15/edit

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

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

ES5 的元素选择方法：

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

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

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

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

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

添加元素

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

删除元素

• parentElement.removeChild(child) => 在父元素内，移除指定子元素

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

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

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