天天看點

javascript學習筆記:DOM節點概述0x01:0x02:nodeType0x03

dom是javascript操作網頁的接口,全稱為文檔對象模型(document object model)。它的作用是将網頁轉為一個javascript對象,進而可以使用javascript對網頁進行各種操作(比如增删内容)。浏覽器會根據dom模型,将html文檔解析成一系列的節點,再由這些節點組成一個樹狀結構。dom的最小組成機關叫做節點(node),文檔的樹形結構(dom樹)由12種類型的節點組成。本文将主要說明dom節點類型。

html dom 定義了通路和操作 html 文檔的标準方法,dom 将 html 文檔表達為樹結構。(此時應該放上w3c的經典圖)

按照個人的了解,css對應的标簽、js對應的元素、dom對應的節點,三個名稱其實表示同一個内容,隻是在不同的技術名稱不同。

javascript學習筆記:DOM節點概述0x01:0x02:nodeType0x03

一般地,節點至少擁有nodetype、nodename和nodevalue這三個基本屬性。節點類型不同,這三個屬性的值也不相同

  nodetype屬性傳回節點類型的常數值。不同的類型對應不同的常數值,12種類型分别對應1到12的常數值

dom定義了一個node接口,這個接口在javascript中是作為node類型實作的,而在ie8-浏覽器中的所有dom對象都是以com對象的形式實作的。是以,ie8-浏覽器并不支援node對象的寫法

nodename

  nodename屬性傳回節點的名稱

nodevalue

  nodevalue屬性傳回或設定目前節點的值,格式為字元串

  接下來,将按照節點類型的常數值對應順序,從1到12進行詳細說明

  以body元素為例

特性節點

  元素特性節點attribute對應網頁中html标簽的屬性,它隻存在于元素的attributes屬性中,并不是dom文檔樹的一部分。特性節點的節點類型nodetype值是2,節點名稱nodename值是屬性名,nodevalue值是屬性值

  現在,div元素有id="test"的屬性

文本節點

  文本節點text代表網頁中的html标簽内容。文本節點的節點類型nodetype值是3,節點名稱nodename值是'#text',nodevalue值是标簽内容值

  現在,div元素内容為'測試'

cdata節點

  cdatasection類型隻針對基于xml的文檔,隻出現在xml文檔中,表示的是cdata區域,格式一般為

<![cdata[

]]>

  該類型節點的節點類型nodetype的值為4,節點名稱nodename的值為'#cdata-section',nodevalue的值是cdata區域中的内容

實體引用名稱節點

  實體是一個聲明,指定了在xml中取代内容或标記而使用的名稱。 實體包含兩個部分, 首先,必須使用實體聲明将名稱綁定到替換内容。 實體聲明是使用 <!entity name "value"> 文法在文檔類型定義(dtd)或xml架構中建立的。其次,在實體聲明中定義的名稱随後将在 xml 中使用。 在xml中使用時,該名稱稱為實體引用。

  實體引用名稱節點entry_reference的節點類型nodetype的值為5,節點名稱nodename的值為實體引用的名稱,nodevalue的值為null

實體名稱節點

  上面已經詳細解釋過,就不再贅述

  該節點的節點類型nodetype的值為6,節點名稱nodename的值為實體名稱,nodevalue的值為null

處理指令節點

  處理指令節點processinginstruction的節點類型nodetype的值為7,節點名稱nodename的值為target,nodevalue的值為entire content excluding the target

注釋節點

  注釋節點comment表示網頁中的html注釋。注釋節點的節點類型nodetype的值為8,節點名稱nodename的值為'#comment',nodevalue的值為注釋的内容

  現在,在id為mydiv的div元素中存在一個<!-- 我是注釋内容 -->

文檔節點

  文檔節點document表示html文檔,也稱為根節點,指向document對象。文檔節點的節點類型nodetype的值為9,節點名稱nodename的值為'#document',nodevalue的值為null。

文檔類型節點

  文檔類型節點documenttype包含着與文檔的doctype有關的所有資訊。文檔類型節點的節點類型nodetype的值為10,節點名稱nodename的值為doctype的名稱,nodevalue的值為null。

文檔片段節點

  文檔片段節點documentfragment在文檔中沒有對應的标記,是一種輕量級的文檔,可以包含和控制節點,但不會像完整的文檔那樣占用額外的資源。該節點的節點類型nodetype的值為11,節點名稱nodename的值為'#document-fragment',nodevalue的值為null。

dtd聲明節點

  dtd聲明節點notation代表dtd中聲明的符号。該節點的節點類型nodetype的值為12,節點名稱nodename的值為符号名稱,nodevalue的值為null。

在這12種dom節點類型中,有一些适用于xml文檔,有一些是不常用的類型。而對于常用類型,後面會陸續進行詳細介紹,本文對這12種節點類型隻做概述

上一篇: 用例圖
下一篇: 類圖

繼續閱讀