javascript DOM中的節點層次和節點類型概述

針對JS高級程序設計這本書，主要是理解概念，大部分要點源自書內。寫這個主要是當個筆記加總結
存在的問題請你們多多指正！
由於DOM這方面的對象方法操做性都特別強，可是邏輯很簡單，因此就沒有涉及到實際的代碼。
另外這篇不包括DOM2,DOM3的內容

DOM

文檔對象模型，針對HTML和XML文檔的一個API。描繪了一個層次化的結點樹，循序開發人員添加，移除修改頁面上的一部分。

1節點層次

DOM把文檔描繪成一個由多層節點構成的結構。節點有不一樣的類型。節點之間的關係構成了層次。

文檔節點是每一個文檔的根節點(Document節點)，html節點被稱爲文檔元素。文檔元素是最外層的元素，文檔中的其餘全部元素都包含在文檔元素中。HTML頁面中，文檔元素始終都是html元素。

1.1 Node類型

DOM1級定義了一個node結構，該結構將由DOM中的全部節點類型實現。這個node接口在javascript中是做爲Node類型實現的。除了ie之外全部的瀏覽器均可以訪問到這個類型。

javascript中的全部節點類型都繼承自node類型，所以節點們都共享者相同的基本屬性和方法。

每一個節點都有一個nodetype屬性，用於表現節點的類型，節點類型有在Node類型的中定義的12個數值來表示，任何節點都必須是其中之一。

NodeType	Named Constant
1	ELEMENT_NODE
2	ATTRIBUTE_NODE
3	TEXT_NODE
4	CDATA_SECTION_NODE
5	ENTITY_REFERENCE_NODE
6	ENTITY_NODE
7	PROCESSING_INSTRUCTION_NODE
8	COMMENT_NODE
9	DOCUMENT_NODE
10	DOCUMENT_TYPE_NODE
11	DOCUMENT_FRAGMENT_NODE
12	NOTATION_NODE

1.1.1 nodeName和nodeValue屬性

節點類型		nodeName 返回	nodeValue返回
1	Element	元素名	null
2	Attr	屬性名稱	屬性值
3	Text	text	節點的內容
4	CDATASection	cdata-section	節點的內容
5	EntityReference	實體引用名稱	null
6	Entity	實體名稱	null
7	ProcessingInstruction	target	節點的內容
8	Comment	comment	註釋文本
9	Document	document	null
10	DocumentType	文檔類型名稱	null
11	DocumentFragment	document 片斷	null
12	Notation	符號名稱	null

1.1.2 節點間關係

節點關係的屬性

• childNodes
  • firstChild
  • lastChild
• parentNodes
• nextSibling
• previousSibling
• owenerDocement
• hasChildNodes

其中childNodes會返回一個NodeList的動態對象，雖然不是Array類型的實例，一樣也能夠用item()方法，也有length屬性。這個NodeList的列表中每一個節點都是彼此的兄弟節點，能夠調用nextSibling,previousSibling屬性訪問他們的兄弟節點。

ownerDocument是直接頂到頂，去找頂端的文檔節點。

1.1.3 操做節點

節點操做的方法：

• appendChild()
  • 一個參數，你新加入的節點，默認放到最後
  • 若是這個新加入的節點在這個父節點中存在，則將她從原來位置刪除而後添加到末尾
• insertBefore()
  • 兩個參數，要插入的節點和做參照的節點
  • 被插入的節點會變成參照節點的前面的同胞節點
  • 若參照物是null，則和appendChild同樣
  • 第二個參數能夠是element.firstChild或者element.lastChild，這樣能夠插入element節點的首節點或者最後一個節點的前一個節點
• replaceChild()
  • 兩個參數，要插入的節點和被替換的節點
  • 返回值是被替換的節點，並從文檔中剔除

1.1.4 其餘方法

• cloneNode()
  • 參數只有一個布爾值
  • true表示深層次複製，複製子節點樹
  • false表示淺層複製，只複製節點自己，複製後返回接點歸文檔全部，但她沒有父節點，是孤兒，能夠經過appendChild(),insertBefore()，replaceChild()等把他插進去
  • 他不會複製節點的JS屬性和事件，IE會出BUG，因此最好複製以前移除BUG

---

1.2 Document類型

document對象表示整個HTML界面，並且document對象是window對象的一個屬性，因此能夠直接調用

1.2.1文檔子節點

只有一個html元素

• childNodes[0],firstChild,dicumentElement都表示一個值，指向html元素

document的屬性

• documentElement 指向html元素
• body 指向body元素
• doctype 指向doctype屬性

1.2.2 文檔信息

document關於自身信息的屬性：

• title 包含着title元素中的文本
• URL 完整的URL
• domain 網頁的域名，三個關於URL的屬性只有他能夠修改，可是不能設置爲URL不包含的域
• refierrer 連接到當前頁面的URL ，沒有則返回NULL

1.2.3 查找元素

取得元素的對象方法：

• getElementById()
  • 只接受一個參數，區分大小寫
  • 若是有多個同樣的ID則只返回第一個
• getElementByTagName()
  • 接受一個參數，元素的標籤名
  • 在HTML中返回的是HTMLCollection對象，也是一個動態集合，和NodeList很是類似，具備item()方法
  • 在參數爲*時返回全部的標籤
  • HTMLCollection對象
    • item() 能夠運用[]的方法在其中加入name屬性的字符串返回那一項
    • nameItem() 參數能夠添加其中的name而後返回HTMLCollection中的name爲參數的那一項
• getElementByName()
  • 只能找到帶有name特性的子節點
  • 一樣返回的事HTMLCollection對象
    • nameItem()只返回第一個HTMLCollection對象，由於HTMLCollection對象裏面的項的name都相同

1.2.4 特殊集合

document還有一些特殊的集合，這些集合都是HTMLCollection對象

• anchors
• applets
• forms
• images
• links

1.2.5 文檔寫入

• write()
• writelen()
  • 上兩個方法都是接受一個字符串參數，即要寫入到輸出流中的文本。ln回家一個換行符，內容都原樣加入
  • 加入的時候要當心，由於自己JS腳本就帶了對script標籤，因此轉義的時候容易把JS自帶的開頭和算到一塊兒，因此就結束了。因此要變成</script>
• open()
• close()

---

1.3 Element類型

Element類型用來表示文檔中的元素，提供了對元素標籤名、子節點及特性的訪問

• nodeName屬性
• tagName屬性
  • 上兩個會返回元素的標籤名，他倆返回的是相等的.tagName主要是爲了清晰地表達。

1.3.1 HTML元素

HTML元素都有HTMLElement類型表示，不是經過這個類型，也是經過他的子類型來表示。HTMLElement類型直接繼承Element並添加了一些屬性，這些在HTML文檔上都有體現

• id
• title
• lang 元素內容的語言代碼，較少使用
• dir 語言的方向 ltr 或者 rtl
• className

1.3.2 操做特性

三個主要方法

• getAttribute()
  • 傳遞給方法的特姓名與是實際的特姓名應該是一致的，class不要填className
  • 一樣能夠取到自定義特性
  • 特性不須要區分大小寫
  • 自定義特性根據H5規定須要加data-前綴
  • 訪問style特性值會返回CSS文本，而直接訪問特性值得屬性來訪問會返回一個對象
  • 訪問onclick這類時間是會返回相應代碼的字符串，而直接訪問.屬性這樣的會被賦值
• setAttribute()
  • 接受兩個參數，特姓名和特性值
  • 若是特性名已存在，則這個操做將會覆蓋原來的特性值
  • 能夠設置自定義屬性，可是特姓名會被轉爲小寫
• removeAttribute()
  • 傳一個參數那就是特姓名，執行完了就會刪除他

1.3.3 attributes 屬性

Element類型是使用attributes屬性的惟一一個DOM節點類型。attritubutes屬性中包含一個NameNodeMap ，與NodeList相似，也是一個動態集合。下面是attributes對象的方法

• getNameItem()：返回nodeName屬性等於參數的節點
• removeNamedItem() : 刪除列表中nodeName等於參數的節點
• setNameItem(node) : 向列表裏添加節點，一節點的nodeName屬性爲索引
• item(pos) :返回位於數字pos位置處的節點

這個attributes屬性費老勁了，除了遍歷能用上，感受別的一點用不上啊，直接getAttributes(), setAttribute(), removeAttribute() 就完事了，你在這墨跡啥呢。

function outputAttritubes(element){
  var pairs = new Array(),
      attrName,
      attrValue,
      i,
      len
  for(i = 0, len = element.attributes.length; i < len; i++ ){
    attrName = element.attributes[i].nodeName
    attrValue = element.attributes[i].nodeValue
    pairs.push(attrName + '=\''+attrValue + '\'')
  }

1.3.4建立元素

• document.creatElement()
  • 裏面能夠放標籤元素，返回的就是一個空的元素，在ie裏也能夠放一些HTML語言，直接建立出來

1.3.5 元素的子節點

在除了IE裏，文本節點也算上，因此空格也算是文本節點。因此在chilNodes屬性中就不會顯示正確的節點。若是須要對element類型的節點進行操做的話最好添加一個element.childNodes[i].nodeType == 1來判斷。不然會默認算上文本節點。

---

1.4 Text類型

文本節點由Text類型表示，包含的是能夠按照字面解釋的純文本內容。純文本中能夠包含轉移後HTML字符，可是不能包含HTML代碼，TEXT節點的屬性：

• nodeValue
• data
  • 均可以訪問text節點中包含的文本。
• length：保存着字符的數目

下面的方法能夠對文本節點進行操做

• appendDate(text)：將text添加到文章的末尾
• deleteDate(offset, count)： 從offset指定的位置開始刪除count個字符
• insertData(offset, text)： 從offset指定的位置插入text
• replaceData(offset, count, text)：用text替換從offset位置指定到的位置offset+count的位置
• splitText(offset)：從offset指定的位置將文本節點分紅兩個文本節點
• substringData(offset, count)： 提取從offset指定的位置開始到offset_count爲止的字符串

1.4.1 建立文本節點

• doucument.createTextNode()
  • 參數是要插入裏面的文本，能夠按照HTML格式進行編碼
  • 若是一個元素中有多個文本子節點，則讓他們鏈接起來，中間沒有空格

1.4.2 規範化文本節點

• normalize()：在父元素中調用，則會將全部文本節點合併成一個及誒單，節點的nodeValue 是每一個子節點相加

1.4.3 分割文本節點

• splitText() 方法 將從第參數個開始分割，而後返回一個新的文本節點包含剩下的內容，該文本節點與原來節點的parentNode相同