這篇文章主要介紹了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程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
