【JavaScript】文档对象模型（DOM）

一、简介：   

       文档对象模型（Document  Object  Model，简称DOM），是W3C组织推荐的针对HTML和XML文档的应用程序接口。描绘了一个层次化的节点树。运行开发人员添加、删除、修改页面的某一部分。

                                        

二、元素节点方法：

                                 

       使用JavaScript进行编程时，获取文档的元素是使用DOM的基本方法。下面举例说明一下获取元素的基本方法：getElementById()和getElementByTagName()。

1、通过ID获取元素：

      getElementById()方式是使用非常频繁的一个方法，它获取HTML文档的一个特定元素并且返回一个对他的引用。为了获取元素，它必须具备一个ID属性。

<span style="font-size:18px;"><div id="box">      <p id="p1">          大家好，我是P1，嘻嘻</p>      <p id="p2">          大家好，我是P2，嘻嘻</p>  </div>    window.onload = function () {          var str = document.getElementById("p1").innerHTML;          alert(str);        //弹出    大家好，我是P1，嘻嘻     }  </span>

2、通过标签名获取属性：

      当只获取一个元素时，getElementById()方法比较适合，但是当我同时需要获取一个元素时，就会知道getElemengtByTagName更合适。getElemengtByTagName是通过数组或者列表的格式返回指定标签类型的所有元素。

<span style="font-size:18px;"><div id="box">      <p id="p1">          我是第一个P</p>      <p id="p2">          我是第二个P</p>  </div>    window.onload = function () {          var str = document.getElementsByTagName("p")[1].innerHTML;          alert(str);        //输出  我是第二个P，因为获取的是索引为1的P，索引从0开始      }        window.onload = function () {          var strr = document.getElementsByTagName("p");          for (var i = 0; i < strr.length; i++) {              alert(arr[i].innerHTML);          }      }    window.onload = function () {          var node = document.getElementById("div1");       var node1 = document.getElementsByTagName("p")[1];    //从获取到的元素再获取          alert(node1.innerHTML);  }  </span>

三、DOM节点：

       1、node节点属性：节点可以分为元素节点、属性节点、文本节点，而这些节点又有三个非常有用的属性，分别为：nodeName、nodeType、nodeValue。

               

       2、层次节点属性：节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。        当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。

                       

四、节点操作

        DOM可以创建节点、复制节点、插入节点、删除节点、替换节点。

                    

1、创建节点

<span style="font-size:18px;"><div id="box">              <p id="p1">我是P1</p>              <p id="p2">我是P2</p>          </div>        window.onload = function () {              var textNode = document.createTextNode("<p>我是最新创建的节点</p>");              document.getElementById("box").appendChild(textNode);          }  </span>

2、删除节点

<span style="font-size:18px;"><div id="box">              <p id="p1">我是P1</p>              <p id="p2">我是P2</p>          </div>        window.onload = function () {              var div1 = document.getElementById("box");              div1.removeChild(document.getElementById("p2"));          }  </span>

3、替换节点：

<span style="font-size:18px;"><div id="box">              <p id="p1">我是P1</p>              <p id="p2">我是P2</p>          </div>        window.onload = function () {              var div1 = document.getElementById("box");              var span1 = document.createElement("span");              span1.textContent = "我是一个新建的span";              div1.replaceChild(span1,document.getElementById("p2"));          }  </span>

4、插入节点：

<span style="font-size:18px;"><div id="box">              <p id="p1">我是P1</p>          </div>        window.onload = function () {              var pNode1 = document.createElement("p");              pNode1.textContent = "insertBefore插入的节点";              var pNode2 = document.createElement("p");              pNode2.textContent = "appendChild插入的节点";              document.getElementById("box").appendChild(pNode2);              document.getElementById("box").insertBefore(pNode1,document.getElementById("p1"));          }</span>

五、小结：

        JavaScript通过DOM来操作XML中的节点。浏览器自带的解析器把XML翻译成JavaScript可访问的DOM对象，这样能大大方便JavaScript语言操作XML文档。