dom对象操作知识点

1： dom对象的innerText和innerHTML的区别

innerText只获取该元素内的文本，innerHTML获取该元素内的全部内容，包括HTML标签和文本。

2： elem.children与elem.childNodes的区别

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

3：查询元素常见的方法

常见方法：
1.getElementById() ：可返回对拥有指定 ID 的第一个对象的引用。
2.getElementsByName() :返回带有指定名称的对象集合。
3.getElementsByTagName() : 返回带有指定标签名的对象集合。
4.getElementByClassName() : 返回带有指定类名的对象的集合。
ES5的元素选择方法：querySelector()方法，参数形式与CSS选择器相同，可获取第一个符合条件的元素，
querySelectorAll()方法可获取符合条件的全部元素。

4：创建元素，添加、删除属性：

• 创建元素：createElement()用来生成HTML元素节点，参数即为需要创建的标签名。
• 设置属性：setAttribute()用于设置元素属性，参数为属性名和属性值。
• 删除属性：removeAttribute()用于删除元素属性，参数为要删除的属性名。

5：添加与删除子元素

appendChild()方法可以在元素末尾添加元素；删除元素使用removeChild()方法。

6： element.classList

element.classList的方法有：add(class1, class2, ...)、contains(class)、item(index)、remove(class1, class2, ...)、toggle(class, true|false)。
判断classlist是否包含某个class：contains(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>
<script>
    document.getElementsByTagName('li')    //选中所有li元素
    document.getElementsByClassName('btn')    //选中btn元素
</script>