DOM操作

题目1： dom对象的innerText和innerHTML有什么区别？

<div id="test">
   <span style="color:red">test1</span> test2
</div>

test.innerHTML:

　　从对象的起始位置到终止位置的全部内容,包括Html标签。

　　上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。
test.innerText: 

　　从起始位置到终止位置的内容, 但它去除Html标签 

　　上例中的text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

题目2： elem.children和elem.childNodes的区别？

childNodes 属性，标准的，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本。
children 属性，非标准的，它返回指定元素的子元素集合。

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

1. getElementById() 通过id查询元素
2. getElementsByClassName() 通过类名查询元素
3. getElementsByTagName() 通过标签名查询元素
4. getElementsByName() 通过name属性查询元素
5. ES5的方法：querySelector()/querySelectorAll() 通过类似css选择器的写法查询元素

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

1. 创建元素：createElement()
2. 设置属性：setAttribute('属性名',内容 )
3. 删除属性：removeAttribute()

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

添加子元素：
appendChild() 在元素末尾添加元素
insertBefore() 在某个元素之前插入元素
删除子元素：

使用 removeChild() 方法：parentNode.removeChild(childNode);

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

* add(class1, class2, ...) //在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
* contains(class) //返回布尔值，判断指定的类名是否存在。
//true - 元素包已经包含了该类名
//false - 元素中不存在该类名
* item(index) //返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
* remove(class1, class2, ...)  //移除元素中一个或多个类名。**注意**： 移除不存在的类名，不会报错。
* toggle(class, true|false)  //在元素中切换类名。
/*第一个参数为要在元素中移除的类名，并返回 false。 
如果该类名不存在则会在元素中添加类名，并返回 true。 
第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：
移除一个 class: element.classList.toggle("classToRemove", false); 
添加一个 class: element.classList.toggle("classToAdd", true);
*/

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

//选中所有的li元素
document.getElementsByTagName('li')或document.querySelectorAll('li')
//选中btn元素
document.getElementsByClassName('btn')或document.querySelector('.btn')

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