JavaScript——DOM节点动态操作
2016-12-03 本文已影响0人
紫荆峰
0.前言
上一节把每个的节点操作都演示一遍，可累死我了，今天就不一一演示了，直接上代码，注释在代码里，写的很详细。至于运行效果，大家就自己复制粘贴吧，抱歉啊！！！
1.正文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM节点动态操作</title>
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: yellow;
}
#box1{
width: 100px;
height: 100px;
background-color: red;
}
#box2{
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box">
<p>1</p>
<p>2</p>
</div>
<script type="text/javascript">
//创建元素节点
var jsDiv = document.createElement("div");
jsDiv.id = "box1";
console.log(jsDiv);
//添加子节点(这个是添加到最后)
//document.body === body标签 === body元素节点
//公式：元素节点（parentNode）.appendChild(childNode)
//功能：在parentNode节点的所有子节点后面添加一个子节点
document.body.appendChild(jsDiv);
//添加子节点（这个是添加到指定位置）
//公式：元素节点（parentNode）.insertBefore(newdNode,currentNode);
var jsDiv2 = document.createElement("div");
jsDiv2.id = "box2"
// document.body.insertBefore(jsDiv2,jsDiv);
jsDiv.parentNode.insertBefore(jsDiv2,jsDiv); //推荐使用这个方法。
//创建文本节点
var textNode = document.createTextNode("lsls");
//添加文本节点
var jsDivBox1 = document.getElementById("box");
var allNodes = jsDivBox1.childNodes; //所有子节点
var p = allNodes[1];
p.appendChild(textNode);
console.log(allNodes);
//替换节点
//公式：旧节点的父节点.replaceNode(新节点,旧节点);
//注意：下面的语句会将p在jsDivBox1里面移除
// document.body.replaceChild(p,jsDiv2);
var newDiv = document.createElement("div");
newDiv.style.width = "100px";
newDiv.style.height = "100px";
newDiv.style.backgroundColor = "blue";
jsDiv2.parentNode.replaceChild(newDiv,jsDiv2);
//复制节点
//只复制标签本身,不包含子节点
var con1 = jsDivBox1.cloneNode();
console.log(con1);
//包含了所有的后代节点
var con2 = jsDivBox1.cloneNode(true);
console.log(con2);
//删除节点
//公式：待删除节点.removeChild(待删除节点)
newDiv.parentNode.removeChild(newDiv);
//offsetParent(参照父元素)
console.log(p.offsetLeft);
var ofP = p.offsetParent;
console.log(ofP);
</script>
</body>
</html>
offsetParent.png
