<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{width: 400px;height: 400px;border: 1px solid #000;position: relative}
.box{width: 200px;height: 200px;background: yellowgreen;position: absolute;bottom:20px;overflow: hidden;}
</style>
</head>
<body>
<div class="main">
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<script>
var main=document.getElementsByClassName("main")[0];
var box=document.getElementsByClassName("box")[0];
var box2=document.getElementsByClassName("box2")[0];
var box3=document.getElementsByClassName("box3")[0];
var box4=document.getElementsByClassName("box4")[0];
var box5=document.getElementsByClassName("box5")[0];
console.log(main.childNodes); //.获取子节点包括文本节点
console.log(main.firstChild ); //.获取第一个子节点包括文本节点
console.log(main.lastChild ); //.获取最后一个子节点包括文本节点
console.log(main.parentNode); //.获取父节点
console.log(box.nextSibling ); //.获取下一个相邻兄弟节点包括文本节点
console.log(box2.previousSibling); //.获取上一个相邻兄弟节点包括文本节点
console.log(main.firstElementChild); //获取第一个子元素节点
console.log(main.lastElementChild); //获取最后一个子元素节点
console.log(box.nextElementSibling); //获取下一个相邻兄弟元素节点
console.log(box2.previousElementSibling); //获取上一个相邻兄弟元素节点
console.log(box.children); //获取所有的子元素节点,不包括孙子元素
console.log(main.nodeValue); //nodeValue 输出节点 如果是文本节点或者注释节点,则会打印输出内容;如果是元素节点,则打印输出null;
console.log(main.nodeName); // 输出节点名称
console.log(main.nodeType); // 输出节点类型
main.setAttribute("id","id");//设置属性 setattribute("属性名","属性值");
main.removeAttribute("id");//删除属性 removeAttribute("value");
var span=document.createElement("span");//创建节点
document.body.appendChild(span);//插入节点；
main.insertBefore(span,box);//将元素节点a插入到元素节点b之前insertBefore(a,b)将元素节点a插入到元素节点b之前
main.replaceChild(box4,box3);//b节点被a节点替换,a节点消失
main.removeChild(box5);//删除节点
</script>
</body>
</html>
