宿主對象即瀏覽器提供的對象，主要包括DOM對象和BOM對象。 一、DOM源起 1.SGML、XML和XHTML SGML(標準通用標記語言)是定義使用標簽來表示數據的標記語言的語法。 - 標簽由一個小於號和一個大於號之間的文本組成，如<title> - 標簽分為起始標簽和結束標簽，分別表示一個特定區 ...
宿主對象即瀏覽器提供的對象，主要包括DOM對象和BOM對象。
一、DOM源起
1.SGML、XML和XHTML
SGML(標準通用標記語言)是定義使用標簽來表示數據的標記語言的語法。
- 標簽由一個小於號和一個大於號之間的文本組成，如<title>
- 標簽分為起始標簽和結束標簽，分別表示一個特定區域的開始和這個特定區域的結束，如<title>標題</title>
- 特性是定義在起始標簽內的值。如<img src="pircutre.jpg">，src就是其特性
HTML遵循SGML標記語言的語法,它是的SGML一種應用。或者說，SGML用來定義HTML的文檔類型定義(DTD)。SGML還用來編寫XML的DTD。
XML對SGML的語法做了更細緻和嚴謹的擴展。
- SGML的奇怪語法:
- 某些標簽不語序出現結束標簽，如HTML中的<img>標簽，否則會出現錯誤。
- 某些標簽的結束標簽可以不寫，如HTML中的<p>標簽。
- 標簽可以以任何順序嵌套，如<div><span></div></span>。
- 某些特性必須包含值，如<img src="picture.jpg">。
- 某些特性不要求一定有值，如<td nowrap>。
- 定義特性的兩邊有沒有加雙引號都是可以的，如<img src=picture.jpg>也是允許的。
- XML去掉了許多SGML中的隨意語法，並且規定了新的語法:
- 任何的起始標簽都必須有一個結束標簽。
- 可以採用另一種簡化語法，即一個標簽同時表示起始標簽和結束標簽，即<tag />，如<br />,<hr />。
- 標簽必須按合適的順序嵌套。就近原則書寫結束標簽。
- 所有的特性都必須有值。
- 所有的特性都必須在值得周圍加上雙引號。
XML衍生出了MathML、SVG、RDF、RSS等等。同時，HTML被改進為XHML，即遵循XML語法的HTML。XHMTL被稱為嚴格模式。
2.XML的API
XML定義了HTML的數據排版和解析方式。根據XML語言規範，需要制定API來實現對這些數據的操作和訪問。
DOM模型就是最為流行的針對XML的基於樹的API。它將XML解析為一顆有節點的樹模型，並使用一系列互相關聯的對象來表示XML的代碼。從而能夠指導開發增刪改查等具體API的實現。
DOM是語言無關的API，它並不與其它語言綁定。但對於JavaScript而言，DOM被習慣理解成API集合。
HTML DOM （文檔對象模型）
- 當網頁被載入時，瀏覽器會創建頁面的文檔對象模型（Document Object Model）。
- HTML DOM 模型被構造為對象的樹。通過 HTML DOM，可訪問 HTML 文檔的所有元素。
- <html>
<head>
<title>...</title>
...
</head>
<body>
<div>
...
</div>
...
</body>
</html>
- 通過可編程的文檔對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。即Javascript可以操作四個內容:元素、屬性、樣式和事件。html元素、html屬性、css樣式、事件。html元素、元素屬性、元素樣式和事件。html元素、html屬性、css樣式、事件。
- HTML DOM 是瀏覽器對象BOM的一個屬性。
3.DOM node介面和屬性訪問
DOM定義了樹節點（node）的層次和其Node介面，以及這些節點的類型和其數字標號。這些常量會在選擇節點之後以屬性的方式查詢。
介面名稱
|
釋義
|
屬性訪問方式
|
數字表示
|
Element
|
表示起始標簽和結束標簽之間的內容。這是唯一可以同時包含特性和子節點的節點類型。
|
Node.ELEMENT_NODE
|
1
|
Attr
|
代表一對特姓名和特性值。這個節點類型不能包含子節點。 |
Node.ATTRIBUTE_NODE
|
2
|
Text
|
代表XML文檔中的在其實標簽和結束標簽之間的，或者CData Seciron內的普通文本。這個節點類型不能包含子節點。 |
Node.TEXT_NODE
|
3
|
CDataSection
|
<![CDATA[]]>的對象表現形式。這個幾點類型僅能包含文本節點Text作為子節點。 |
Node.CDATA_SECTION_NODE
|
4
|
Entity
|
表示在DTD中的一個實體定義，例如<!ENTITY foo "foo">。這個節點類型不能包含子節點。 |
Node.ENTITY_NODE
|
5
|
EntityReference
|
代表一個實體引用，例如"。這個節點類型不能包含子節點。 |
Node.ENTITY_REFERENCE_NODE
|
6
|
ProcessingInstruction
|
代表一個PI。這個節點類型不能包含子節點。 |
Node.PROCESSING_INSTRUCTION_NODE
|
7
|
Comment
|
代表XML註釋。這個節點類型不能包含子節點。 |
Node.COMMENT_NODE
|
8
|
Document
|
代表在DTD中定義的記號。這個很少用到。 |
Node.DOCUMENT_NODE
|
9
|
| DocumentType | 最頂層的節點，所有的其它節點都是附屬於它的。 | Node.DOCUMENT_TYOE_NODE | 10 |
| DoucmentR=Frament | DTD引用(使用<!DOCTYPE>)，如<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">。它不能包含子節點。 | Node.DOCUMENT_FRAMENT_NODE | 11 |
Notation
|
可以像Document一樣來保存其它節點。 |
Node.NOTATION_NODE
|
12
|
4.節點特性和方法
Node介面定義了所有節點類型都包含的特性和方法。
| 特性/方法 | 類型/返回類型 | 說明 |
| nodeName | String | 節點的名字 |
| nodeValue | String | 節點的值 |
| nodeType | Number | 節點的類型常量值 |
| ownerDocument | Document | 節點的所屬文檔 |
| childNodes |
NodeList | 節點的所有子節點列表 |
| firstChild | Node | 子節點列表的第一個節點 |
| lastChild | Node | 子節點列表的最後一個節點 |
| hasChildNodes() | Boolean | 是否包含子節點 |
| appendChild(node) | Node | 將node添加到childNodes末尾 |
| removeChild(node) | Node | 從childNodes中刪除node |
| replaceChild(newnode,oldnode) | Node | 將childNodes中的oldnode替換成newnode |
| insertBefore(newnode, refnode) | Node | 在childNodes中的refnode之前插入newnode |
| previousSibling | Node | 指向前一個兄弟節點，如果這個節點就是第一個兄弟節點，那麼該值為null |
| nextSibling | Node | 指向後一個兄弟節點，如果這個節點就是最後一個兄弟節點，那麼該值為null |
| attributes | NamedNodeMap | 包含了代表一個元素的特性的Attr對象，僅用於Element節點 |
5.HTML DOM
任何基於XML的語言，如XHTML和SVG，因為它們遵循XML語法，所以可以使用上述的Node介面操作。然而很多語言會繼續定義它們自己的DOM來擴展XML以提供特定功能。
開發XML DOM的同時，W3C還一起開發了針對XHTML(以及HTML)的DOM。這個DOM定義了一個HTMLDocument一個HTMLElement作為實現基礎。
每個HTML元素通過Ω它自己的HTMLElement類型表示，如HTMLDivElement代表了<div>元素。但有少數的除外。
二、DOM通用節點對象操作
1.DOM的通用屬性
alinkColor
|
激活的鏈接的顏色，如<body alink="color">定義的。
|
bgColor
|
頁面的背景顏色，如<body bgcolor="color">定義的。
|
fgColor
|
頁面的文本顏色，如<body text="color">定義的。
|
lastModified
|
最後修改頁面的日期，是字元串。
|
linkColor
|
鏈接的顏色，如<body link="color">定義的
|
referrer
|
瀏覽器當前頁後退一個位置的url
|
title
|
<title>標簽中顯示的文本
|
URL
|
當前頁面的url
|
vlinkColor
|
訪問過的鏈接的顏色，如<body vlink="color">定義的
|
* 這些屬性是引用了<body>標簽中的舊HTML特性，應該用樣式表代替它們。
|
|
2.DOM的通用集合
ahchors
|
頁面中所有錨的集合(由<a name="ahchorname></a>標簽表示)。
|
applets
|
頁面中所有applet的集合。
|
embeds
|
頁面中所有嵌入式對象的集合(由<embed>標簽表示)
|
forms
|
頁面中所有表單的集合。
|
images
|
頁面中所有圖像的集合。
|
links
|
頁面中所有鏈接的集合(由<a href="somewhere.htm"><a>表示。
|
3.DOM通用節點操作
document對象是BOM的一部分，同時也是HTML DOM的HTMLDocument對象的表現形式，即它也是XML DOM Document對象。
1查找節點
| document[Element].getElementById() | 返回對擁有指定 id 的第一個對象的引用。 |
| document[Element].getElementsByName() | 返回帶有指定名稱的對象集合。 |
| document[Element].getElementsByTagName() | 返回帶有指定標簽名的對象集合。 |
| document[Element].getElementsByClassName() | 返回帶有指定類名的對象集合。 |
2創建節點
document.createAttribute(name)
|
創建屬性名為name的屬性節點。
|
document.createElement()
|
創建標簽名為tagName的元素。
|
document.createTextNode(text)
|
創建包含文本text的文本節點。
|
* 創建其它Node介面定義的節點沒有太大用處。因為被更簡便的操作替代。
|
|
3添加節點
Element.appendChild(Node)
|
添加Node子元素。
|
Element.insertBefore(newNode, oldNode)
|
在某個子節點對象前添加新節點。
|
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>節點選取</title> <style type="text/css"> .outer { width: 200px; background-color: yellow; } .inner{ float: left; height: 50px; width: 50px; } .inner:first-child{ background-color: red; } .inner:last-child{ background-color: blue; } .header, .bottom{ height: 50px; width: 200px; background-color: green; } .clearfix:before, .clearfix:after{ content: ""; height: 0; line-height: 0; display: block; visibility: hidden; clear: both; } </style> </head> <body> <div class="header"></div> <div class="outer clearfix"> </div> <div class="bottom"></div> <script> function newDiv() {} newDiv.create = newDiv.prototype.create = function (className) { var oDiv = document.createElement("div"); // 第一種方式 /* var oText = document.createTextNode("第一個子div"); oDiv.appendChild(oText); var oAttr = document.createAttribute("class"); oAttr.nodeValue = className; oDiv.setAttributeNode(oAttr); */ // 第二種方式 oDiv.innerHTML = "第二個子div"; oDiv.setAttribute("class", className); return oDiv; }; var oDiv = new newDiv(); var oDivFather = document.getElementsByClassName("outer")[0] oDivFather.appendChild(oDiv.create("inner")); oDivFather.appendChild(oDiv.create("inner")); </script> </body> </html>樣例代碼
4刪除節點
Element.removeChild(Node) 刪除Node子元素。
5替換節點
Element.replacChild(newNode, oldNode) 替換子元素。
6.節點屬性和方法
節點屬性和方法包含DOM NOde介面定義的所有屬性和方法。HTML DOM 還包括其它的一些屬性和方法。詳細參見http://www.w3school.com.cn/jsref/dom_obj_all.asp。
Element.tagName
|
返回元素的標簽名。
|
< |
