1. getElementById()返回的是什么？
這個函數使用的最普遍，但是你有沒有深入探究下，這個函數究竟返回的是什么么？我們來一起看看。
var mydivEle = document.getElementById("mydiv"); //<div id="mydiv"></div> alert(mydivEle); //輸出：object HTMLDivElement【IE8只顯示Object,Chrome顯示object HTMLDivElement】
從彈出的alert框中，我們看到 mydivEle 其實是 “object HTMLDivElement”，即 HTMLDivElement 對象，而這個對象是哪里來的呢？ 查閱 《JavaScript權威指南》中文第六版363頁，我們可以知道： HTMLDivElement 是 HTMLElement 的一個子對象，而 HTMLElement 又是 Element 的子對象。
這些由 getElementById() 得到的具體對象 就是圖中最右一列對象，它們 其實就是 DOM 將具體的每個 HTML標簽/元素 封裝之后的 一個個HTMLElement 子對象。
知道了它是HTMLxxxElement是不是感覺還是摸不着頭腦，沒有什么用？那么看下面這個問題。
2. alert(getElementById("mydiv").tagName) 語句會報錯嗎？ HTMLDivElement 有tagName這個屬性么，它都有哪些屬性？
為了防止誤導，沒有舉錯誤的例子。上面的 alert(getElementById("mydiv").tagName) 是正確的，它會顯示該元素的標簽名：DIV（注意：返回的tagName都是大寫）。那這個 HTMLDivElement 還有什么其它的屬性呢？
仔細看上圖，我們會看到，這些 HTMLxxxElement 是 HTMLElement 的子對象，所以它會自動繼承 HTMLElement的 所有屬性和方法，依據上圖，它還會繼承 Element 、 Node 的屬性和方法。所以，綜合起來，getElementById() 返回的對象，會有以下這些 屬性、方法、事件（內容整理自 w3cschool.com.cn）。
由於繼承的屬性、方法內容較多，就列放在文章的最后了。（通過查看這些繼承的屬性，我們會發現，這個 tagName 屬性其實是繼承自 Element 對象的一個屬性。）
3. 如何修改getElementById()得到的div的樣式呢？這個樣式又是通過 HTMLDivElement 的什么屬性or方法or子對象 訪問到的呢？
從 w3cschool 里了解到：Style 對象代表一個單獨的樣式聲明。可從應用樣式的 文檔 或 元素 訪問 Style 對象。接着它舉了個例子：
document.getElementById("id").style.property="值"
w3cschool沒有細說這個屬性從何繼承而來，但我們根據上面才講的內容，很容易就可以從一層層的父對象找到，Style 對象其實是 HTMLElement 對象中一個屬性。所以Style 就是每個 HTML 元素的標准配置，每個 HTMLElement 都有一個默認的 style 屬性， 屬性值就是 Style 對象。
至於具體如何修改 div 的樣式，我想就不用我多說了，這就是 CSS 的基礎知識了。
若有疑問：點擊 DOM HTML HTMLElement對象 和 XML DOM CSS2Properties對象 了解詳細。
4. 注意
只有使用內聯樣式，即直接把CSS寫在HTML元素的style屬性中
<div id="d1" style="width:100px;height:200px;"></div>
才能通過上面所說的方法獲取width等屬性
alert(document.getElementById('d1').style.width);//100px
否則瀏覽器只會返回空字符串。詳細見此。其實，最好還是使用JQuery，簡單快捷：$("d1").width()，不用考慮是不是內聯樣式。
然后，這里想拋出個引子：其實JQuery中的 .width() 得到的並不是真正的 CSS 中的 width，想了解看這里。
<正文完>
<下面是整理的繼承對象的屬性/方法列表>
HTMLElement 對象
Element 對象
屬性：
| 屬性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| attributes | 返回元素的屬性的 NamedNodeMap | 5 | 1 | 9 | Yes |
| baseURI | 返回元素的絕對基准 URI | No | 1 | No | Yes |
| childNodes | 返回元素的子節點的 NodeList | 5 | 1 | 9 | Yes |
| firstChild | 返回元素的首個子節點 | 5 | 1 | 9 | Yes |
| lastChild | 返回元素的最后一個子節點 | 5 | 1 | 9 | Yes |
| localName | 返回元素名稱的本地部分 | No | 1 | 9 | Yes |
| namespaceURI | 返回元素的命名空間 URI | No | 1 | 9 | Yes |
| nextSibling | 返回元素之后緊跟的節點 | 5 | 1 | 9 | Yes |
| nodeName | 返回節點的名稱，依據其類型。 | 5 | 1 | 9 | Yes |
| nodeType | 返回節點的類型 | 5 | 1 | 9 | Yes |
| ownerDocument | 返回元素所屬的根元素 (document 對象) | 5 | 1 | 9 | Yes |
| parentNode | 返回元素的父節點 | 5 | 1 | 9 | Yes |
| prefix | 設置或返回元素的命名空間前綴 | No | 1 | 9 | Yes |
| previousSibling | 返回元素之前緊隨的節點 | 5 | 1 | 9 | Yes |
| schemaTypeInfo | 返回與元素相關聯的類型信息 | No | Yes | ||
| tagName | 返回元素的名稱 | 5 | 1 | 9 | Yes |
| textContent | 設置或返回元素及其后代的文本內容 | No | 1 | No | Yes |
| text | 返回節點及其后代的文本 (IE-only) | 5 | No | No | No |
| xml | 返回節點及其后代的 XML (IE-only) | 5 | No | No | No |
方法：
| 方法 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| appendChild() | 向節點的子節點列表末尾添加新的子節點。 | 5 | 1 | 9 | Yes |
| cloneNode() | 克隆節點。 | 5 | 1 | 9 | Yes |
| compareDocumentPosition() | 比較兩節點的文檔位置。 | No | 1 | No | Yes |
| dispatchEvent() | 給節點分派一個合成事件。 | No | 1 | 9 | Yes |
| getAttribute() | 返回屬性的值。 | 5 | 1 | 9 | Yes |
| getAttributeNS() | 返回屬性的值。 | No | 1 | 9 | Yes |
| getAttributeNode() | 以 Attribute 對象返回屬性節點。 | 5 | 1 | 9 | Yes |
| getAttributeNodeNS() | 以 Attribute 對象返回屬性節點。 | No | 9 | Yes | |
| getElementsByTagName() | 找到具有指定標簽名的子孫元素。 | 5 | 1 | 9 | Yes |
| getElementsByTagNameNS() | 找到具有指定標簽名和命名空間的元素。 | No | 1 | 9 | Yes |
| getFeature(feature,version) | 返回 DOM 對象，此對象可執行擁有指定特性和版本的專門的 API。 | No | Yes | ||
| getUserData(key) | 返回關聯節點上鍵的對象。此對象必須首先通過使用相同的鍵來調用 setUserData 來設置到此節點。 | No | Yes | ||
| hasAttribute() | 返回元素是否擁有指定的屬性。 | 5 | 1 | 9 | Yes |
| hasAttributeNS() | 返回元素是否擁有指定的屬性。 | No | 1 | 9 | Yes |
| hasAttributes() | 返回元素是否擁有屬性。 | 5 | 1 | 9 | Yes |
| hasChildNodes() | 返回元素是否擁有子節點。 | 5 | 1 | 9 | Yes |
| insertBefore() | 在已有的子節點之前插入一個新的子節點。 | 5 | 1 | 9 | Yes |
| isDefaultNamespace(URI) | 返回指定的命名空間 URI 是否為默認。 | No | Yes | ||
| isEqualNode() | 檢查兩節點是否相等。 | No | No | No | Yes |
| isSameNode() | 檢查兩節點是否為同一節點。 | No | 1 | No | Yes |
| isSupported(feature,version) | 返回指定的特性是否在此元素上得到支持。 | 9 | Yes | ||
| lookupNamespaceURI() | 返回匹配指定前綴的命名空間 URI。 | No | 1 | No | Yes |
| lookupPrefix() | 返回匹配指定的命名空間 URI 的前綴。 | No | 1 | No | Yes |
| normalize() | 5 | 1 | 9 | Yes | |
| removeAttribute() | 刪除指定的屬性。 | 5 | 1 | 9 | Yes |
| removeAttributeNS() | 刪除指定的屬性。 | No | 1 | 9 | Yes |
| removeAttributeNode() | 刪除指定的屬性節點。 | 5 | 1 | 9 | Yes |
| removeChild() | 刪除子節點。 | 5 | 1 | 9 | Yes |
| replaceChild() | 替換子節點。 | 5 | 1 | 9 | Yes |
| setUserData(key,data,handler) | 把對象關聯到元素上的鍵。 | No | Yes | ||
| setAttribute() | 添加新屬性。 | 5 | 1 | 9 | Yes |
| setAttributeNS() | 添加新屬性。 | 1 | 9 | Yes | |
| setAttributeNode() | 添加新的屬性節點。 | 5 | 1 | 9 | Yes |
| setAttributeNodeNS(attrnode) | 添加新的屬性節點。 | 9 | Yes | ||
| setIdAttribute(name,isId) | 如果 Attribute 對象 isId 屬性為 true，那么此方法會把指定的屬性聲明為一個用戶確定 ID 的屬性（user-determined ID attribute）。 | No | Yes | ||
| setIdAttributeNS(uri,name,isId) | 如果 Attribute 對象 isId 屬性為 true，那么此方法會把指定的屬性聲明為一個用戶確定 ID 的屬性（user-determined ID attribute）（帶有命名空間）。 | No | Yes | ||
| setIdAttributeNode(idAttr,isId) | 如果 Attribute 對象 isId 屬性為 true，那么此方法會把指定的屬性聲明為一個用戶確定 ID 的屬性（user-determined ID attribute）。 | No | Yes |
事件：參考具體元素
Node 對象
屬性：
| 屬性 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| baseURI | 返回節點的絕對基准 URI。 | No | 1 | No | Yes |
| childNodes | 返回節點到子節點的節點列表。 | 5 | 1 | 9 | Yes |
| firstChild | 返回節點的首個子節點。 | 5 | 1 | 9 | Yes |
| lastChild | 返回節點的最后一個子節點。 | 5 | 1 | 9 | Yes |
| localName | 返回節點的本地名稱。 | No | 1 | 9 | Yes |
| namespaceURI | 返回節點的命名空間 URI。 | No | 1 | 9 | Yes |
| nextSibling | 返回節點之后緊跟的同級節點。 | 5 | 1 | 9 | Yes |
| nodeName | 返回節點的名稱，根據其類型。 | 5 | 1 | 9 | Yes |
| nodeType | 返回節點的類型。 | 5 | 1 | 9 | Yes |
| nodeValue | 設置或返回節點的值，根據其類型。 | 5 | 1 | 9 | Yes |
| ownerDocument | 返回節點的根元素（document 對象）。 | 5 | 1 | 9 | Yes |
| parentNode | 返回節點的父節點。 | 5 | 1 | 9 | Yes |
| prefix | 設置或返回節點的命名空間前綴。 | No | 1 | 9 | Yes |
| previousSibling | 返回節點之前緊跟的同級節點。 | 5 | 1 | 9 | Yes |
| textContent | 設置或返回節點及其后代的文本內容。 | No | 1 | No | Yes |
| text | 返回節點及其后代的文本（IE 獨有的屬性）。 | 5 | No | No | No |
| xml | 返回節點及其后代的 XML（IE 獨有的屬性）。 | 5 | No | No | No |
方法：
| 方法 | 描述 | IE | F | O | W3C |
|---|---|---|---|---|---|
| appendChild() | 向節點的子節點列表的結尾添加新的子節點。 | 5 | 1 | 9 | Yes |
| cloneNode() | 復制節點。 | 5 | 1 | 9 | Yes |
| compareDocumentPosition() | 對比兩個節點的文檔位置。 | No | 1 | No | Yes |
| getFeature(feature,version) | 返回一個 DOM 對象，此對象可執行帶有指定特性和版本的專門的 API。 | No | Yes | ||
| getUserData(key) | 返回與此節點上的某個鍵相關聯的對象。此對象必須首先通過使用相同的鍵來調用 setUserData 被設置到此節點。 | No | Yes | ||
| hasAttributes() | 判斷當前節點是否擁有屬性。 | No | 1 | 9 | Yes |
| hasChildNodes() | 判斷當前節點是否擁有子節點。 | 5 | 1 | 9 | Yes |
| insertBefore() | 在指定的子節點前插入新的子節點。 | 5 | 1 | 9 | Yes |
| isDefaultNamespace(URI) | 返回指定的命名空間 URI 是否為默認。 | No | Yes | ||
| isEqualNode() | 檢查兩個節點是否相等。 | No | No | No | Yes |
| isSameNode() | 檢查兩個節點是否是相同的節點。 | No | 1 | No | Yes |
| isSupported() | 返回當前節點是否支持某個特性。 | 9 | Yes | ||
| lookupNamespaceURI() | 返回匹配指定前綴的命名空間 URI。 | No | 1 | No | Yes |
| lookupPrefix() | 返回匹配指定命名空間 URI 的前綴。 | No | 1 | No | Yes |
| normalize() | 合並相鄰的Text節點並刪除空的Text節點。 | 5 | 1 | 9 | Yes |
| removeChild() | 刪除（並返回）當前節點的指定子節點。 | 5 | 1 | 9 | Yes |
| replaceChild() | 用新節點替換一個子節點。 | 5 | 1 | 9 | Yes |
| selectNodes() | 用一個 XPath 表達式查詢選擇節點。 | 6 | |||
| selectSingleNode() | 查找和 XPath 查詢匹配的一個節點。 | 6 | |||
| transformNode() | 使用 XSLT 把一個節點轉換為一個字符串。 | 6 | |||
| transformNodeToObject() | 使用 XSLT 把一個節點轉換為一個文檔。 | 6 | |||
| setUserData(key,data,handler) | 把對象關聯到節點上的一個鍵上。 | No | Yes |