回顧——Dom節點型別
阿新 • • 發佈：2021-07-13
DOM 節點
在 HTML DOM 中，所有事物都是節點。DOM 是被視為節點樹的 HTML。
根據 W3C 的 HTML DOM 標準，HTML 文件中的所有內容都是節點：
- 整個文件是一個文件節點
- 每個 HTML 元素是元素節點
- HTML 元素內的文字是文字節點
- 每個 HTML 屬性是屬性節點
- 註釋是註釋節點
節點層次
DOM（Document Object Model——文件物件模型）是用來呈現HTML或XML文件互動的一個API(應用程式程式設計介面)。
dom將任意HTML或XML文件描述成一個由多層節點構成的結構（節點數）。
Node型別(節點型別)
DOM1級定義了一個Node介面。
Node介面由DOM中的所有節點型別實現。
除IE外，所有節點型別繼承了Node節點型別
Node節點型別共有12種，由12個數值常量來表示,如下：
控制檯執行例子：
nodeType、nodeName、nodeValue相關
例子：
<body> 大頭 <!-- 毛毛最帥 --> <h3 id="main"></h3> <a id="aid" href="https://www.baidu.com"></a> <script> //文件節點一步一叩首，今天的自己比昨天好一點就行，明天的自己需追尋var doc = document; console.log('===文件節點',doc.nodeName, doc.nodeType, doc.nodeValue); // DocumentType var docType = document.doctype; console.log('===DocumentType型別',docType.nodeName, docType.nodeType, docType.nodeValue); //元素節點 var div_main = document.getElementById('main') console.log('---元素節點',div_main.nodeName, div_main.nodeType, div_main.nodeValue); // 屬性節點 var a_aid = document.getElementById('aid').getAttributeNode('href') console.log('---屬性節點',a_aid.nodeName, a_aid.nodeType, a_aid.nodeValue); //文字和註釋節點 var span_node = document.querySelector('body').childNodes span_node.forEach(function (item, index) { if(item.nodeType==1){ console.log('===元素節點',item.nodeName, item.nodeType, item.nodeValue); } if(item.nodeType==3){ console.log('===文字節點',item.nodeName, item.nodeType, item.nodeValue); } if(item.nodeType==8){ console.log('===註釋節點',item.nodeName, item.nodeType, item.nodeValue); } if(item.nodeType==9){ console.log('===文件節點',item.nodeName, item.nodeType, item.nodeValue); } }) // DocumentFragment型別 var frag = document.createDocumentFragment(); var p=document.createElement('p'); p.innerHTML="hello world" p.append(frag); console.log('文件片段型別',frag.nodeType,frag.nodeName,frag.nodeValue) </script> </body>