JS（六）DOM操作

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

innerText返回元素内的的文本内容，innerHTML返回元素内的HTML结构（不包括元素本身）。

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

elem.childNodes返回所有的子节点，包括HTML元素，属性，文本。childNodes只返回HTML元素节点。

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

常见方法有getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()分别通过ID、类名、标签名、name属性名来查询元素。
ES5的元素选择方法是querySelector()和querySelectorAll()，通过css选择器查询元素。

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

• 创建元素：document.createElement()
• 设置元素属性： document.setAttribute()
• 删除属性：document.removeAttribute()

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

• 添加子元素：appendChild()/insertBefore()
• 删除元素下的子元素：removeChild()

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

• 有以下方法：

add(class1, class2, ...) 在元素中添加一个或多个类名
contains(class) 返回布尔值，判断指定的类名是否存在
item(index) 返回类名在元素中的索引值,索引值从 0 开始
remove(class1, class2, ...) 移除元素中一个或多个类名
toggle(class, true|false) 在元素中切换类名

• 添加class ： add(class1, class2, ...)
• 删除class：remove(class1, class2, ...)

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

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</button>
</div>
var lis = document.getElementsByTagName('li');
var btn = document.getElementsByClassName('btn')[0];
console.log(lis);
console.log(btn);