DOM中元素節點 屬性節點 文字節點的理解

2021-07-08 17:47:09 字數 3214 閱讀 9344

節點資訊

每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是:

nodename(節點名稱) 

nodevalue(節點值) 

nodetype(節點型別) 

nodetype

nodetype 屬性可返回節點的型別。

最重要的節點型別是:

元素型別

節點型別

元素(element_node)

1   

屬性(attribute_node)

文字(text_node)

注釋(comment_node)

文件(document_node)

在實際應用中,經常用到的就是元素節點、屬性節點和文字節點了,下面我們通過小段**進行講解 

1:元素節點

元素節點** 

[html]view plain

copy

<

html

>

<

head

>

<

title

>

空谷悠悠

title

>

head

>

<

body

>

<

table

>

<

tr>

<

tdid

="john"

name

="myname"

>

john

td>

<

td>

doetd

>

<

tdid

="jack"

>

jack

td>

tr>

table

>

<

script

>

var d

= document

.getelementbyid("john");  

alert(d.nodetype)  

alert(d.nodename)  

alert(d.nodevalue)  

script

>

body

>

html

>

分析執行結果,其三個屬性的值分別為:

nodetype:element_node

nodetype值:1

nodename:元素標記名    //此處為td

nodevalue:null

2:屬性節點

屬性節點** 

[html]view plain

copy

<

html

>

<

head

>

<

title

>

空谷悠悠

title

>

head

>

<

body

>

<

table

>

<

tr>

<

tdid

="john"

name

="myname"

>

john

td>

<

td>

doetd

>

<

tdid

="jack"

>

jack

td>

tr>

table

>

<

script

>

var d

= document

.getelementbyid("john").getattributenode("name");  

alert(d.nodetype)  

alert(d.nodename)  

alert(d.nodevalue)  

script

>

body

>

html

>

分析執行結果,其三個屬性的值分別為:

nodetype:attribute_node

nodetype值:2

nodename:屬性名  // name

nodevalue:屬性值  //myname

3:文字節點

文字節點** 

[html]view plain

copy

<

html

>

<

head

>

<

title

>

new document

title

>

head

>

<

body

>

<

table

>

<

tr>

<

tdid

="john"

name

="myname"

>

john

td>

<

td>

doetd

>

<

tdid

="jack"

>

jack

td>

tr>

table

>

<

script

>

var d

= document

.getelementsbytagname("td")[0].firstchild  

alert(d.nodetype)  

alert(d.nodename)  

alert(d.nodevalue)  

script

>

body

>

html

>

分析執行結果,其三個屬性的值分別為:

nodetype:text_node

nodetype值:3

nodename:#text

nodevalue:文字內容   // john

DOM中元素節點 屬性節點 文字節點的理解

每個節點都擁有包含著關於節點某些資訊的屬性。這些屬性是 nodetype 屬性可返回節點的型別。最重要的節點型別是 元素型別 節點型別元素1 屬性2文字3 注釋8文件9 在實際應用中,經常用到的就是元素節點 屬性節點和文字節點了,下面我們通過小段 進行講解 1 元素節點 john doejack j...

DOM啟蒙 文字節點

html文件中的文字表現為 text 建構函式的示例,即文字節點。text從characterdata node及object繼承。屬性 可用來獲取所有子文字節點,或設定節點內容成某一特定text節點。當在某個節點上用它獲取該節點文字內容時,它將返回乙個由呼叫該方法的節點內所有文字節點合併的字串。當...

DOM遍歷元素節點時忽略空格文字節點的方法

元素節點之間的空格在瀏覽器中會被解釋為文字節點給父節點操作子節點方法帶來困擾,dom中擴充套件了方法解決 a.childelementcount 返回子元素 不包括文字節點和注釋 的個數 b.firstelementchild 指向第乙個子元素 不包括文字節點和注釋 c.lastelementchi...