DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript節點關系實例分析
Javascript節點關系實例分析
編輯:關於JavaScript     

本文實例分析了Javascript的節點關系。分享給大家供大家參考。具體如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>節點關系</title>
<script type="text/javascript">
function Demo() {
 var divObj = document.getElementById("divDemo");
 //獲取父節點
 var parentNode = divObj.parentNode;
 //displayNodeInfo(parentNode);
 //獲取子節點
 var childNodes = divObj.childNodes;
 //子節點返回的是一個集合,即數組
 //alert(childNodes.length); //顯示節點個數
 //displayNodeInfo(childNodes[0]);
 //獲取兄弟節點
 //----------獲取上一個兄弟節點
 var preBrotherNode = divObj.previousSibling.previousSibling;
 //標簽之間存在空行時,會出現一個空白的文本節點,在獲取節點時,一定要注意。
 //displayNodeInfo(preBrotherNode);
 //----------獲取下一個兄弟節點
 var nextBrotherNode = divObj.nextSibling;
 displayNodeInfo(nextBrotherNode);
}
function displayNodeInfo(node) {
 alert("Name:" + node.nodeName + ",Type:" + node.nodeType + ",Value:" + node.nodeValue);
}
</script>
</head>
<body>
<input type="button" value="測試" onclick="Demo()" />
<div id="divDemo">div內容</div>
<table>
  <tr>
    <td>單元格1</td>
    <td>單元格2</td>
  </tr>
  <tr>
    <td>單元格3</td>
    <td>單元格4</td>
  </tr>
</table>
</body>
</html>

希望本文所述對大家的javascript程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved