dom_5 节点操作、关系
2018-11-22 本文已影响0人
basicGeek
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1">
<div class="box2" id="box2"></div>
<div class="box3"></div>
</div>
<script>
//节点的访问关系是以属性形式存在
//1.box1是box的父节点
// var box2 = document.getElementsByClassName("box2")[0];
var box2 = document.getElementById("box2")
// console.log(box2.parentNode);
//
// //2.nextElementSibling下一个兄弟节点
// console.log(box2.nextElementSibling);
//
// //firstElementChild第一个子节点
// console.log(box2.parentNode.firstElementChild);
//
// //所有子节点
// console.log(box2.parentNode.childNodes);
// console.log(box2.parentNode.children);
//节点的操作
//1.创建
var aaa = document.createElement("li");
var bbb = document.createElement("afadsfadsf");
console.log(aaa);
console.log(bbb);
//
// //添加
var box1 = document.getElementsByClassName("box1")[0];
box1.appendChild(aaa);
box1.insertBefore(bbb,aaa);
//
// //删除
box1.removeChild(bbb);
aaa.parentNode.removeChild(aaa);//自杀，自己删除自己
//
// //克隆
var ccc = box1.cloneNode();
var ddd = box1.cloneNode(true);
console.log(ccc);
console.log(ddd);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
li {
list-style: none;
width: 100px;
height: 100px;
background-color: pink;
margin: 5px;
}
</style>
</head>
<body>
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li id="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
</ul>
<script>
//parentNode父盒子
var box3 = document.getElementById("box3");
box3.parentNode.style.backgroundColor = "blue";
//兄弟节点（前一个和后一个：previousSibling和nextSibling）
//previousElementSibling和nextElementSibling在IE678中不支持。IE678不能获取文本节点。
// box3.previousElementSibling.style.backgroundColor = "red";
// box3.nextElementSibling.style.backgroundColor = "yellow";
// box3.previousSibling.style.backgroundColor = "red";
// box3.nextSibling.style.backgroundColor = "yellow";
var pre = box3.previousElementSibling || box3.previousSibling;
var net = box3.nextElementSibling || box3.nextSibling;
pre.style.backgroundColor = "red";
net.style.backgroundColor = "yellow";
//单个子元素（firstChild和lastChild）
// box3.parentNode.firstElementChild.style.backgroundColor = "orange";
// box3.parentNode.lastElementChild.style.backgroundColor = "green";
var first = box3.parentNode.firstElementChild || box3.parentNode.firstChild;
var last = box3.parentNode.lastElementChild || box3.parentNode.lastChild;
first.style.backgroundColor = "orange";
last.style.backgroundColor = "green";
//所有子元素
var arr = box3.parentNode.children;
for(var i=0;i<arr.length;i++){
arr[i].style.backgroundColor = "black";
}
console.log(box3.parentNode.childNodes);
var arr2 = box3.parentNode.childNodes;
for(var i=0;i<arr2.length;i++){
if(arr2[i].nodeType === 1){
console.log(arr2[i]);
}
}
//随意获取指定兄弟节点
var index = 0;
var node = box3.parentNode.children[index];
//获取所有的兄弟节点
function siblings(elm) {
var a = [];
var p = elm.parentNode.children;
for(var i =0;i<p.length;i++) {
if(p[i] !== elm) {
a.push(p[i]);
}
}
return a;
}
</script>
</body>
</html>
节点操作
