JS中常见的DOM操作API--《前端那些事》

2022-05-10 11:23:28

1.Node
Node是一个接口，中文叫节点，很对类型的DOM元素都继承于它，都共同享有相同的基本属性和方法。常见的Node有element、text、attribute、comment、document等（所以要注意节点和元素是有区别的，元素属于节点的一种）
Node有一个属性nodeType标识Node的类型，它是一个整数，其数值分别标识响应的Node类型，
具体如下：
···bash
{

ELEMENT_NODE: 1, // 元素节点
ATTRIBUTE_NODE: 2, // 属性节点
TEXT_NODE: 3, // 文本节点
DATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
ENTITY_NODE: 6,
PROCESSING_INSTRUCTION_NODE: 7,
COMMENT_NODE: 8, // 注释节点
DOCUMENT_NODE: 9, // 文档
DOCUMENT_TYPE_NODE: 10,
DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片
NOTATION_NODE: 12,
DOCUMENT_POSITION_DISCONNECTED: 1,
DOCUMENT_POSITION_PRECEDING: 2,
DOCUMENT_POSITION_FOLLOWING: 4,
DOCUMENT_POSITION_CONTAINS: 8,
DOCUMENT_POSITION_CONTAINED_BY: 16,
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32

}

···
2.NodeList
NodeList对象是一个节点的集合，一般有Node.childNodes、document.getElementsByName和document.querySelectorAll返回的；
不过需要注意的是，Node.childNodes和document.getElementsByName返回的NodeList结果是实时的（此时跟HTMLCollection比较类似），而document.querySelectorAll返回的结果是固定的，这一点比较特殊。
举例如下：

var childNodes = document.body.childNodes;
console.log(childNodes.length); // 如果假设结果是“2”
document.body.appendChild(document.createElement('div'));
console.log(childNodes.length); // 此时的输出是“3”

3.HTMLCollection
HTMLCollection是一个特殊的NodeList，标识包含了若干元素（元素顺序为文档流中的顺序），通用集合，它是实时更新的，当其所包含的元素发生改变时，它会自动更新，另外，它是一个伪数组，如果想像数值一样操作它们需要使用Array.protoType.slice.call(nodeList,2)这样调用

4.节点操作的相关API
4.1 节点查找API
1）根据ID查找元素：document.getElementById(‘id’)

查找方式描述
根据ID查找元素 document.getElementById(‘id’)—如果有多个结果，只返回第一个
根据类名查找 document.getElementByClassName(‘classname’)—返回一个HTMLCollection
根据标签查找元素 document.getElementByTagName----返回一个HTMLColletion
根据元的name属性插查找 document.getElementByName—返回一个NodeList
查找单个Node document.querySelector–返回单个Node，若匹配到多个结果，只返回第一个，IE8+
返回NodeList document.querySelectorAll—返回一个NodeList，IE8+
查找当前页面所有form document. form—返回一个HTMLCollection
4.2 节点创建API
创建元素----父元素.createElement
var elem = document.createElement("div");
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新创建的节点';
document.body.appendChild(elem);

通过createElement创建的元素并不属于document对象，它只是创建出来，并未添加到html文档中，要调用appendChild和insertBefore等方法将其添加到HTML文档中。

创建文本节点------createTextNode

var text = document.createTextNode('我是文本节点')
document.body.appendChild(text)

示例：
假设现有一题目，要求给ul添加1000个li，我们可以使用以下方法
①

要求给ul添加1000个li

这里是立即执行函数
(function () {
  //为了计时方便
  const timeStart = Date.now();
  var ul = document.getElementById('ul');
  var str = ''
  for (let i = 0; i < 1000; i++) {
    str += '<li>第' + (i + 1) + '子节点</li>';
  }
  ul.innerHTML = str;
  console.log('耗时：' + (Date.now() - timeStart) + '毫秒')

})()

②：

(function () {

  //为了计时方便
  const timeStart = Date.now();
  var ul = document.getElementById('ul');
  for (let i = 0; i < 1000; i++) {
    var li = document.createElement('li')
    li.innerHTML = '我是第' + (i + 1) + '个li元素'
    ul.appendChild(li);
  }
  console.log('耗时：' + (Date.now() - timeStart) + '毫秒')

})()

码农公寓

相关文章