进阶8 DOM操作

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

• innerText 属性可以过滤掉标签，直接获取文本元素，在多层次的时候会按照元素由浅到深的顺序拼接其内容。
• innerHTML 属性和 innerText 类似，但是不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM。

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

• elem.children : 返回指定元素的子元素节点集合，只返回HTML节点，甚至不返回文本节点。
• elem.childNodes : 返回指定元素的所有子节点集合，包括 元素节点，属性节点，文本节点，注释节点等。
  参考博客: JavaScript中Element与Node的区别，children与childNodes的区别

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

常见的有：

• getElementById() 返回匹配指定ID属性的元素节点
  -getElementsByClassName() 返回class名字符合指定条件的元素
  -getElementsByTageName() 返回所有指定标签的元素
  ( excluding the element itself 搜索范围不包括本身)
  -getElementsByName() 返回所有拥有name属性的HTML元素，比如form、img、frame、embed和object

ES5的元素选择方法有：

• querySelector() 返回匹配指定的CSS选择器的元素节点，需要注意两点：
  • 如果有多个节点满足匹配条件，则返回第一个匹配的节点
  • querySelector方法无法选中CSS伪元素
• querySelectorAll() 返回匹配指定的CSS选择器的所有节点

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

如何创建元素

• createElement() 用来生成HTML元素节点，参数为元素的标签名。
• createTextNode() 用来生成文本节点，参数为所要生成的文本节点的内容。
• createDocumentFragment() 生成一个DocumentFragment对象，其存在于内存的DOM片段，但是不属于当前文档，常常用来生成较复杂的DOM结构，然后插入当前文档。

如何给元素设置属性

有两种方法:

• 一种是使用 creatAttribute() 方法生成一个新的属性对象，然后赋值，然后设置给相应的节点。

var node = document.getElementById("div1");
var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);

• 直接使用 setAttribute()方法 ，传入两个参数，第一个是属性名，第二个是属性值，推荐这种方法

var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");

如何删除属性

使用removeAttribute()， 用于删除元素属性。

node.removeAttribute('id');

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

如何给页面元素添加子元素

• appendChild() 在元素末尾添加元素，如下所示：给 ct 下面添加子元素 img

  var ct = document.querySelector('#ct')
  var node = document.createElement('img')
  ct.appendChild(node)

• insertBefore() 在某个元素之前插入元素，如下所示：在ct内的最后一个子元素之前插入img子元素

  var ct = document.querySelector('#ct')
  var node = document.createElement('img')
  ct.insertBefore(node, ct.lastChild)

如何删除页面元素下的子元素

removeChild() 方法可从子节点列表中删除某个节点。
如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。
如下所示：删除 ct 下的 div 子元素节点，注意这里只能删除单个节点，是 node，不是 nodes。

  var ct = document.querySelector('#ct')
  var node = document.querySelector('#ct div')
  ct.removeChild(node)

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

参数为class类名字符串

• element.classList.add() //新增 class，如果已经存在，则忽略, 可添加多个类 add('class1', 'class2')
• element.classList.remove() //删除 class，可删除多个类 remove('class1', 'class2')
• element.classList.toggle()
  新增/删除切换，只有一个参数时，类存在，则删除它并返回false，如果不存在，则添加它并返回true。当存在第二个参数时：如果第二个参数的计算结果为true，则添加指定的类值，如果计算结果为false，则删除它。
• element.classList.contains() // 判断是否拥有某个 class，返回布尔值

element.classList.item ( Number ) 参数为索引值
按集合中的索引返回类值。

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

   

       
list1
       
list2
       
list3
   
   点我



  var li = document.querySelectorAll('.mod-tabs ul li')
  // document.getElementsByTagName('li')
  var btn = document.querySelector('.btn')
  // document.getElementsByClassName('btn')[0]