JavaScritpt的DOM初探之Node(一) · JS重塑學習

DOM(文檔對象模型）是針對HTML和XML文檔的一個API。DOM描繪了一個層次化的節點樹，允許開發人員添加，移除和修改頁面的某一部分。DOM脫胎于微軟公司的DHTLM（動態HTML），但是現在它已經成為表現和操作頁面標記的真正跨平臺，語言中立的方式。 [JavaScript](http://lib.csdn.net/base/18 "JavaScript知識庫")和DOM通常被視為一個單一的實體,因為JavaScript是最常見的用于此目的(與web上的內容交互)。使用DOM API訪問、遍歷和操作HTML和XML文檔。 ![](https://box.kancloud.cn/2016-05-06_572c45a8071d9.jpg) 典型的DOM的基本輪廓層次結構(簡化) 這里有一個關于DOM的一些值得注意的事情: * 窗口對象作為全局對象,您只需鍵入“窗口”訪問它。在這個對象的所有執行JavaScript代碼。像所有對象的屬性和方法。 * 屬性是一個變量存儲在一個對象。網頁上創建的所有變量authomatically成為窗口對象的屬性。 * 一個方法是存儲在一個對象的函數。以來所有的功能都存儲在窗口對象(至少)下他們都可以稱為“方法”。 * DOM創建一個hierarcy對應于每個web文檔的結構。這種層次結構是由節點。有幾種不同類型的DOM節點,最重要的是“元素”,“文本”和“文檔”。 * 一個“元素”節點表示一個元素在一個頁面。如果你有一個段落元素(“”),那么它可以通過訪問DOM節點。 * “文本”節點表示一個頁面內所有文本(元素)。所以如果你的段落的文本可以直接通過DOM訪問。 * 文檔的節點代表整個文檔。 (這是DOM層次/樹的根節點)。 * 還要注意,元素屬性是DOM節點本身。 * 每個布局引擎實現DOM標準略有不同。例如,[火狐](http://www.mozilla.com/en-US/firefox/)使用web瀏覽器[壁虎](http://en.wikipedia.org/wiki/Gecko_(layout_engine))布局引擎,有一個很好的實現(雖然不是完全內聯與W3C規范)[Internet Explorer](http://www.microsoft.com/windows/products/winfamily/ie/default.mspx),它使用[三叉戟](http://en.wikipedia.org/wiki/Trident_(layout_engine))布局引擎聞名車和不完整的實現,導致web開發社區內的多痛苦! Node類型: dom1級定義了一個NODE接口，該接口將由DOM中的所有節點類型實現。這個Node接口在javaScript中是作為node類型實現的，除了IE之外，在其他所有瀏覽器中都可以訪問到這個類型。javaScript中的所有節點都繼承自NODE類型，因此所有節點類型都共享著相同的基本屬性和方法。每個節點都有一個nodeType屬性，用于表明節點的類型。節點類型由在node類型中定義的下列12個數值常量來表示，任何節點類型必居其一： ~~~ Node.ELEMENT_NODE(1); Node.ATTRIBUTE_NODE(2); Node.TEXT_NODE(3); Node.CDATA_SECTION_NODE(4); Node.CDATA_REFERENCE_NODE(5); Node.ENTITY_NODE(6); Node.PROCESSING_INSTRUCTION_NODE(7); Node.COMMENT_NODE(8); Node.DOCUMENT_NODE(9); NODE.DOCUMENT_TYPE_NODE(10); Node.DOCUMENT_FRAGMENT_NODE(11); Node.NOTATION_NODE(12) ~~~ 通過比較上面這些常量，可以很容易地確定節點的類型，例如： ~~~ <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gbk"> <title>test for javascript</title> </head> <body> <p id="a">漫步人生路！</p> <p> <script type="text/javascript"> var someNode=document.getElementById('a'); alert(someNode.nodeType); </script> </body> </html> ~~~ 要了解Node節點的信息可以使用nodeName和nodeValue這兩個屬性: ~~~ <script type="text/javascript"> var someNode=document.getElementById('a'); alert(someNode.nodeType); alert(someNode.nodeName); //是元素的標簽名 <p> alert(someNode.nodeValue); //要堅持node是不是一個元素只要看nodeValue的值為null就可以了 </script> ~~~