HTML DOM Element 對象

Element 對象

在 HTML DOM 中，Element 對象代表 HTML 元素，如 P、DIV、A、TABLE 或任何其他 HTML 元素。

屬性和方法

以下屬性和方法可用于所有 HTML 元素：

屬性 / 方法 描述
accessKey 設置或返回元素的 accesskey 屬性。
addEventListener() 將事件處理程序附加到元素。
appendChild() 向元素添加（附加）新的子節點。
attributes 返回元素屬性的 NamedNodeMap。
blur() 從元素中移除焦點。
childElementCount 返回元素的子元素個數。
childNodes 返回元素子節點的 NodeList。
children 返回元素的子元素的 HTMLCollection。
classList 返回元素的類名。
className 設置或返回元素的 class 屬性值。
click() 模擬鼠標單擊元素。
clientHeight 返回元素的高度，包括內邊距。
clientLeft 返回元素左邊框的寬度。
clientTop 返回元素上邊框的寬度。
clientWidth 返回元素的寬度，包括內邊距。
cloneNode() 克隆元素。
closest() 在 DOM 樹中搜索與 CSS 選擇器匹配的最接近的元素。
compareDocumentPosition() 比較兩個元素的文檔位置。
contains() 如果節點是節點的后代，則返回 true。
contentEditable 設置或返回元素的內容是否可編輯。
dir 設置或返回元素的 dir 屬性的值。
firstChild 返回元素的第一個子節點。
firstElementChild 返回元素的第一個子元素。
focus() 讓元素獲得焦點。
getAttribute() 返回元素屬性的值。
getAttributeNode() 返回屬性節點。
getBoundingClientRect() 返回元素的大小及其相對于視口的位置。
getElementsByClassName() 返回擁有給定類名的子元素的集合。
getElementsByTagName() 返回擁有給定標簽名稱的子元素的集合。
hasAttribute() 如果元素擁有給定屬性，則返回 true。
hasAttributes() 如果元素擁有任何屬性，則返回 true。
hasChildNodes() 如果元素有任何子節點，則返回 true。
element.id 設置或返回元素 id 屬性的值。
innerHTML 設置或返回元素的內容。
innerText 設置或返回節點及其后代的文本內容。
insertAdjacentElement() 在相對于元素的位置插入新的 HTML 元素。
insertAdjacentHTML() 在相對于元素的位置插入 HTML 格式的文本。
insertAdjacentText() 在相對于元素的位置插入文本。
insertBefore() 在現有子節點之前插入新子節點。
isContentEditable 如果元素的內容是可編輯的，則返回 true。
isDefaultNamespace() 如果給定的 namespaceURI 是默認值，則返回 true。
isEqualNode() 檢查兩個元素是否相等。
isSameNode() 檢查兩個元素是否是同一個節點。
isSupported() 已棄用。
lang 設置或返回元素的 lang 屬性值。
lastChild 返回元素的最后一個子節點。
lastElementChild 返回元素的最后一個子元素。
matches() 如果元素與給定的 CSS 選擇器匹配，則返回 true。
namespaceURI 返回元素的命名空間 URI。
nextSibling 返回位于相同節點樹層級的下一個節點。
nextElementSibling 返回位于相同節點樹層級的下一個元素。
nodeName 返回節點的名稱。
nodeType 返回節點的節點類型。
nodeValue 設置或返回節點的值。
normalize() 合并元素中相鄰的文本節點，并移除空的文本節點。
offsetHeight 返回元素的高度，包括內邊距、邊框和滾動條。
offsetWidth 返回元素的寬度，包括內邊距、邊框和滾動條。
offsetLeft 返回元素的水平偏移位置。
offsetParent 返回元素的偏移容器。
offsetTop 返回元素的垂直偏移位置。
outerHTML 設置或返回元素的內容（包括開始標簽和結束標簽）。
outerText 設置或返回節點及其后代的外部文本內容。
ownerDocument 返回元素的根元素（文檔對象）。
parentNode 返回元素的父節點。
parentElement 返回元素的父元素節點。
previousSibling 返回位于相同節點樹層級的上一個節點。
previousElementSibling 返回位于相同節點樹層級的上一個元素。
querySelector() 返回與 CSS 選擇器匹配的第一個子元素。
querySelectorAll() 返回與 CSS 選擇器匹配的所有子元素。
remove() 從 DOM 中移除元素。
removeAttribute() 從元素中移除屬性。
removeAttributeNode() 移除屬性節點，并返回移除的節點。
removeChild() 從元素中移除子節點。
removeEventListener() 刪除已使用 addEventListener() 方法附加的事件處理程序。
replaceChild() 替換元素中的子節點。
scrollHeight 返回元素的整體高度，包括內邊距。
scrollIntoView() 將元素滾動到瀏覽器窗口的可見區域。
scrollLeft 設置或返回元素內容水平滾動的像素數。
scrollTop 設置或返回元素內容垂直滾動的像素數。
scrollWidth 返回元素的整體寬度，包括內邊距。
setAttribute() 設置或更改屬性的值。
setAttributeNode() 設置或更改屬性節點。
style 設置或返回元素 style 屬性的值。
tabIndex 設置或返回元素的 tabindex 屬性的值。
tagName 返回元素的標簽名。
textContent 設置或返回節點及其后代的文本內容。
title 設置或返回元素的 title 屬性值。
toString() 將元素轉換為字符串。

