DOM是什么？
w3shcool dom教程
DOM 是 Document Object Model（文檔對象模型）的縮寫
DOM 是 W3C（萬維網聯(lián)盟）的標準罢杉。
DOM 定義了訪問 HTML 和 XML 文檔的標準：
“W3C 文檔對象模型 （DOM） 是中立于平臺和語言的接口趟畏，它允許程序和腳本動態(tài)地訪問和更新文檔的內容、結構和樣式屑那」案洌”
W3C DOM 標準被分為 3 個不同的部分：
核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型
什么是 XML DOM？
XML DOM 定義了所有 XML 元素的對象和屬性持际，以及訪問它們的方法沃琅。
什么是 HTML DOM？
HTML DOM 是：
- HTML 的標準對象模型
- HTML 的標準編程接口
- W3C 標準
HTML DOM 定義了所有 HTML 元素的對象和屬性蜘欲，以及訪問它們的方法益眉。
換言之，HTML DOM 是關于如何獲取姥份、修改郭脂、添加或刪除 HTML 元素的標準。
XML DOM樹
HTML DOM樹
DOM 可以將任何 HTML 或 XML 文檔描繪成一個由多層節(jié)點構成的結構澈歉。節(jié)點分為幾種不同的類型展鸡，每種類型分別表示文檔中不同的信息及（或）標記定嗓。每個節(jié)點都擁有各自的特點拗小、數據和方法，另外也與其他節(jié)點存在某種關系
瀏覽器在加載HTML文檔時翁潘，會先解析這一層次結構并創(chuàng)建一顆節(jié)點對象樹涡尘，從而模擬這些標記文本的封裝
DOM的目的是使用JavaScript操作（刪除忍弛、添加、替換考抄、創(chuàng)建或修改事件）當前文檔细疚。
為什么JavaScript可以操作DOM？
JavaScript中所有HTML DOM節(jié)點類型都繼承自Node類型川梅，因此所有類型的節(jié)點都有一些相同的屬性和方法疯兼。Node接口是DOM1級中定義的一個接口然遏，在JavaScript中Node接口被實現(xiàn)為Node類型。
Node類型屬性
DOM1 級定義了一個 Node 接口镇防，該接口將由 DOM 中的所有節(jié)點類型實現(xiàn)啦鸣。JavaScript 中的所有節(jié)點類型都繼承自 Node 類型，因此所有節(jié)點類型都共享著相同的基本屬性和方法来氧。每個節(jié)點都有nodeType 诫给、nodeName 和 nodeValue 屬性。
nodeType屬性：用于表明節(jié)點的類型啦扬。Node類型定義了12個常量值來表示不同節(jié)點類型中狂，具體如下
Node.ELEMENT_NODE(1)；
Node.ATTRIBUTE_NODE(2)扑毡；
Node.TEXT_NODE(3)胃榕；
Node.CDATA_SECTION_NODE(4)；
Node.ENTITY_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)蹲嚣。
要了解節(jié)點的具體信息，可以使用 nodeName 和 nodeValue 這兩個屬性祟牲。這兩個屬性的值完全取決于節(jié)點的類型隙畜。例如：元素節(jié)點的 nodeName 是標簽名稱，屬性節(jié)點的 nodeName 是屬性名稱说贝；對于文本節(jié)點议惰，nodeValue 屬性包含文本。對于屬性節(jié)點乡恕，nodeValue 屬性包含屬性值言询。nodeValue 屬性對于文檔節(jié)點和元素節(jié)點是不可用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nodeType nodeName nodeValue屬性</title>
</head>
<body>
<div id="div1">div內文本</div>
</body>
<script type="text/javascript">
var div = document.getElementById("div1");
console.log(div.nodeType); // 1
console.log(div.nodeName); // DIV
console.log(div.nodeValue); // null
var textNode = div.childNodes[0];
console.log(textNode.nodeType); //3
console.log(textNode.nodeName); //#text
console.log(textNode.nodeValue); //div內文本
</script>
</html>
上述代碼創(chuàng)建了一個div元素節(jié)點几颜，元素節(jié)點的nodeType為1，nodeName為對應的節(jié)點名稱讯屈，nodeValue對元素節(jié)點不可用蛋哭，因此為null。在div內還有一段文字涮母，為文本節(jié)點谆趾，通過div.childNodes[0]可獲得躁愿，文本節(jié)點的nodeType為3，nodeName永遠是 #text沪蓬，nodeValue 包含文本內容彤钟。
常用的DOM方法
用戶可通過 JavaScript （以及其他編程語言）對 HTML DOM 進行訪問。所有 HTML 元素被定義為對象跷叉，而編程接口則是對象方法和對象屬性逸雹。
四個重要的DOM屬性
nodeName 屬性：規(guī)定節(jié)點的名稱。
nodeName 是只讀的
元素節(jié)點的 nodeName 與標簽名相同
屬性節(jié)點的 nodeName 與屬性名相同
文本節(jié)點的 nodeName 始終是 #text
文檔節(jié)點的 nodeName 始終是 #document
nodeValue 屬性：規(guī)定節(jié)點的值云挟。
元素節(jié)點的 nodeValue 是 undefined 或 null
文本節(jié)點的 nodeValue 是文本本身
屬性節(jié)點的 nodeValue 是屬性值
nodeType 屬性：返回節(jié)點的類型梆砸。
nodeType 是只讀的。
innerHTML 屬性：獲取元素內容园欣，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
function changeLink(){
document.getElementById('myAnchor').innerHTML="RUNOOB";
document.getElementById('myAnchor').;
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor" >Microsoft</a>
<input type="button" onclick="changeLink()" value="修改鏈接">
</body>
</html>
innerHTML可以被賦值帖世，也可讀，因此是被引用次數最多的對象屬性沸枯，同時也是最容易產生安全問題的對象屬性日矫。
HTML DOM Document 對象
菜鳥教程
在 HTML DOM (Document Object Model) 中 , 每一個元素都是 節(jié)點:
文檔是一個文檔節(jié)點。
所有的HTML元素都是元素節(jié)點绑榴。
所有 HTML 屬性都是屬性節(jié)點哪轿。
文本插入到 HTML 元素是文本節(jié)點。are text nodes彭沼。
注釋是注釋節(jié)點缔逛。
Document 對象
當瀏覽器載入 HTML 文檔, 它就會成為 Document 對象。
Document 對象是 HTML 文檔的根節(jié)點姓惑。
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問褐奴。
常用document 方法
| 屬性/方法 | 描述 |
|---|---|
| document.getElementsByClassName() | 返回文檔中所有指定類名的元素集合，作為 NodeList 對象 |
| document.getElementById() | 返回對擁有指定 id 的第一個對象的引用于毙。 |
| document.getElementsByName() | 返回帶有指定名稱的對象集合敦冬。 |
| document.referrer() | 返回載入當前文檔的文檔的 URL。 |
| document.getElementsByTagName() | 返回帶有指定標簽名的對象集合唯沮。 |
| document.write() | 向文檔寫 HTML 表達式 或 JavaScript 代碼 |
| document.writeln() | 等同于 write() 方法脖旱，不同的是在每個表達式之后寫一個換行符 |
