目录
节点关系
1.节点关系图：
创建节点
| createElement | 创建元素节点 |
| createTextNode | 创建文本节点 |
| createAttribute | 创建属性节点 |
样例：
具体代码：
<div id="d1">
小小的div
</div>
<div id="d2">
又是一个小小的div
</div>
<div id="d3">
还是一个小小的div
</div>
<script type="text/javascript">
function add1(){
var hr=document.createElement("hr");//创造元素节点(hr元素)
var div1=document.getElementById("d1");
div1.appendChild(hr);//接着把该元素节点，通过appendChild加入到另一个元素节点div1中
}
function add2(){
var p=document.createElement("p");
var text=document.createTextNode("这是通过DOM创建出来的<p>");//创建文本节点
p.appendChild(text);//把text加入到p
var div2=document.getElementById("d2");
div2.appendChild(p); //再把p加入到div 2
}
function add3(){
var a=document.createElement("a");
var content=document.createTextNode("http://123456.com");
a.appendChild(content);//把content加入到a
var href=document.createAttribute("href");//创建一个属性节点
href.nodeValue="http://123456.com";//设置href的值为http:123456.com
a.setAttributeNode(href);//通过setAttributeNode把该属性设置到元素节点a上
var div3=document.getElementById("d3");
div3.appendChild(a);//最后把a加入到div3
}
</script>
<body>
<button onclick="add1()">在div中追加一个hr元素</button>
<br />
<button onclick="add2()">在div中追加一个p元素</button>
<br />
<button onclick="add3()">在div中追加一个超链接</button>
</body>练习：
动态创建一个表（javascript）_无忧#的博客-CSDN博客
删除节点
| removeChild | 删除元素节点 |
| removeAttribute | 删除属性节点 |
| removeChild | 删除文本节点 |
样例：
具体代码：
<script>
function removeDiv(){
var parentDiv = document.getElementById("parentDiv1");//先获取该元素的父节点
var div2= document.getElementById("div2");
parentDiv.removeChild(div2);//通过父节点，调用removeChild 删除该节点
}
</script>
<div id="parentDiv1">
<div id="div1">安全的div</div>
<div id="div2">即将被删除的div</div>
</div>
<button onclick="removeDiv()">删除第二个div</button>
<script>
function removeHref(){
var link= document.getElementById("link");
link.removeAttribute("href");
}
</script>
<a id="link" href="http://123456.com">http://123456.com</a>
<br>
<button onclick="removeHref()">删除超链的href属性</button>
<script>
function removeDiv1(){
var parentDiv = document.getElementById("parentDiv2");
var textNode = parentDiv.childNodes[0];
parentDiv.removeChild(textNode);
}
function removeDiv2(){
var parentDiv = document.getElementById("parentDiv2");
parentDiv.innerHTML="";
}
function recover(){
var parentDiv = document.getElementById("parentDiv2");
parentDiv.innerHTML="这里是文本 ";
}
</script>
<style>
button{
display:block;
}
</style>
<div id="parentDiv2">
这里是文本
</div>
<button onclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">恢复内容</button>替换节点
| replaceChild | 替换节点 |
实现步骤：
- 获取父节点
- 创建子节点
- 获取被替换子节点
- 通过replaceChild进行替换
样例：
具体代码：
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function replaceDiv(){
var d4= document.createElement("div");
var text = document.createTextNode("第四个div");
d4.appendChild(text);
var d3 = document.getElementById("d3");
var parentDiv = document.getElementById("parentDiv");
parentDiv.replaceChild(d4,d3);
}
</script>
<button onclick="replaceDiv()">替换第3个div</button>插入节点
| appendChild | 追加节点 |
| insertBefore | 在前方插入节点 |
样例：
具体代码：
<div id="parentDiv">
<div id="d1">第一个div</div>
<div id="d2">第二个div</div>
<div id="d3">第三个div</div>
</div>
<script>
function appendDiv(){
var d4= document.createElement("div");//创建新节点
var text = document.createTextNode("第四个div");//创建文本节点
d4.appendChild(text);//追加节点
var parentDiv = document.getElementById("parentDiv");//获取父节点
parentDiv.appendChild(d4);//父节点后追加节点
}
</script>
<button onclick="appendDiv()">追加第4个div</button>
<script>
function insertDiv(){
var d25= document.createElement("div");
var text = document.createTextNode("第二点五个div");
d25.appendChild(text);
var parentDiv = document.getElementById("parentDiv");
var d3 = document.getElementById("d3");
parentDiv.insertBefore(d25,d3);//insertBefore的第一个参数是新元素，第二个参数是插入位置
}
</script>
<button onclick="insertDiv()">在第二和第三之间，插入第二点五个div</button>关于DOM：HTML_DOM_无忧#的博客-CSDN博客