標籤：瀏覽器 element info 點擊 width 和我 改變 點擊事件 innerhtml
1.什麼是DOM？
（1）DOM是一種標準，或者說是一種介面。
（2）定義了所有 HTML,XML 元素的對象和屬性，以及訪問它們的方法，因此，通過這種標準（介面）可以準確的訪問HTML，XML 文檔，從而改變更新文檔的內容、結構和樣式。
（3） DOM的全稱是 Document Object Model（文件物件模型）。
（4）可通過 JavaScript （以及其他程式設計語言）對 DOM 進行訪問，以下通過js訪問。
2.什麼是HTML DOM?
瞭解了什麼是DOM，那麼就知道什麼是HTML DOM,HTML DOM是HTML 的標準編程介面，定義了所有 HTML 元素的對象和屬性，以及訪問它們的方法。
3.在HTML DOM的標準中HTML的結構是什嗎？
HTML DOM將整個文檔看成是一個文檔節點，每個 HTML 元素是元素節點，HTML 元素內的文本是文本節點，每個 HTML 屬性是屬性節點，注釋是注釋節點，因此節點中是可以包含節點的，而節點有可以看成是對象（與java，c++物件導向編程的對象一樣），因此HTML DOM便是提供了方法可以去訪問這些對象。
4.如何通過HTML DOM去獲得HTML中的節點（對象）？
HTML DOM的document對象（每個載入瀏覽器的 HTML 文檔都會成為 Document 對象，Document 對象使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問）提供了三種方法:
（1）通過id獲得，使用document.getElementById() 方法，返迴文檔中一個節點（對象）
（2）通過標籤名獲得，使用 document.getElementsByTagName() 方法，返迴文檔中所有相同標籤名的節點（對象）數組，可通過索引獲得，如arr[0]，便是獲得第一個節點（對象）
（3）通過class名獲得，使用 document.getElementsByClassName() 方法，返迴文檔中所有相同class名的節點（對象）數組，可通過索引獲得，如arr[0]，便是獲得第一個節點（對象）
5.如何通過HTML DOM修改節點（對象）的屬性？
和普通的對象一樣，通過上面三種方法取得節點（對象）後，在通過“.”去取得節點（對象）的屬性通過“=”賦值便可更改原節點（對象）的屬性值，如：
<html><body><p id="intro">Hello World!</p><script>
function swit()
{var txt=document.getElementById("intro");//"."獲得id為intro的節點
txt.innerHTML="你好！！";//"="更改此節點的innerHTML 屬性
}</script>
<p id="intro" onclick()="swit()">hello!!</p>
</body></html>
上面的列子中更改了<p>標籤的innerHTML 屬性，而p中還有許多的屬性（具體請去網上找，我經常在w3school網站裡去查，感覺很全），若想更改p的樣式請這樣擷取屬性：txt.style.color="red",如果屬性是這樣的z-index,這樣更改：txt.style.zIndex=10，基本上將“-”後面單詞首字母改成大寫就行了，如果是onclick這樣的event（事件）屬性這樣的值是一個函數名時請這樣更改:txt.onclick=function(){方法體或者是函數調用}。
此方法適用於基本上所有的標籤節點的屬性更改。
5.HTML DOM對象
HTML DOM有四種對象document,element,attribute,event。
（1）document對象
每個載入瀏覽器的 HTML 文檔都會成為 Document 對象，Document 對象使我們可以從指令碼中對 HTML 頁面中的所有元素進行訪問。【註：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。】
（2）element對象
在 HTML DOM 中，Element 對象表示 HTML 元素，Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點，即有document三種方法擷取的對 象不管是有<p>,<a>,<div>等標籤獲得的對象都是element對象，因此element對象和<p>,<a>,<div>等標籤獲得的對象就像繼承一樣，element的屬性和方法， <p>,<a>,<div>等標籤獲得的對象,可以調用，如innerHTML 屬性是element屬性，而p，a，div都有。
（3）attribute對象
在 HTML DOM 中，Attr 對象表示 HTML 屬性，可以通過擷取對象的屬性來調用attribute對象的屬性和方法，列如，
function fun()
{
var txt=document.getElementsByTagName("button").attributes[0].name;
}
.....
<button onclick="fun()">點擊</button>
上列調用了attribute對象的name屬性，返回了第一個屬性的名字，因此txt就是"onclick";
（4）event對象
瀏覽器、文檔（document）視窗中的發生的特定的互動瞬間；而JavaScript和HTML之間的互動行為就是通過事件來觸發的，如點擊事件，划過事件。
作者有話說:以上只是我的觀點和我覺得對的觀點，上面基本上都是讀w3school後相關教程所理解，詳情及更加詳細網址分享：http://www.w3school.com.cn/htmldom/index.asp
最後分享一張圖片
HTML DOM簡單總結
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
