JavaScript學習路-(14)DOM

DOM = Document Object Model,是 html 的節點樹。
利用 DOM ,JavaScript 可以修改、刪除 html 裡面的內容、class等等。

DOM 裡面的每個元素、空白都是一個節點,而節點還分類為以下:
Document:也就是文件本身,是 html 最上面一層
Element:元素:例如 html, head, div, img, p…..
Text:元素裡面包住的文字,即使是空白也算
Attribute:元素屬性,例如 id, class, type, onclick….

要修改 DOM 的話,就像找樹枝一樣一層一層的找上去,找到想找的那層以後,再去修改那個節點的資料或屬性。
使用一些 DOM 的方法 (Methods) 可以幫助快速找到節點。

document.getElementById():找節點 ID
document.getElementById("id");

document.getElementsByTagName()[]:找元素節點,
[] 是當元素有一個以上且又需要鎖定其中一個時,要填入數字幫助找到元素,數字從 0 開始。
document.getElementsByTagName("img");

document.getElementsByClassName():找 class
document.getElementsByClassName("class");

document.createElement:新增節點
document.createElement("p");

document.createTextNode:在文字字串加文字節點
document.createTextNode("I am text!");

document.removeChild:移除節點

document.appendChild:加入新節點

document.replaceChild():覆蓋節點

nodeType:節點的形態。
節點形態是指 html 中的元素的形態,分類如同上面提到的Document 、 Element 、 Text 、 Attribute 。
但回傳的節點形態是數字簡稱而不是全名。
例: id 是 1, attributes 是 2…

nodeValue:存在節點裡面的值跟屬性。
例如 div 底下除了文字還有 p 以及 span , p 跟 span 裡面也都有文字內容,
這時候 nodeValue 可以抓取 div 底下 “所有” 的文字內容,但是 p 跟 span 都不是他的管區~

childNodes:節點下所有子節點陣列。
上述 nodeValue 管不到的 p 跟 span,就交給 childNodes 處理~

firstChild:節點下第一個節點
div —
|– p 這裡是第一個節點
|– span
|– a

lastChild:節點下最後一個節點
div —
|– p
|– span
|– a 這裡是最後一個節點

(firstChild 跟 lastChild 看起來真是和藹可親….因為 CSS 也有 XD)

今日練習

本文同步發表於

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *