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

　　　　例子：

 <!DOCTYPE html>
 <html>
     <head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <script src="jquery.js"></script>
         <script type="text/javascript">
             window.onload = function(){
                 var pp = document.createElement("li");
                 var hh1 = document.createElement("h1");
                 var ttext = document.createTextNode("这是新添加的元素节点!");
                 pp.appendChild(hh1);
                 hh1.appendChild(ttext);
                 var ull = document.getElementById("ul");
                 ull.appendChild(pp);
             }
         </script>
         <style type="text/css">
             ul {
                 border: 1px solid ;
                 margin: 100px auto;
                 width: 400px;
                 list-style-type: none;
             }
         </style>
         <title>JS</title>
     </head>
     <body>
         <ul id="ul">
             <li><h1>这是第一行！</h1></li>
             <li><h1>这是第二行！</h1></li>
         </ul>
     </body>
 </html>

　　效果：

　　

　　

　　删：

　　　　查找到将要删除的节点removeNode和该节点的父节点parentNode后

　　　　　　parentNode.removeChild(removeNode)

　　　　例子：

 <!DOCTYPE html>
 <html>
     <head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <script src="jquery.js"></script>
         <script type="text/javascript">
             window.onload = function(){
                 var pp = document.createElement("li");
                 var hh1 = document.createElement("h1");
                 var ttext = document.createTextNode("这是新添加的元素节点!");
                 pp.appendChild(hh1);
                 hh1.appendChild(ttext);
                 var ull = document.getElementById("ul");
                 ull.appendChild(pp);

                 var li1 = document.getElementById("li1");
                 ull.removeChild(li1);
             }
         </script>
         <style type="text/css">
             ul {
                 border: 1px solid ;
                 margin: 100px auto;
                 width: 400px;
                 list-style-type: none;
             }
         </style>
         <title>JS</title>
     </head>
     <body>
         <ul id="ul">
             <li id="li1"><h1>这是第一行！</h1></li>
             <li><h1>这是第二行！</h1></li>
         </ul>
     </body>
 </html>　　

　　效果：

　　　　

　　改：
　　　　查找到某个需要改动的元素节点node，然后对其文本、样式等进行改动

　　　　改动其样式：

　　　　　　node.style.color="red"

　　　　改动其文本：

　　　　　　node.innerHTML="string"

　　　　实例：

 <!DOCTYPE html>
 <html>
     <head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
         <script src="jquery.js"></script>
         <script type="text/javascript">
             window.onload = function(){
                 var pp = document.createElement("li");
                 var hh1 = document.createElement("h1");
                 var ttext = document.createTextNode("这是新添加的元素节点!");
                 pp.appendChild(hh1);
                 hh1.appendChild(ttext);
                 var ull = document.getElementById("ul");
                 ull.appendChild(pp);

                 var li1 = document.getElementById("li1");
                 ull.removeChild(li1);

                 var li2 = document.getElementById("li2");
                 li2.style.color="red";
                 li2.innerHTML="改变了颜色和文本的第二行！"
             }
         </script>
         <style type="text/css">
             ul {
                 border: 1px solid ;
                 margin: 100px auto;
                 width: 400px;
                 list-style-type: none;
             }
         </style>
         <title>JS</title>
     </head>
     <body>
         <ul id="ul">
             <li id="li1"><h1>这是第一行！</h1></li>
             <li id="li2"><h1>这是第二行！</h1></li>
         </ul>
     </body>
 </html>

　　效果：

　　

　　查:

　　　　我们除了应用getElementById()、getElementsByTagName()和getElementClassName()来获取特定的元素节点之余，我们还可以用getAttribute(String attribute) 来获取特定元素节点的某一个属性的值，并通过setAttribute(attrName,attrValue)来改变该属性的值。

　　　　实例：

 <script type="text/javascript">
             window.onload = function(){
                 var pp = document.createElement("li");
                 var hh1 = document.createElement("h1");
                 var ttext = document.createTextNode("这是新添加的元素节点!");
                 pp.appendChild(hh1);
                 hh1.appendChild(ttext);
                 var ull = document.getElementById("ul");
                 ull.appendChild(pp);

                 var li1 = document.getElementById("li1");
                 ull.removeChild(li1);

                 var li2 = document.getElementById("li2");
                 li2.style.color="red";
                 li2.innerHTML="改变了颜色和文本的第二行！"

                 alert(li2.getAttribute("style"));19             }
 </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 是属性值