父节点 parentNode
- 获取到的是自己的亲父亲(直属关系)
// 点击孩子隐藏父亲
<script>
window.onload = function(){
var child = document.getElementById("child");
child.onclick = function(){
this.parentNode.style.display = "none";
}
}
</script>
兄弟节点 nextSibling previousSibling
-
nextSibling,下一个兄弟,ie 678兼容。
-
nextElementSibling,下一个兄弟,兼容除了ie678的其他浏览器。
-
previousSibling,上一个兄弟,ie 678兼容。
-
previousElementSibling,上一个兄弟,兼容除了ie678的其他浏览器。
-
想要兼容,我们可以合写 || ,注意:必须先写正常浏览器,后写 ie678。
<script>
window.onload = function () {
var box = document.getElementById("box");
var select = box.nextElementSibling || box.nextSibling;
select.style.backgroundColor = "pink";
var select2 = box.previousElementSibling || box.previousSibling ;
select2.style.backgroundColor = "yellow";
}
</script>
<body>
<div></div>
<div id="box"></div>
<div></div>
</body>
子节点
-
firstChild 第一个孩子,ie678
-
firstElementChild 第一个孩子,其他浏览器
-
兼容写法 var boy = someone.firstElementChild || someone.firstChild;
-
lastChild 最后一个孩子,ie678
-
lastElementChild 最后一个孩子,其他浏览器
-
兼容写法 var boy = someone.lastElementChild || someone.lastChild;
-
childNodes 选出全部的孩子。注意:谷歌火狐等会把换行也当成一个孩子。所有要遍历所有的孩子节点,利用nodeType == 1 时才是元素节点,来获取元素节点。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function()
{
var ul = document.getElementById("ul")
var childrens = ul.childNodes; //选择全部的孩子
alert(childrens.length); //结果是7 因为谷歌火狐会把换行也当成一个孩子
//利用nodeType == 1 时才是元素节点,来获取元素节点
for(var i=0; i<childrens.length; i++)
{
if( childrens[i].nodeType == 1)
{
childrens[i].style.backgroundColor = "pink";
}
}
}
</script>
</head>
<body>
<ul id="ul">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>
- children 选取所有的孩子 (只有元素节点)。推荐用这个来代替childNodes。注意:ie 678会包含 注释节点,这个要避免开。
创建节点 creatElement();
- 创建一个div元素节点:var div = document.creatElement(“div”);
插入节点 appendChild() insertBefore()
-
appendChild() 添加节点到父盒子的最后面。
-
insertBefore(插入的节点,参照节点) 添加节点到参照节点的前面。注意:如果第二个参数 为 null 则默认将插入的节点放到最后面。
移除节点 removeChild()
// 移除demo中的test
var test = document.getElementById("test");
demo.removeChild(test);
克隆节点 cloneNode()
- 括号里面可以跟参数 , 如果里面是 true,则深层复制, 除了复制本节点,还复制其子节点 。
- 如果为 false 浅层复制,只复制本节点,不复制其子节点。
代码示例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function() {
var demo = document.getElementById("demo");
var childrens = demo.children; //选中demo所有的孩子
//创建节点
var firstdiv = document.createElement("div");
//添加节点
demo.appendChild(firstdiv); //从后面添加
//创建节点
var test = document.createElement("div");
//插入节点
demo.insertBefore(test, childrens[0]);
//insertBefore(插入的节点,参照节点) ,添加到参照节点的前面。
//demo.insertBefore(test,null) 参照节点为null,默认放在盒子的最后面。
var test_1 = document.getElementById("test_1");
demo.removeChild(test_1); //移除节点
var last = childrens[0].cloneNode(); //克隆节点,克隆demo中的第一个孩子。
demo.appendChild(last); //插入节点到demo的最后
//克隆一个demo
demo.parentNode.appendChild(demo.cloneNode(true)); //给我的爸爸添加一个孩子,就是我的兄弟。
}
</script>
</head>
<body>
<div id="demo">
<div id="test_1"></div>
<div id="test_2"></div>
</div>
</body>
</html>