收藏
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div></div>
<ul id="uls">
<li>1</li>
<li>2</li>
<li id="test">3</li>
<li>4</li>
<li>5</li>
</ul>
<input type="text" name="aaa" value="ddd" title="cc" class="ee" id="ss"/>
</body>
<script type="text/javascript">
//測試元素節(jié)點(diǎn)
var uls = document.getElementById('uls');
//節(jié)點(diǎn)名稱
console.log(uls.nodeName);
//第一個(gè)子元素的節(jié)點(diǎn)名稱,包含文檔節(jié)點(diǎn)
console.log(uls.firstChild.nodeName);
//最后一個(gè)子元素的節(jié)點(diǎn)名稱，包含文檔節(jié)點(diǎn)
console.log(uls.lastChild.nodeName);
//childNodes元素節(jié)點(diǎn),包含了該元素下的所有節(jié)點(diǎn)信息，包含了文檔節(jié)點(diǎn)，子元素節(jié)點(diǎn)，注釋節(jié)點(diǎn)等
console.log(uls.childNodes);
//children 只獲取到下級標(biāo)簽元素節(jié)點(diǎn),不包含注釋節(jié)點(diǎn)和文本節(jié)點(diǎn)
console.log(uls.children);
//測試父節(jié)點(diǎn)
var test = document.getElementById('test');
//parentNode 父節(jié)點(diǎn)
//nodeName 節(jié)點(diǎn)名稱
console.log(test.parentNode.parentNode.parentNode.parentNode.nodeName);
//nextSibling 下一個(gè)的兄弟節(jié)點(diǎn),會計(jì)算文本節(jié)點(diǎn)
console.log(test.nextSibling.nextSibling.nextSibling.nextSibling);
//previousSibling 上一個(gè)的兄弟節(jié)點(diǎn)，會計(jì)算文本節(jié)點(diǎn)
console.log(test.previousSibling.previousSibling.previousSibling.previousSibling);
//parentNode 父節(jié)點(diǎn)，不包含文本，注釋節(jié)點(diǎn)
//children 子節(jié)點(diǎn)，不包含文本，注釋節(jié)點(diǎn)
console.log(test.parentNode.parentNode.children[0]);
//測試所有屬性集合
var ss = document.getElementById('ss');
//attributes 所有屬性集合
//nodeValue 節(jié)點(diǎn)值,對于文檔節(jié)點(diǎn)和元素節(jié)點(diǎn)不可用的
console.log(ss.attributes[1].nodeValue);
</script>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號