再談BOM和DOM(2):DOM節點層次/屬性/選擇器/節點關係/操作詳解
DOM模型將整個文件（XML文件和HTML文件）看成一個樹形結構，並用document物件表示該文件。
根據W3C DOM規範，DOM是HTML與XML的應用程式設計介面（API），DOM將整個頁面對映為一個由層次節點組成的檔案。有1級、2級、3級共3個級別。
DOM規定文件中的每個成分都是一個節點（Node）,可以說HTML文件是由節點構成的集合，常見DOM節點有：
-
文件節點（Document）：代表整個文件
-
元素節點（Element）：文件中的一個標記
-
文字節點（Text）：標記中的文字
-
屬性節點（Attr）：代表一個屬性，元素才有屬性
DOM節點型別
NodeType屬性來表明節點型別，下面列舉12中節點型別
| 節點型別 | 描述 | |
| 1 | Element | 代表元素 |
| 2 | Attr | 代表屬性 |
| 3 | Text | 代表元素或屬性中的文字內容。 |
| 4 | CDATASection | 代表文件中的 CDATA 部分（不會由解析器解析的文字）。 |
| 5 | EntityReference | 代表實體引用。 |
| 6 | Entity | 代表實體。 |
| 7 | ProcessingInstruction | 代表處理指令。 |
| 8 | Comment | 代表註釋。 |
| 9 | Document | 代表整個文件（DOM 樹的根節點）。 |
| 10 | DocumentType | 向為文件定義的實體提供介面 |
| 11 | DocumentFragment | 代表輕量級的 Document 物件，能夠容納文件的某個部分 |
| 12 | Notation | 代表 DTD 中宣告的符號。 |
DOM節點關係
| nodeType | 返回節點型別的數字值（1~12） |
| nodeName | 元素節點:標籤名稱(大寫)、屬性節點:屬性名稱、文字節點:#text、文件節點:#document |
| nodeValue |
文字節點:包含文字、屬性節點:包含屬性、元素節點和文件節點:null |
| hasChildNodes | 包含一個或多個節點時返回true |
| contains | 如果是後代節點返回true |
| isEqualNode | 兩個節點引用的是同一個物件:傳入節點與引用節點的引用為同一個物件返回true |
| isSameNode | 指的是兩個節點是否是同一型別，具有相等attributes/childNodes等 |
| compareDocumentPostion | 確定節點之間的各種關係 |
| parentNode | 父節點 |
| parentElement | 父節點標籤元素 |
| childNodes | 所有子節點 |
| children | 第一層子節點 |
| firstChild | 第一個子節點，Node 物件形式 |
| firstElementChild | 第一個子標籤元素 |
| lastChild | 最後一個子節點 |
| lastElementChild | 最後一個子標籤元素 |
| previousSibling | 上一個兄弟節點 |
| previousElementSibling | 上一個兄弟標籤元素 |
| nextSibling | 下一個兄弟節點 |
| nextElementSibling | 下一個兄弟標籤元素 |
| childElementCount | 第一層子元素的個數(不包括文字節點和註釋) |
| ownerDocument | 指向整個文件的文件節點 |
節點與元素的區別
element是包含在node裡的，它的nodeType是1
parentElement匹配的是parent為element的情況，而parentNode匹配的則是parent為node的情況。
當父節點的nodeType不是1，即不是element節點的話，它的parentElement就會是null
Document文件物件元素查詢
BOM核心為window，DOM核心為document(文件物件)
獲取Element物件
|
getElementById() |
一個引數:元素標籤的ID |
| getElementsByTagName() | 一個引數:元素標籤名 |
| getElementsByName() | 一個引數:name屬性名 |
| getElementsByClassName() | 一個引數:包含一個或多個類名的字串 |
| querySelector() | 接收CSS選擇符，返回匹配到的第一個元素，沒有則null |
| querySelectorAll() | 接收CSS選擇符，返回一個數組，沒有則返回[] |
元素物件ELEMENT操作
所有DOM物件都可以被認為是一個節點,除了CURD DOM樹(appendChild/removeChild/replaceChild)外，還有其他操作
| nodeName | 訪問元素的標籤名 |
| tagName | 訪問元素的標籤名 |
| createElement() | 建立節點 |
| appendChild() | 末尾新增節點，並返回新增節點 |
| insertBefore() | 參照節點之前插入節點，兩個引數：要插入的節點和參照節點 |
| insertAfter() | 參照節點之後插入節點，兩個引數：要插入的節點和參照節點 |
| replaceChild() | 替換節點，兩個引數：要插入的節點和要替換的節點(被移除) |
| removeChild() | 移除節點 |
| cloneNode() | 克隆，一個布林值引數，true為深拷貝，false為淺拷貝 |
| importNode() | 從文件中複製一個節點，兩個引數：要複製的節點和布林值(是否複製子節點) |
| insertAdjacentHTML() |
插入文字，兩個引數：插入的位置和要插入文字
|
節點屬性attributes
|
attributes |
獲取所有標籤屬性 |
| getAttribute() | 獲取指定標籤屬性 |
| setAttribute() | 設定指定標籤屬 |
| removeAttribute() | 移除指定標籤屬 |
| createAttribute | 建立屬性 |
參考文章：
ECMAScript、BOM、DOM（核心、瀏覽器物件模型與文件物件模型）https://www.cnblogs.com/best/p/8028168.html
JavaScript學習總結（三）BOM和DOM詳解https://segmentfault.com/a/1190000000654274
Javascript操作BOM和DOM詳解（1）https://blog.csdn.net/openbox2008/article/details/85260063
JavaWeb學習總結：JavaScript（BOM和DOM） https://blog.csdn.net/weixin_42384085/article/details/99807198
HTML DOM Event 物件https://www.w3school.com.cn/jsref/dom_obj_event.asp
XML DOM - Element 物件https://www.w3school.com.cn/xmldom/dom_element.asp
JAVAScript中DOM與BOM的差異分析 https://www.cnblogs.com/fjner/p/5892325.html
轉載本站文章《再談BOM和DOM(2):DOM節點層次/屬性/選擇器/節點關係/操作詳解》,
請註明出處：https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8347.html