Dom操作

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

• innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容

• innerHTML属性返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容。在写入的时候也会自动构建DOM。

  
  
  

  test

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

• children：子元素列表(HTMLCollection)为元素节点集合
• childNodes：子元素列表(NodeList) 为子节点集合

---

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

• getElementById()、getElementsByClassName()、getElementsByTagName()、getElementsByName()
• ES5方法：
  1.querySelector()返回匹配指定的CSS选择器的元素节点
  2.querySelectorAll()返回匹配指定的CSS选择器的所有节点

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

• 先查询要创建元素的父元素，var father = document.querySelector('xx')
• 创建元素，var children = document.createElement('img')
• 设置元素的属性，children.setAttribute('src','xxxxx')
• 增加到父元素下，father.appendChild(children)
• 删除属性，children.removeAtribute('src')
  
  

  test

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

• 添加子元素
  查询子元素的父元素，然后创建子元素。使用appendChild()添加

father.appendChild(children)

• 删除子元素

parentNode.removeChild(childNode)

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

add()添加class
remove()去除class
contains()判断是否有此class
toggle()切换class
item ()按集合中的索引返回类值。

判断是否包含：father.classList.contains('children')
添加：father.classList.add('children')
删除：father.classList.remove('children')

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

   

       
list1
       
list2
       
list3
   
   点我

选中所有的li：document.querySelectorAll('li')
选中btn：document.querySelector('.btn')或document.querySelector('button')