HTML DOM 元素對象


HTML DOM 節點

在 HTML DOM (Document Object Model) 中, 每個東西都是 節點 :

  • 文檔本身就是一個文檔對象
  • 所有 HTML 元素都是元素節點
  • 所有 HTML 屬性都是屬性節點
  • 插入到 HTML 元素文本是文本節點
  • 注釋是注釋節點

元素對象

在 HTML DOM 中, 元素對象代表著一個 HTML 元素。

元素對象 的 子節點可以是, 可以是元素節點,文本節點,注釋節點。

NodeList 對象 代表了節點列表,類似於 HTML元素的子節點集合。

元素可以有屬性。屬性屬於屬性節點(查看下一章節)。


瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

所有主流瀏覽器都支持 元素對象 和 NodeList 對象。.


屬性和方法

以上屬性和方法可適用於所有 HTML 元素:

屬性 / 方法 描述
element.accessKey 設置或返回accesskey一個元素
element.addEventListener() 向指定元素添加事件句柄
element.appendChild() 為元素添加一個新的子元素
element.attributes 返回一個元素的屬性數組
element.childNodes 返回元素的一個子節點的數組
element.children 返回元素的子元素的集合
element.classList 返回元素的類名,作為 DOMTokenList 對象。
element.className 設置或返回元素的class屬性
element.clientTop 表示一個元素的頂部邊框的寬度,以像素表示。
element.clientLeft 表示一個元素的左邊框的寬度,以像素表示。
element.clientHeight 在頁麵上返回內容的可視高度(高度包含內邊距(padding),不包含邊框(border),外邊距(margin)和滾動條)
element.clientWidth 在頁麵上返回內容的可視寬度(寬度包含內邊距(padding),不包含邊框(border),外邊距(margin)和滾動條)
element.cloneNode() 克隆某個元素
element.compareDocumentPosition() 比較兩個元素的文檔位置。
element.contentEditable 設置或返回元素的內容是否可編輯
element.dir 設置或返回一個元素中的文本方向
element.firstElementChild 返回元素的第一個子元素
element.firstChild 返回元素的第一個子節點
element.focus() 設置文檔或元素獲取焦點
element.getAttribute() 返回指定元素的屬性值
element.getAttributeNode() 返回指定屬性節點
element.getElementsByTagName() 返回指定標簽名的所有子元素集合。
element. getElementsByClassName() 返回文檔中所有指定類名的元素集合,作為 NodeList 對象。
element.getFeature() 返回指定特征的執行APIs對象。
element.getUserData() 返回一個元素中關聯鍵值的對象。
element.hasAttribute() 如果元素中存在指定的屬性返回 true,否則返回false。
element.hasAttributes() 如果元素有任何屬性返回true,否則返回false。
element.hasChildNodes() 返回一個元素是否具有任何子元素
element.hasFocus() 返回布爾值,檢測文檔或元素是否獲取焦點
element.id 設置或者返回元素的 id。
element.innerHTML 設置或者返回元素的內容。
element.insertBefore() 現有的子元素之前插入一個新的子元素
element.isContentEditable 如果元素內容可編輯返回 true,否則返回false
element.isDefaultNamespace() 如果指定了namespaceURI 返回 true,否則返回 false。
element.isEqualNode() 檢查兩個元素是否相等
element.isSameNode() 檢查兩個元素所有有相同節點。
element.isSupported() 如果在元素中支持指定特征返回 true。
element.lang 設置或者返回一個元素的語言。
element.lastChild 返回最後一個子節點
element.lastElementChild 返回指定元素的最後一個子元素
element.matches() 如果元素匹配指定的 CSS 選擇器,matches() 方法就返回 true,否則返回 false。
element.namespaceURI 返回命名空間的 URI。
element.nextSibling 返回該元素緊跟的一個節點
element.nextElementSibling 返回指定元素之後的下一個兄弟元素(相同節點樹層中的下一個元素節點)。
element.nodeName 返回元素的標記名(大寫)
element.nodeType 返回元素的節點類型
element.nodeValue 返回元素的節點值
element.normalize() 使得此成為一個"normal"的形式,其中隻有結構(如元素,注釋,處理指令,CDATA節和實體引用)隔開Text節點,即元素(包括屬性)下麵的所有文本節點,既沒有相鄰的文本節點也沒有空的文本節點
element.offsetHeight 返回任何一個元素的高度包括邊框(border)和內邊距(padding),但不包含外邊距(margin)
element.offsetWidth 返回元素的寬度,包括邊框(border)和內邊距(padding),但不包含外邊距(margin)
element.offsetLeft 返回當前元素的相對水平偏移位置的偏移容器
element.offsetParent 返回元素的偏移容器
element.offsetTop 返回當前元素的相對垂直偏移位置的偏移容器
element.ownerDocument 返回元素的根元素(文檔對象)
element.parentNode 返回元素的父節點
element.previousSibling 返回某個元素緊接之前元素
element.previousElementSibling 返回指定元素的前一個兄弟元素(相同節點樹層中的前一個元素節點)。
element.querySelector() 返回匹配指定 CSS 選擇器元素的第一個子元素
document.querySelectorAll() 返回匹配指定 CSS 選擇器元素的所有子元素節點列表
element.removeAttribute() 從元素中刪除指定的屬性
element.removeAttributeNode() 刪除指定屬性節點並返回移除後的節點。
element.removeChild() 刪除一個子元素
element.removeEventListener() 移除由 addEventListener() 方法添加的事件句柄
element.replaceChild() 替換一個子元素
element.scrollHeight 返回整個元素的高度(包括帶滾動條的隱蔽的地方)
element.scrollLeft 返回當前視圖中的實際元素的左邊緣和左邊緣之間的距離
element.scrollTop 返回當前視圖中的實際元素的頂部邊緣和頂部邊緣之間的距離
element.scrollWidth 返回元素的整個寬度(包括帶滾動條的隱蔽的地方)
element.setAttribute() 設置或者改變指定屬性並指定值。
element.setAttributeNode() 設置或者改變指定屬性節點。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 在元素中為指定鍵值關聯對象。
element.style 設置或返回元素的樣式屬性
element.tabIndex 設置或返回元素的標簽順序。
element.tagName 作為一個字符串返回某個元素的標記名(大寫)
element.textContent 設置或返回一個節點和它的文本內容
element.title 設置或返回元素的title屬性
element.toString() 一個元素轉換成字符串
nodelist.item() 返回某個元素基於文檔樹的索引
nodelist.length 返回節點列表的節點數目。