Skip to content

Latest commit

 

History

History
63 lines (54 loc) · 1.43 KB

節點層次關係.md

File metadata and controls

63 lines (54 loc) · 1.43 KB
Raw

節點層次關係

節點

  • 通過節點的層次關係獲取節點對象。
  • 關係:
  1. parentNode(父節點): 對應一個節點對象。
  2. childNodes(子節點): 對應一個節點集合。
  3. 兄弟節點: 上一個兄弟節點: previousSibling 下一個兄弟節點: nextSibling

演示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>	
	
	<script type="text/javascript">
		function getNodeByLevel() {

			//獲取頁面中的表格節點
			var tabNode = document.getElementById("tabid");

			//獲取父節點 -> parentNode
			// var node = tabNode.parentNode;
			// alert(node.nodeName);//body

			//獲取子節點 -> childNode
			// var nodes = tabNode.childNodes;
			// alert(nodes[0].childNodes[0].nodeName);//tbody

			//獲取兄弟節點，盡量少用，因為各瀏覽器解析方式不一致，會解析出標籤間的空白文本節點
			//上一個
			var node = tabNode.previousSibling;
			alert(node.nodeName);//div
			//下一個
			var node = tabNode.nextSibling;
			alert(node.nodeName);//span
		}
	</script>

	<input type="button" value="通過節點層次關係獲取節點" onclick="getNodeByLevel()">

	<div>div 區域</div>
	<table id="tabid">
		<tr>
			<td>單元格</td>
			<td>單元格</td>
		</tr>
	</table>
	<span>span 區域</span>
	<dl>
		<dt>上層項目</dt>
		<dd>下層項目</dd>
	</dl>
	<a href="">超鏈接</a>
</body>
</html>