HTML DOM 節點

在 HTML DOM (Document Object Model) 中, 每個東西都是 節點 :

• 文檔本身就是一個文檔對象
• 所有 HTML 元素都是元素節點
• 所有 HTML 屬性都是屬性節點
• 插入到 HTML 元素文本是文本節點
• 註釋是註釋節點

1 <div>
2         hello
3         <p>world</p>
4         <h1>you are cool</h1>
5         yes
6     </div>

hello和yes是文本節點，p標簽和h1標簽是元素節點

JavaScript：

children：返回元素的子元素的集合

element.children

console.log打印出p和h1兩個元素節點

HTMLCollection(2) [p, h1]

childNodes:返回元素的一個子節點的數組

document.querySelector(‘div‘).childNodes

console.log打印出五個節點，p和h1中間的text是因為回車之後兩個標簽之間有空白，把空白刪掉，text就沒有了

NodeList(5) [text, p, text, h1, text]

firstChild：firstChild 屬性返回被選節點的第一個子節點

lastChild: 返回的最後一個子元素

nextSibling: 返回該元素緊跟的一個節點

parentNode:返回元素的父節點

javascript獲取節點和元素