iT邦幫忙

DAY 14
0

JavaScript學習路系列 第 14

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)

今日練習

本文同步發表於 http://azzurro.blog.aznc.cc/learn\_javascript\_14/


上一篇
JavaScript學習路-(13)Math
下一篇
JavaScript學習路-(15)Console-1
系列文
JavaScript學習路30

尚未有邦友留言

立即登入留言