DOM操作

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

• innerText 指的是从起始位置到终止位置的内容,但它去除html标签。

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

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

• elem.children 它返回指定元素的子元素集合。但只返回HTML节点，甚至不返回文本节点。

• elem.childNodes 它返回指定元素的子元素集合，包括HTML节点和所有属性，文本。

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

• 查询元素常见方法

• getElementById()——返回匹配指定ID属性的元素节点。
• getElementsByClassName()——返回一个类似数组的对象，包括了所有 class名字符合指定条件的元素。
• getElementsByTagName()——返回所有指定标签的元素。
• getElementsByName()——用于选择拥有name属性的HTML元素，比如form、img、frame等

• ES5元素选择方式

• querySelector()——返回匹配指定的CSS选择器的元素节点(一个)。
• querySelectorAll()——返回匹配指定的CSS选择器的所有节点。

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

创建元素：createElement()
设置元素属性：setAttribute(attributeName,attributeValue)
删除元素属性：removeAttribute(attributeName)

document.createElement('div')
document.getElementsByTagName('h1')[0].setAttribute('class','haha')
document.getElementsByTagName('h1')[0].removeAttribute('class','haha')

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

appendChild() //在元素末尾添加元素
insertBefore() //在某个元素之前插入元素
removeChild()方法可用于删除某元素下的子元素
replaceChild()接受两个参数：要插入的元素和要替换的元素

    var newDiv = document.createElement('div')
    var newText = document.createTextNode('hello')
    newDiv.appendChild(newText)
    document.body.appendChild(newDiv)
    document.body.removeChild(newDiv)
    document.body.insertBefore(newDiv,document.body.firstChild)
    document.body.replaceChild(newText,newDiv)

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

element.classList.add()//添加class
element.classList.item()//返回类名在元素中的索引值
element.classList.remove('')//删除class
element.classList.contains('')// 包含就是true / 没有则返回flase
element.classList.toggle('')// 有则删除返回false，没有则加上返回true

    document.body.classList.add('ct','ct-1','ct-2')
    document.body.classList.item(1)
    document.body.classList.contains('ct-1')
    document.body.classList.toggle('ct-2')
    document.body.classList.remove('ct','ct-1')

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

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">点我</button>
</div>
/*
    document.querySelectorAll('li')
    document.querySelectorAll('.btn')
    document.getElementsByTagName('li')
    document.getElementsByClassName('btn')
*/