Javascript節點關係實例分析_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

Javascript節點關係實例分析_javascript技巧

May 16, 2016 pm 03:58 PM

javascript

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

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;节点关系&lt;/title&gt;
&lt;script type="text/javascript"&gt;
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);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;input type="button" value="测试" onclick="Demo()" /&gt;
&lt;div id="divDemo"&gt;div内容&lt;/div&gt;
&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;单元格1&lt;/td&gt;
    &lt;td&gt;单元格2&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;单元格3&lt;/td&gt;
    &lt;td&gt;单元格4&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;