js基础之节点

js基础之节点

一、node节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点。元素是节点的别称，节点包含元素，当然节点还有好多细化的种类。根节点：root >>>> HTML没有父节点 。

以下表格中，带*获取的节点都包含空白文本节点。

属性	描述
*childNodes	获取当前元素的所有子节点
*previousSibling	获取当前节点的前一个同级节点
*nextSibling	获取当前节点的后一个同级节点
*firstChild	获取当前元素节点的第一个子节点
*lastChild	获取当前元素节点的最后一个子节点
firstElementChild	获取当前元素节点的第一个元素子节点
lastElementChild	获取当前元素节点的最后一个元素子节点
ownerDocument	获取该节点的文档根节点，相当与 document
parentNode	获取当前节点的父元素

<ul>
    rgdtfre
    <li class="li" id="li" data-index="1"><a>dgrsdc</a></li>
    <li>dgrsdc</li>
</ul>

var ul = document.querySelector("ul")
console.log(ul.childNodes)
console.log(ul.firstChild)
console.log(ul.lastChild)
console.log(ul.firstElementChild)
console.log(ul.lastElementChild)
console.log(ul.lastElementChild.previousSibling)
console.log(ul.lastElementChild.previousElementSibling)

打印结果：

二、节点操作

属性	描述
nodeType	节点种类，返回值是数字
nodeValue	获取（文字）节点的文本内容
nodeName	返回node节点名称（#text，注释， 标签…）
attributes	获取所有，该节点的属性信息, 一般只用作获取，设置使用setAttribute()

<ul>
    rgdtfre
    <li class="li" id="li" data-index="1"><a>dgrsdc</a></li>
    <li>dgrsdc</li>
</ul>

var ul = document.querySelector("ul")
console.log(ul.childNodes) // 所有li的数组 [text, li#li.li, text, li, text]
console.log(ul.childNodes[1].nodeValue) // null 元素节点NodeValue属性值为空
console.log(ul.childNodes[0].nodeValue) // rgdtfre
console.log(ul.childNodes[1].innerHTML) // <a>dgrsdc</a>
console.log(ul.childNodes[1].innerText) // dgrsdc
ul.childNodes[1].innerText = "<a>123</a>"
console.log(ul.childNodes[1].outerHTML)  // <li class="li" id="li" data-index="1">&lt;a&gt;123&lt;/a&gt;</li>
console.log(ul.childNodes[1].attributes) // 返回当前元素的有所属性
console.log(ul.childNodes[1].attributes[0])  // class="li"
console.log(ul.childNodes[1].attributes["id"]) // id="li"

三、常见的节点类型

nodeType值	含义
1	元素（DIV、BODY、LI、SPAN… ）
2	属性代表属性节点 （class，src，href）
3	文本节点（text节点）
8	代表注释节点
9	代表document节点

四、文档碎片

创建好文档碎片，在要插入的节点附加在上面，最后一次性添加到document中，可以更好的提高性能。

var ul = document.querySelector("ul")
var cache = document.createDocumentFragment()
for (var i = 0; i < 20; i++) {
    var li = document.createElement("li")
    li.className = "box"
    li.innerHTML = i
    cache.appendChild(li)
}
ul.appendChild(cache)