您的位置：首页 > Web前端 > JavaScript

JS操作dom节点及兼容性

2017-05-11 13:09 302 查看

父节点 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
a756
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航