DOM操作

一、 dom对象的innerText和innerHTML有什么区别？
innerText返回的是元素包含的文本内容，忽略所有的标签，在多层次时会按照元素由潜到深的顺序拼接内容，用于返回纯文本形式的内容。
innerHTML返回的元素包含标签,且不包含元素本身

Paste_Image.png

二、 elem.children和elem.childNodes的区别？
elem.chidren是只读的类数组对象（NodeList对象），它是该节点的子节点的实时表示。children只包含Element元素，并非标准属性。elem.children表示的是elem所有元素，忽略空格等文本节点，只显示元素。
elem.childNodes也是一个NodeList对象。elem.childNodes表示的是elem所有元素，包括空格等文本节点，显示真正意义上的所有元素。

Paste_Image.png

三、查询元素有几种常见的方法？ES5的元素选择方法是什么?
1、查询元素的常见方法有;
通过id属性查找元素,document.getElementById('btn')
通过class属性查找元素，document.getElementsByClassName('btn-1')
通过名字name属性查找元素，document.getElementsByName('abc')
通过标签TagName 属性查找元素，document.getElementsByTagName('h1')
2/ES5的元素选择方法是;
document.querySelector('#btn')
document.querySelectorAll('#btn')

Paste_Image.png

四、如何创建一个元素？如何给元素设置属性？如何删除属性
createElement()//创建元素,在内存中的DOM，并未在页面上
setAttribute()//如果属性未存在，为添加属性，如果属性已存在，为修改属性
removeAttribute()//删除属性

Paste_Image.png

五、如何给页面元素添加子元素？如何删除页面元素下的子元素?
appendChild()再元素末尾添加元素
removeChild()删除元素
insertBefore()在某个元素之前插入元素
repalceChlid()接受两个参数，要插入的参数和要替换的参数

Paste_Image.png

六、 element.classList有哪些方法？如何判断一个元素的 class 列表中是包含某个 class？如何添加一个class？如何删除一个class?
element.classList方法：
添加指定类型的值（如已存在将被忽略）：add
删除指定类型的值：remove
确实一个元素的class列表是否包含某个class:contains

clssList.png Paste_Image.png

按集合中的索引返回类值：item
当只有第一个参数时，当class值存在时，删除class值返回false,当class不存在时，添加该参数作为class值，并返回true；当第二个参数存在时，当第二个参数的结果为true时，添加class值,当计算结果为false时，删除第一参数对应的class :toggle

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

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

Paste_Image.png