Javascript節(jié)點關系實例分析
更新時間：2015年05月15日 09:14:14 作者：永遠愛好寫程序
這篇文章主要介紹了Javascript節(jié)點關系,實例分析了javascript操作父子節(jié)點及兄弟節(jié)點的相關技巧,需要的朋友可以參考下
本文實例分析了Javascript的節(jié)點關系。分享給大家供大家參考。具體如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>節(jié)點關系</title>
<script type="text/javascript">
function Demo() {
var divObj = document.getElementById("divDemo");
//獲取父節(jié)點
var parentNode = divObj.parentNode;
//displayNodeInfo(parentNode);
//獲取子節(jié)點
var childNodes = divObj.childNodes;
//子節(jié)點返回的是一個集合，即數(shù)組
//alert(childNodes.length); //顯示節(jié)點個數(shù)
//displayNodeInfo(childNodes[0]);
//獲取兄弟節(jié)點
//----------獲取上一個兄弟節(jié)點
var preBrotherNode = divObj.previousSibling.previousSibling;
//標簽之間存在空行時，會出現(xiàn)一個空白的文本節(jié)點，在獲取節(jié)點時，一定要注意。
//displayNodeInfo(preBrotherNode);
//----------獲取下一個兄弟節(jié)點
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內(nèi)容</div>
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
您可能感興趣的文章:
- javascript將DOM節(jié)點添加到文檔的方法實例分析
- JavaScript實現(xiàn)獲得所有兄弟節(jié)點的方法
- 刪除javascript所創(chuàng)建子節(jié)點的方法
- JavaScript針對網(wǎng)頁節(jié)點的增刪改查用法實例
- javascript動態(tài)修改Li節(jié)點值的方法
- javascript刪除一個html元素節(jié)點的方法
- javascript獲取dom的下一個節(jié)點方法
- 用javascript讀取xml文件讀取節(jié)點數(shù)據(jù)
- javascript 獲取HTML DOM父、子、臨近節(jié)點
- JavaScript節(jié)點及列表操作實例小結
相關文章
javascript 使用正則test( )第一次是 true,第二次是false
這篇文章主要介紹了使用正則test( )第一次是 true,第二次是false的相關資料,需要的朋友可以參考下2017-02-02
JavaScript的級聯(lián)函數(shù)用法簡單示例【鏈式調用】
這篇文章主要介紹了JavaScript的級聯(lián)函數(shù)用法,結合簡單實例形式分析了javascript鏈式調用具體定義及使用方法,需要的朋友可以參考下2019-03-03
這篇文章主要給大家介紹了關于ES6學習筆記之map、set與數(shù)組、對象對比的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-03-03
本篇文章主要介紹了js中幾種實用的跨域方法原理詳解 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。2016-12-12
微信小程序實現(xiàn)單選、多選及如何通過變量控制單選/多選功能
文章介紹了如何在微信小程序中實現(xiàn)單選和多選功能,單選功能使用`radio`和`radio-group`組件,多選功能使用`checkbox`和`checkbox-group`組件,同時,還介紹了如何通過自定義邏輯實現(xiàn)單選和多選功能,并總結了每種功能的特點和實現(xiàn)方式2025-01-01
本篇文章主要是對JS判斷表單輸入是否為空的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了JS實現(xiàn)表單中點擊小眼睛顯示隱藏密碼框中的密碼，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考價值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了詳解webpack解惑：require的五種用法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了詳解如何探測小程序返回到webview頁面，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
javascript中l(wèi)ayim之查找好友查找群組
這篇文章主要介紹了javascript中l(wèi)ayim之查找好友查找群組,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02