本文實例分析了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程序設計有所幫助。