HTML DOM笔记2

节点创建、删除…

1.创建节点
1）创建元素节点

通过createElement 创建一个新的元素节点
接着把该元素节点，通过appendChild加入到另一个元素节点div1中

<div id="d">Hello HTML DOM</div>
<script>
function add(){
  var hr=document.createElement("hr");
  var div1 = document.getElementById("d");
  div1.appendChild(hr);
}
</script>

2）创建文本节点

首先创建一个元素节点p (p是p标签，不是随便命名的变量名)
接着通过createTextNode创建一个内容节点text
把text加入到p
再把p加入到div

<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>

3）创建属性节点

首先创建一个元素节点a
接着创建一个内容节点content
把content加入到a
然后通过createAttribute创建一个属性节点 href
设置href的值为http:12306.com
通过setAttributeNode把该属性设置到元素节点a上
最后把a加入到div

<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>

2.删除节点
1）删除元素节点

1. 先获取该元素的父节点
2. 通过父节点，调用removeChild 删除该节点

<script>
function removeDiv(){
  var parentDiv = document.getElementById("parentDiv");
  var div2= document.getElementById("div2");
  parentDiv.removeChild(div2);
}
 
</script>

2）删除文本节点

1. 通过childNodes[0] 获取文本节点
   注:children[0] 只能获取第一个子元素节点，不能获取文本节点
2. 通过removeChild删除该文本节点
   但是这种方式比较麻烦，一般都是直接通过innerHTML设置为空即可。
   注: 通过innerHTML=""的方式，同样会导致文本子节点被删除。

<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="";
}
 
</script>
 

3）删除属性节点

1. 先获取该元素节点
2. 元素节点，调用removeAttribute删除指定属性节点

function removeHref(){
  var link= document.getElementById("link");
  link.removeAttribute("href");
}
 
</script>

3.替换节点

1. 获取父节点
2. 创建子节点
3. 获取被替换子节点
4. 通过replaceChild进行替换
   注: replaceChild 第一个参数是保留的节点，第二个参数是被替换的节点

<script>
  
function replaceDiv(){
  var parentDiv = document.getElementById("parentDiv");
 
  var d2=  document.createElement("div");
  var text = document.createTextNode("第二个div");
  
  d2.appendChild(text);
  
  var d1 = document.getElementById("d3");
  
  parentDiv.replaceChild(d2,d1);
}
 
</script>

4.插入节点
1）追加节点

追加节点一定是把新的节点插在最后面

1. 创建新节点
2. 获取父节点
3. 通过appendChild追加

function appendDiv(){
  var d3=  document.createElement("div");
  var text = document.createTextNode("第三个div");
  d3.appendChild(text);
   
  var parentDiv = document.getElementById("parentDiv");
   
  parentDiv.appendChild(d3);
}
  
</script>

2)在前方插入节点

1. 创建新节点
2. 获取父节点
3. 获取需要加入的子节点
4. 通过insertBefore插入
   注: insertBefore的第一个参数是新元素，第二个参数是插入位置

<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>