【Javascript】 DOM节点
HTML文檔中一切都是節點！
整個文檔是文檔節點；
注釋是注釋節點；
每一個HTML元素都是一個元素節點；
元素內的文本內容是文本節點；
連元素的每一個屬性都是一個屬性節點。
看到這些是不是感覺很熟悉，沒錯，就像JS中一切都是對象一樣，HTML文檔中一切都是節點。
??我們可以使用各種訪問節點的方法，對任意一個節點進行增刪改查等等操作。從而達到對整個頁面的各種操作。
增：
如果要向HTML添加一個元素，需要先創建一個元素(元素節點)，然后再將其追加到已有的元素上。
創建元素節點newNode：
var newNode = document.createElement(String tagName)
創建元素內的文本節點：
var textNode = document.createTextNode(String data)
把文本節點textNode添加到新建的元素節點newNode上：
newNode.appendChild(textNode)
把新建的元素節點newNode添加到已存在的元素節oldNode點末尾：
oldNode.appendChild(newNode)
或者把新建的元素節點newNode添加到已存在的元素節點oldNode的某個子節點childNode前：
oldNode.insertBefore(newNode,childNode)
例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <script src="jquery.js"></script> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 var pp = document.createElement("li"); 9 var hh1 = document.createElement("h1"); 10 var ttext = document.createTextNode("這是新添加的元素節點!"); 11 pp.appendChild(hh1); 12 hh1.appendChild(ttext); 13 var ull = document.getElementById("ul"); 14 ull.appendChild(pp); 15 } 16 </script> 17 <style type="text/css"> 18 ul { 19 border: 1px solid ; 20 margin: 100px auto; 21 width: 400px; 22 list-style-type: none; 23 } 24 </style> 25 <title>JS</title> 26 </head> 27 <body> 28 <ul id="ul"> 29 <li><h1>這是第一行！</h1></li> 30 <li><h1>這是第二行！</h1></li> 31 </ul> 32 </body> 33 </html>效果：
刪：
查找到將要刪除的節點removeNode和該節點的父節點parentNode后
parentNode.removeChild(removeNode)
例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <script src="jquery.js"></script> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 var pp = document.createElement("li"); 9 var hh1 = document.createElement("h1"); 10 var ttext = document.createTextNode("這是新添加的元素節點!"); 11 pp.appendChild(hh1); 12 hh1.appendChild(ttext); 13 var ull = document.getElementById("ul"); 14 ull.appendChild(pp); 15 16 var li1 = document.getElementById("li1"); 17 ull.removeChild(li1); 18 } 19 </script> 20 <style type="text/css"> 21 ul { 22 border: 1px solid ; 23 margin: 100px auto; 24 width: 400px; 25 list-style-type: none; 26 } 27 </style> 28 <title>JS</title> 29 </head> 30 <body> 31 <ul id="ul"> 32 <li id="li1"><h1>這是第一行！</h1></li> 33 <li><h1>這是第二行！</h1></li> 34 </ul> 35 </body> 36 </html>效果：
?
改：
查找到某個需要改動的元素節點node，然后對其文本、樣式等進行改動
改動其樣式：
node.style.color="red"
改動其文本：
node.innerHTML="string"
實例：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <script src="jquery.js"></script> 6 <script type="text/javascript"> 7 window.onload = function(){ 8 var pp = document.createElement("li"); 9 var hh1 = document.createElement("h1"); 10 var ttext = document.createTextNode("這是新添加的元素節點!"); 11 pp.appendChild(hh1); 12 hh1.appendChild(ttext); 13 var ull = document.getElementById("ul"); 14 ull.appendChild(pp); 15 16 var li1 = document.getElementById("li1"); 17 ull.removeChild(li1); 18 19 var li2 = document.getElementById("li2"); 20 li2.style.color="red"; 21 li2.innerHTML="改變了顏色和文本的第二行！" 22 } 23 </script> 24 <style type="text/css"> 25 ul { 26 border: 1px solid ; 27 margin: 100px auto; 28 width: 400px; 29 list-style-type: none; 30 } 31 </style> 32 <title>JS</title> 33 </head> 34 <body> 35 <ul id="ul"> 36 <li id="li1"><h1>這是第一行！</h1></li> 37 <li id="li2"><h1>這是第二行！</h1></li> 38 </ul> 39 </body> 40 </html>效果：
查:
我們除了應用getElementById()、getElementsByTagName()和getElementClassName()來獲取特定的元素節點之余，我們還可以用getAttribute(String attribute) 來獲取特定元素節點的某一個屬性的值，并通過setAttribute(attrName,attrValue)來改變該屬性的值。
實例：
1 <script type="text/javascript"> 2 window.onload = function(){ 3 var pp = document.createElement("li"); 4 var hh1 = document.createElement("h1"); 5 var ttext = document.createTextNode("這是新添加的元素節點!"); 6 pp.appendChild(hh1); 7 hh1.appendChild(ttext); 8 var ull = document.getElementById("ul"); 9 ull.appendChild(pp); 10 11 var li1 = document.getElementById("li1"); 12 ull.removeChild(li1); 13 14 var li2 = document.getElementById("li2"); 15 li2.style.color="red"; 16 li2.innerHTML="改變了顏色和文本的第二行！" 17 18 alert(li2.getAttribute("style"));19 } 20 </script>效果：
除此之外，我們還可以通過某個節點的nodeName、nodeType和nodeValue獲取節點的更多信息：
nodeName屬性規定節點的名稱:
-
- nodeName 是只讀的
- 元素節點的 nodeName 與標簽名相同
- 屬性節點的 nodeName 與屬性名相同
- 文本節點的 nodeName 始終是 #text
- 文檔節點的 nodeName 始終是 #document
注釋：nodeName 始終包含 HTML 元素的大寫字母標簽名。
nodeValue 屬性規定節點的值:
-
- 元素節點的 nodeValue 是 undefined 或 null
- 文本節點的 nodeValue 是文本本身
- 屬性節點的 nodeValue 是屬性值
nodeValue 屬性規定節點的值:
-
- 元素節點的 nodeValue 是 undefined 或 null
- 文本節點的 nodeValue 是文本本身
- 屬性節點的 nodeValue 是屬性值
轉載于:https://www.cnblogs.com/linxiong945/p/4080240.html
總結
以上是生活随笔為你收集整理的【Javascript】 DOM节点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： socket通信简单介绍
- 下一篇： Cocos2d JS 之消灭星星(九)