新聞中心
使用HTML DOM,可以使用節(jié)點(diǎn)關(guān)系來(lái)導(dǎo)航"節(jié)點(diǎn)樹(shù)"。

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供武平網(wǎng)站建設(shè)、武平做網(wǎng)站、武平網(wǎng)站設(shè)計(jì)、武平網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、武平企業(yè)網(wǎng)站模板建站服務(wù),十載武平做網(wǎng)站經(jīng)驗(yàn),不只是建網(wǎng)站,更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
一、DOM 節(jié)點(diǎn)
在一個(gè)HTML文檔都是一個(gè)節(jié)點(diǎn),The entire document is a document node 每個(gè)HTML元素是元素節(jié)點(diǎn) 在HTML元素的文本是文本節(jié)點(diǎn) 每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn) 所有注釋都是注釋節(jié)點(diǎn)。
使用HTML DOM, 在節(jié)點(diǎn)樹(shù)的所有節(jié)點(diǎn)可以通過(guò)JavaScript訪(fǎng)問(wèn)??梢詣?chuàng)建新節(jié)點(diǎn),并可以修改或刪除所有節(jié)點(diǎn)。
1. 節(jié)點(diǎn)關(guān)系
節(jié)點(diǎn)樹(shù)中的節(jié)點(diǎn)彼此具有層次關(guān)系。
2. 子節(jié)點(diǎn)和節(jié)點(diǎn)值
在DOM處理中常見(jiàn)的錯(cuò)誤就是認(rèn)為一個(gè)元素節(jié)點(diǎn)包含文本。
DOM Tutorial 元素節(jié)點(diǎn)
它包含有值的文本節(jié)點(diǎn) "DOM Tutorial"。
該文本節(jié)點(diǎn)的值可以通過(guò)節(jié)點(diǎn)的innerHTML屬性訪(fǎng)問(wèn)。
var myTitle = document.getElementById("demo").innerHTML;訪(fǎng)問(wèn)innerHTML屬性訪(fǎng)問(wèn)和訪(fǎng)問(wèn)第一個(gè)子節(jié)點(diǎn)值相同:
var myTitle = document.getElementById("demo").firstChild.nodeValue;訪(fǎng)問(wèn)第一個(gè)子節(jié)點(diǎn)也可以這樣做:
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;實(shí)例1:
查詢(xún)
元素的文本,并且拷貝它到
元素。
項(xiàng)目
My First Page
實(shí)例2:
項(xiàng)目
My First Page
實(shí)例3 :
項(xiàng)目
My First Page
Hello!
二、DOM 根節(jié)點(diǎn)
有兩個(gè)特殊屬性允許訪(fǎng)問(wèn)完整文檔:
document.body - 文檔主體
項(xiàng)目
我的第一個(gè)頁(yè)面
document.documentElement - 完整的文檔
項(xiàng)目
Hello World!
The DOM is very useful!
This example demonstrates the document.documentElement property.
1. nodeName 屬性
nodeName屬性指定一個(gè)節(jié)點(diǎn)的名稱(chēng),nodeName 是只讀的。
- nodeName 是只讀的。
- nodeName 一個(gè)元素節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)和標(biāo)簽名稱(chēng)相同。
- 一個(gè)屬性節(jié)點(diǎn)的節(jié)點(diǎn)名稱(chēng)是屬性名。
- 一個(gè)文本節(jié)點(diǎn)的nodeName總是 #text。
- 文檔的節(jié)點(diǎn)名稱(chēng)總是 #document。
My First Page
注意:
nodeName總是包含HTML元素的大寫(xiě)標(biāo)簽名稱(chēng)。
2. nodeValue 屬性
nodeValue 屬性指定節(jié)點(diǎn)的值。素節(jié)點(diǎn)的節(jié)點(diǎn)值是 undefined,文本節(jié)點(diǎn)的節(jié)點(diǎn)是文本本身,屬性節(jié)點(diǎn)的節(jié)點(diǎn)值是屬性值。
3. nodeType 屬性
nodeType 屬性返回節(jié)點(diǎn)類(lèi)型. nodeType 是只讀的。
三、總結(jié)
本文基于JavaScript,介紹了頁(yè)面上htmldom 導(dǎo)航的節(jié)點(diǎn)。節(jié)點(diǎn)和節(jié)點(diǎn)之間的關(guān)系,采用生動(dòng)的比喻進(jìn)行講解。以及根節(jié)點(diǎn)的屬性進(jìn)行了詳細(xì)講解。通過(guò)豐富的案例,運(yùn)行效果圖的展示。希望能幫助讀者更好的學(xué)習(xí)。
使用JavaScript 語(yǔ)言,方便大家更好理解,希望對(duì)大家的學(xué)習(xí)有幫助。
網(wǎng)站題目:一篇文章帶你了解JavaScript htmldom 導(dǎo)航
文章位置:http://fisionsoft.com.cn/article/djgcjjd.html


咨詢(xún)
建站咨詢(xún)