Element 接口詳解

Element 接口表示 HTML 元素、XML元素或標記。tagName 屬性指定了元素的名稱。Document 的 documentElement 屬性引用這個文檔的根 Element 對象。HTMLDocument 對象的 body 屬性也類似，它引用了文檔的 <body> 元素。要在一個 HTML 文檔中找到指定名稱的元素，使用 Document.getElementById()（并通過 id 屬性給該元素一個唯一的名稱）。要通過標記名來定位元素，使用 getElementsByTagName()，這既是 Element 的方法也是 Document 的方法。在 HTML 文檔中，也可以使用類似的 HTMLDocument.getElementsByName() 方法來根據元素的 name 屬性來查找元素。最后，可以用 Document.createElement() 方法，創建插入文檔的新 Element 元素。

addEventListener() 方法（及其特定于 IE 的替代方法 attachEvent() ）提供了在該元素上為特定類型的事件注冊事件句柄函數的方法。從技術上講，addEventListener() 、removeEventListener() 和 dispatchEvent() 都是由2級 DOM Events 規范的 EventTarget 接口定義的。所有的 Element 對象都實現了 EventTarget。

這個接口的各種其他方法提供了對元素的屬性的訪問。在 HTML 文檔中（以及許多 XML 文檔中），所有屬性都有簡單的字符串值，并且你可以使用簡單方法 getAttribute() 和 setAttribute() 進行所需的任何屬性操作。

如果你在使用 XML 文檔，它可能包含了 Entity 參考頁作為屬性值的一部分，你將必須使用 Attr 對象及其節點的子樹。你可針對一個屬性使用 getAttributeNode() 和 setAttributeNode() 來獲取和設置 Attr 對象，或者可以在 Node 接口的 attributes[] 數組遍歷 Attr 節點。如果您使用了一個用到 XML 名字空間的 XML 文檔，需要使用名字帶有 "NS" 的各種方法。

在 1 級 DOM 規范中， normalize() 方法是 Element 接口的一部分。在 2 級規范中，normalize() 則是 Node 接口的一部分。所有 Element 節點繼承這個方法并且仍然可以使用它。

知識點：HTML DOM 節點

在 HTML DOM （文檔對象模型）中，每個部分都是節點：

  • 文檔本身是文檔節點
  • 所有 HTML 元素是元素節點
  • 所有 HTML 屬性是屬性節點
  • HTML 元素內的文本是文本節點
  • 注釋是注釋節點

Element 對象

在 HTML DOM 中，Element 對象表示 HTML 元素。

Element 對象可以擁有類型為元素節點、文本節點、注釋節點的子節點。

NodeList 對象表示節點列表，比如 HTML 元素的子節點集合。

元素也可以擁有屬性。屬性是屬性節點（參見下一節）。