【Javascript】 DOM节点

时间：2014-11-07 00:46:38 阅读：431 评论：0 收藏：0 [点我收藏+]

标签：style blog http io color ar 使用 java sp

　　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>

　　效果：

　　 bubuko.com,布布扣

　　删：

　　　　查找到将要删除的节点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>

　　效果：

　　　　 bubuko.com,布布扣

　　改：
　　　　查找到某个需要改动的元素节点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>

　　效果：

　　 bubuko.com,布布扣

　　查:

　　　　我们除了应用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>