JS中常见的DOM操作API

几种对象

1.Node

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

{
    
    
    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) + '毫秒')

    })()

4.3 节点修改API

节点修改API都具有下面几个特点：
1.不管是心新增还是替换节点，如果其原本就在页面上，那么原来位置的节点将被移除；
2.修改之后的节点本身绑定的事件不会消失

• appendChild----增加节点
  语法：parent.addChild(child)
  说明：它会将child追加到parent的子节点的最后面。另外，如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到新的位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，且其事件会保留。

• insertBefore–插入节点
  说明：将某个节点插入到另外一个节点的前面
  语法：parentNode.insertBefore(newNode,refNode)
  示例如下：

<div id="parent">
    我是父节点
    <div id="child">
        我是旧的子节点
    </div>
</div>
<input type="button" id="insertNode" value="插入节点" />
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("insertNode").addEventListener('click', function()
{
    
    
    var newNode = document.createElement("div");
    newNode.textContent = "我是新节点";
    parent.insertBefore(newNode, child);
}, false);
</script>

• removeChild—删除节点
  说明：用于删除指定子节点并饭hi子节点
  语法：var deleteChild=parent.removeChile(node)
  deleteChild指向被删除的节点，它仍然存在于内存中，可以对其进行下一步操作。另外，如果被删除的节点不是其子节点，则会报错
  一般删除节点都是这样删除的，示例如下：

function removeNode(node)
{
    
    
    if(!node) return;
    if(node.parentNode) node.parentNode.removeChild(node);
}

• replaceChild–替换节点
  说明：replaceChild用于将一个节点替换另一个节点
  语法：parent.replaceChild(newChild,oldChild)

4.4 元素属性型API

• setAttribute----给元素设置属性

element.setAttribute(name,value);

其中，name为属性名，value为属性值

• getAttribute
  getAttribute返回指定的属性名相应的特性值，如果不存在，则返回null
  var value=element.getAttribute(“id”);

4.5 样式相关的API

• 直接修改元素的样式

elem.style.color="red";
elem.style.setProperty('font-size','16px');
elem.style.removeProperty('color');

• 动态添加样式规则

var style=document.createElement('style')
style.innerHTML='body{color:red} #box{background:red}';
document.head.addChild(style);

参考文章：
https://blog.csdn.net/hj7jay/article/details/53389522