引言
通过前面笔记DOM的介绍，DOM的数据结构是一种树形数据结构，因此可以使用DOM获取对象（元素），然后对该对象的属性以及样式进行设置以及更改，甚至可以动态创建以及删除对象。总结来说就是：通过DOM获得父节点，兄弟节点进行操作
节点的获取
- 所有节点都是文档对象的属性
- DOM的节点都不是孤立的，因此可以通过DOM之间的相对关系进行访问
获取父节点（parentNode)
方法：使用节点对象，通过节点对象.parentNode获取父节点
例：
<body>
<!--a标签的父节点的父节点-->
<div id ="box">
<button id ="btn" class ="btn-class">第一个按钮</button>
<button class ="btn-class"> 第二个按钮</button>
<button>第三个按钮</button>
<!-- a标签父节点-->
<span id ="span">
<!-- a标签-->
<a herf="#">点击打开快乐</a>
</span>
</div>
<script>
window.onload = function () {
//获取a节点
var a = document.getElementsByTagName("a")[0];
console.log(a);
//获取a的父节点
var parentNode = a.parentNode;
console.log(parentNode);
//获取a的父节点的父节点
var parentNode_paretNode = a.parentNode.parentNode;
console.log(parentNode_paretNode);
}
</script>
</body>
通过子节点设置父节点属性
例：通过子节点设置父节点的背景颜色
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*设置父节点的长宽*/
#box{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id ="box">
<button id ="btn" class ="btn-class">第一个按钮</button>
<button class ="btn-class"> 第二个按钮</button>
<button>第三个按钮</button>
<span id ="span">
<a herf="#">点击打开快乐</a>
</span>
</div>
<script>
window.onload = function () {
//获取a节点
var a = document.getElementById("span");
//获取a节点的父节点
var box =a.parentNode;
//设置父节点的背景颜色
box.style.backgroundColor="red";
};
</script>
</body>
获取兄弟节点
由上面的DOM数据结构图，可以看到根元素html是没有兄弟节点，其他元素都有自己的兄弟节点，因此我们可以使用类似获取父节点的方式，来获取兄弟节点。
使用方法：
- 获取上一个兄弟节点：
节点.previousSibling - 获取下一个兄弟节点：
节点.nextSibling
在火狐谷歌IE9+以后，用nextElementSilbing获取下一个兄弟节点
例子：
<body>
<div id ="box">
<button id ="btn" class ="btn-class">第一个按钮</button>
<button class ="btn-class"> 第二个按钮</button>
<button>第三个按钮</button>
<p>今天不快乐</p>
<span id ="span">
<a herf="#">点击打开快乐</a>
</span>
<p>今天很快乐</p>
</div>
<script>
window.onload = function () {
//获取a节点
var span = document.getElementById("span");
//获取a节点的上一个兄弟节点
var bro1 =span.previousElementSibling || span.previousSibling;
console.log(bro1);
//获取a节点的下一个兄弟节点
var bro2 =span.nextElementSibling || span.nextSibling;
console.log(bro2);
};
</script>
</body>
获取子节点
获取单个节点
- 获取第一个子节点：
节点.firstChild || 节点.firstElementChild - 获取最后一个子节点：
节点.lastChild || 节点.lastElementChild
例：
<body>
<div id ="box">
<button id ="btn" class ="btn-class">第一个按钮</button>
<button class ="btn-class"> 第二个按钮</button>
<button>第三个按钮</button>
<p>今天不快乐</p>
<span id ="span">
<a herf="#">点击打开快乐</a>
</span>
<p>今天很快乐</p>
</div>
<script>
window.onload = function () {
//获取box节点
var box = window.document.getElementById("box");
console.log(box);
//获取box节点的第一个子节点
var firstChild = box.firstElementChild || box.firstChild;
console.log(firstChild);
//获取box节点的最后一个子节点
var lastChild = box.lastElementChild || box.lastChild;
console.log(lastChild);
};
</script>
</body>
获取多个节点
- 获取所有的子节点：
父节点.childNodes返回制定元素的子元素集合，包括HTML节点，所有属性，文本节点
注意：
-
nodeType ==1 ：表示元素节点
-
nodeType ==2 ：表示属性节点
-
nodeType ==3 ：表示文本节点
-
高版本浏览器使用
父节点.children获取所有子节点，只返回HTML节点，不返回文本节点
<body>
<div id ="box">
<button id ="btn" class ="btn-class">第一个按钮</button>
<button class ="btn-class"> 第二个按钮</button>
<button>第三个按钮</button>
<p>今天不快乐</p>
<span id ="span">
<a herf="#">点击打开快乐</a>
</span>
<p>今天很快乐</p>
</div>
<script>
window.onload = function () {
//获取box节点
var box = window.document.getElementById("box");
//获取box节点的所有子节点
var allChild =box.childNodes;
console.log(allChild);
//获取子节点中的元素节点：
var eleChild =[];
for (var i =0; i<allChild.length;i++){
var node =allChild[i];
if (node.nodeType==1){
eleChild.push(node);
}
}
console.log(eleChild);
//使用children获取所有子节点
var NewAllChild =box.children;
console.log(NewAllChild);
};
</script>
</body>
