DOM

`DOM(Document Object Model)` 文檔對象模型

DOM把文檔表示為一棵樹，整個文檔就是一個樹形結(jié)構(gòu)。
在常見的網(wǎng)頁結(jié)構(gòu)中，<html>為根標(biāo)簽，下面又有<heab>、<body>兩個子標(biāo)簽，子標(biāo)簽下面又有多個子標(biāo)簽，依次向下就形成了一個樹形結(jié)構(gòu)。

節(jié)點

一個節(jié)點就是一個網(wǎng)絡(luò)的連接點，網(wǎng)絡(luò)就是由多個節(jié)點組成的集合。元素中每個節(jié)點都是一個對象。
DOM中有不同的節(jié)點，常見的三種是：

元素節(jié)點：DOM的原子是元素節(jié)點。一般是標(biāo)簽。
屬性節(jié)點：標(biāo)簽中的文本。
文本節(jié)點：標(biāo)簽的一些屬性值。

獲取元素

getElementById("value"):根據(jù)元素的id屬性值來獲取元素，由于id屬性是唯一的，所以獲取的是單個元素。
getElementsByTagName("tagName"):根據(jù)元素的標(biāo)簽來獲取元素，最后的結(jié)果是一個元素的集合。
getElementsByClassName("className"):根據(jù)元素的class屬性值來獲取元素，最終的結(jié)果是一個元素的集合。

獲取跟設(shè)置屬性值

getAttribute("attr"):根據(jù)屬性名稱來獲取屬性值。例如獲取<a>標(biāo)簽中的href屬性值：node.getAttribute("href");。

setAttribute("attr"，“value"):給屬性設(shè)置值，比如給<a>標(biāo)簽設(shè)置href值：node.setAttribute("href","https://www.baidu.com");

事件處理

點擊事件： onclick = "javascritp statement(s)"
鼠標(biāo)懸停事件： onmouseover = "javascritp statement(s)"
鼠標(biāo)移開事件：onmouseout = "javascritp statement(s)"
元素獲得焦點： onfocus = "javascritp statement(s)"
元素失去焦點： onblur = "javascritp statement(s)"
用戶改變域的內(nèi)容： onchange = "javascritp statement(s)"
......

childNodes屬性

childNodes屬性可以獲取任何一個元素的所有子元素，返回改元素所有子元素的數(shù)組。

nodeType屬性

由于childNodes返回的元素數(shù)組中的元素包含元素節(jié)點、屬性節(jié)點以及文本節(jié)點。此時可以根據(jù)nodeType的屬性值來判斷該元素：

元素節(jié)點的nodeType屬性值是1
屬性節(jié)點的nodeType屬性值是2
文本節(jié)點的nodeTyoe屬性值是3

nodeValue屬性

nodeValue可以用來改變或者設(shè)置一個文本屬性的值。
node.nodeValue獲取該節(jié)點文本屬性的值
node.nodeValue = "value"設(shè)置文本屬性的值

`firstChild`跟`lastChild`

firstChild意思等同于childNodes[0]，即該節(jié)點的第一個子節(jié)點
反之，lastChild就是獲取該節(jié)點的最后一個子節(jié)點

posted on 2020-03-13 10:23 暮愛深秋閱讀(110) 評論(0) 收藏舉報

刷新頁面返回頂部

DOM

DOM(Document Object Model) 文檔對象模型