DOM【三】

最新推荐文章于 2024-12-30 17:32:54 发布

转载最新推荐文章于 2024-12-30 17:32:54 发布 · 154 阅读

DOM 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用DOM（文档对象模型）进行各种操作，包括创建、删除、替换和插入节点等。通过具体的HTML示例展示了如何创建不同类型的节点，如子节点、文本节点和属性节点，并演示了如何进行删除操作。

创建子节点

<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
  var hr=document.createElement("hr");
  var div1 = document.getElementById("d");
  div1.appendChild(hr);
}
</script>
 
<button "add()">在div中追加一个hr元素</button>
 
</html>

创建文本节点

<html>
<div id="d">Hello HTML DOM</div>
<script>
function add(){
 
  var p=document.createElement("p");
  var text = document.createTextNode("这是通过DOM创建出来的<p>");
  p.appendChild(text);
 
  var div1 = document.getElementById("d");
  div1.appendChild(p);
 
}
</script>
  
<button "add()">在div中追加一个p元素</button>
  
</html>

创建属性节点

<html>
<div id="d">Hello HTML DOM<br></div>
 
<script>
function add(){
  
  var a=document.createElement("a");
  var content = document.createTextNode("http://12306.com");
  a.appendChild(content);
 
  var href = document.createAttribute("href");
  href.nodeValue="http://12306.com";
  a.setAttributeNode(href);
 
  var div1 = document.getElementById("d");
  div1.appendChild(a);
}
</script>
   
<button "add()">在div中追加一个超链</button>
   
</html>

删除节点

<script>
function removeDiv(){
  var parentDiv = document.getElementById("parentDiv");
  var div2= document.getElementById("div2");
  parentDiv.removeChild(div2);
}
 
</script>
 
<div id="parentDiv">
  <div id="div1">安全的div</div>
  <div id="div2">即将被删除的div</div>
</div>
 
<button "removeDiv()">删除第二个div</button>

删除属性节点

<script>
function removeHref(){
  var link= document.getElementById("link");
  link.removeAttribute("href");
}
 
</script>
 
<a id="link" href="http://12306.com">http://12306.com</a>
 
<br>
<button "removeHref()">删除超链的href属性</button>

删除文本节点

<script>
 
function removeDiv1(){
  var parentDiv = document.getElementById("parentDiv");
  var textNode = parentDiv.childNodes[0];
  parentDiv.removeChild(textNode);
}
function removeDiv2(){
  var parentDiv = document.getElementById("parentDiv");
  parentDiv.innerHTML="";
}
function recover(){
  var parentDiv = document.getElementById("parentDiv");
  parentDiv.innerHTML="这里是文本 ";
}
 
</script>
 
<style>
button{
display:block;
}
</style>
 
<div id="parentDiv">
   这里是文本
 
</div>
 
<button "removeDiv1()">通过removechild删除div下的文本节点</button>
<button "removeDiv2()">通过innerHTML让内容置空</button>
<button "recover()">恢复内容</button>

替换节点

<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 "replaceDiv()">替换第3个div</button>

插入节点

<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 "appendDiv()">追加第4个div</button>

前方插入节点

<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>
   
<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);
}
  
</script>
   
<button "insertDiv()">在第二和第三之间，插入第二点五个div</button>