本文通过示例代码详细介绍了DOM节点的关系，包括childNodes、children、parentNode、firstChild、lastChild、nextSibling、previousSibling、firstElementChild、lastElementChild、nextElementSibling和previousElementSibling等属性的使用，帮助读者掌握如何在JavaScript中遍历和操作DOM节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="div1">
<p id="p1">p1 is the firstchild of div1</p>
<p id="p2">p2 is the firstchild of div1</p>
</div>
<div id="div2">
hello div2
</div>
<h1>hello js h1</h1>
<p>hello js p</p>
<input type="button" name="btn" id="btn" value="click" />
<script type="text/javascript">
/*节点关系--dom节点的属性（用于遍历DOM节点，找对应的DOM节点）
childNodes ：所有子节点（含空格，回车，tab等空白符）
children ： 所有元素子节点（不含文本节点）
parentNode ：父节点
firstChild ：第一个节点（含空格，回车，tab等空白符）
lastChild ： 最后一个子节点
nextSibling ： 下一个兄弟节点
previousSibling ： 上一个兄弟节点
firstElementChild ：第一个元素子节点
lastElementChild ： 最后一个元素子节点
nextElementSibling ： 下一个元素兄弟节点
previousElementSibling ：上一个元素兄弟节点
*/
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn");
var Op1 = document.getElementById("p1");
oBtn.onclick = function(){
// oDiv.children[0].innerHTML = "haha";
// oDiv.firstElementChild.innerHTML = "haha";
// oDiv.childNodes[1].innerHTML = "haha";
var p1 = oDiv.firstElementChild;
// p1.nextElementSibling.innerHTML = "change";
// 用nodeValue属性，修改p1字段的值
// p1.firstChild.nodeValue = "haha";
p1.childNodes[0].nodeValue = "p1 value";
oDiv.children[0].style.backgroundColor = "palegreen";
// oDiv.children[1].innerHTML = "哈哈";
}
console.log(p1.parentNode.nodeName);
console.log(oDiv.childNodes.length);
console.log(oDiv.children.length);
</script>
</body>
</html>
扫一扫
510
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
