JavaScript入門系列目錄

01、DOM(document)

DOM（Document Object Model）檔案物件模型，將檔案document解析為一個由節點和物件（包含屬性和方法的物件）組成的邏輯樹，每個節點都是一個物件，document 物件就是整個DOM樹的根節點。DOM提供的API方法用來管理這棵樹，用JavaScript 等指令碼語言操作檔案結構、樣式和內容。

1.1、DOM結構-節點/元素

DOM樹是由很多節點構成，分為下面幾種型別，注意節點是包含文字、註釋的。

節點型別	描述	範例
`document`檔案節點	`document`檔案本身，DOM的入口（根）	document
`element`元素節點	所有HTML元素`Element` /ˈelɪmənt/ i	html、body、a、p
`attribute`屬性節點	元素的屬性	id、name、href、class
文位元組點	元素內的文字形成文位元組點	文字字元、換行、空格
註釋節點	註釋	`<!--註釋-->`

一顆完整的DOM樹，除了顯而易見的元素，還有註釋、換行符構成的文字類節點。

<!DOCTYPE HTML>
<html>
    <body>
        The truth about elk.
        <ol>
            <li>An elk is a smart</li>
            <!-- comment -->
            <li>...and cunning animal!</li>
        </ol>
    </body>
</html>

當前選擇元素$0：在瀏覽器控制檯中，$0標識當前選中的元素。$0.style.background='red';

節點和元素在DOM樹上的不同檢視（導航方式）如下圖，現代JS中主要使用元素導航屬性。

✅節點-導航屬性	描述	✅元素-導航屬性	描述
`parentNode`	父節點	`parentElement`	父元素，一般和`parentNode一樣`，只有document.documentElement不同
`firstChild`	第一個子節點	`firstElementChild`	第一個子元素
`lastChild`	最後一個子節點	`lastElementChild`	最後一個子元素
`childNodes`	子節點集合	`children`	子元素集合
`nextSibling`	下一個兄弟節點	`nextElementSibling`	下一個兄弟元素（ Sibling/ˈsɪblɪŋ/ 兄弟）
`previousSibling`	上一個兄弟節點	`previousElementSibling`	上一個兄弟元素（/ˈpriːviəs/以前）

document.documentElement.parentNode; //HTMLDocument
document.documentElement.parentElement; //null
document.body.childNodes.length; //33
document.body.children.length; //16
document.body.firstElementChild;

❓元素節點：這裡的導航屬性都是唯讀的，不可用於插入、修改元素；都是實時的；集合是可迭代的，用for..of，不要用for(in)

1.2、節點Node/元素Element

節點/元素的繼承層次結構如下，最基礎的EventTarget 又繼承自Object，因此可以自由新增屬性、方法。

EventTarget：—— 是一切的根（「抽象（abstract）」類），定義了基礎的事件。
Node：也是一個「抽象」類，充當 DOM 節點的基礎，提供了節點導航功能，如parentNode，nextSibling，childNodes 等。
Document：表示整個檔案，全域性變數document就是他。
CharacterData：一個文字「抽象」類，被Text（文位元組點）、Comment （註釋節點）繼承。（Character/ˈkærəktər/ 符號文字）
Element：是 DOM 元素的基礎類，提供了元素導航功能，如nextElementSibling，children等，以及搜尋方法getElementsByTagName 和 querySelector等。
HTMLElement：所有 HTML 元素的基礎類，常用的如：HTMLInputElement、HTMLBodyElement、HTMLAnchorElement、HTMLDivElement、HTMLTableElement

document.body.querySelector("div").constructor.name; //HTMLDivElement
document.body.querySelector("div").toString(); //[object HTMLDivElement]

JavaScript入門⑦-DOM操作大全

01、DOM(document)

1.1、DOM結構-節點/元素

1.2、節點Node/元素Element

(adsbygoogle = window.adsbygoogle || []).push({});