DOM中的三種類型的節點:元素節點,屬性節點,文本節點

節點信息

每個節點都擁有包含着關於節點某些信息的屬性。這些屬性是:

  • nodeName(節點名稱)
  • nodeValue(節點值)
  • nodeType(節點類型)

nodeType

nodeType 屬性可返回節點的類型。

最重要的節點類型是:


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

1:元素節點

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/JavaScript">
function displayNodeInfo(){
var x=document.getElementById("test");
alert("nodeName:"+x.nodeName+", nodeValue:"+x.nodeValue+", nodeType:"+x.nodeType);
}
</script>
<title>無標題文檔</title>
</head>
<body>
<input type="button" value="測試" onclick="displayNodeInfo();" /><br />
<div id="test">Test</div>
</body>


2:屬性節點

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/JavaScript">
function displayNodeInfo(){
var x=document.getElementById("t").getAttributeNode("href");
alert("nodeName:"+x.nodeName+", nodeValue:"+x.nodeValue+", nodeType:"+x.nodeType);
}
</script>
<title>無標題文檔</title>
</head>
<body>
<input type="button" value="測試" onclick="displayNodeInfo();" /><br />
<div><a href="b" id="t">這是一個連接</a></div>
</body>

分析運行結果,其三個屬性的值分別爲:



3:文本節點

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/JavaScript">
function displayNodeInfo(){
var x=document.getElementById("test");
alert(x.innerHTML);
}
</script>
<title>無標題文檔</title>
</head>
<body>
<input type="button" value="測試" onclick="displayNodeInfo();" /><br />
<div id="test">Test</div>
</body>

結果如下所示:






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章