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>