HTML DOM 元素對象

2023-04-10 11:55 更新

HTML DOM 節(jié)點(diǎn)

在 HTML DOM (Document Object Model) 中, 每個(gè)東西都是 節(jié)點(diǎn) :

  • 文檔本身就是一個(gè)文檔對象
  • 所有 HTML 元素都是元素節(jié)點(diǎn)
  • 所有 HTML 屬性都是屬性節(jié)點(diǎn)
  • 插入到 HTML 元素文本是文本節(jié)點(diǎn)
  • 注釋是注釋節(jié)點(diǎn)

元素對象

在 HTML DOM 中, 元素對象代表著一個(gè) HTML 元素。

元素對象 的 子節(jié)點(diǎn)可以是, 可以是元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)。

NodeList 對象 代表了節(jié)點(diǎn)列表，類似于 HTML元素的子節(jié)點(diǎn)集合。

元素可以有屬性。屬性屬于屬性節(jié)點(diǎn)（查看下一章節(jié)）。

瀏覽器支持

Internet Explorer Firefox Opera Google Chrome Safari

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

屬性和方法

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

屬性 / 方法 描述
element.accessKey 設(shè)置或返回accesskey一個(gè)元素
element.addEventListener() 向指定元素添加事件句柄
element.appendChild() 為元素添加一個(gè)新的子元素
element.attributes 返回一個(gè)元素的屬性數(shù)組
element.childNodes 返回元素的一個(gè)子節(jié)點(diǎn)的數(shù)組
element.classlist 返回元素的類名，作為 DOMTokenList 對象。
element.className 設(shè)置或返回元素的class屬性
element.clientHeight 在頁面上返回內(nèi)容的可視高度（不包括邊框，邊距或滾動(dòng)條）
element.clientWidth 在頁面上返回內(nèi)容的可視寬度（不包括邊框，邊距或滾動(dòng)條）
element.cloneNode() 克隆某個(gè)元素
element.compareDocumentPosition() 比較兩個(gè)元素的文檔位置。
element.contentEditable 設(shè)置或返回元素的內(nèi)容是否可編輯
element.dir 設(shè)置或返回一個(gè)元素中的文本方向
element.firstChild 返回元素的第一個(gè)子節(jié)點(diǎn)
element.focus() 設(shè)置文檔或元素獲取焦點(diǎn)
element.getAttribute() 返回指定元素的屬性值
element.getAttributeNode() 返回指定屬性節(jié)點(diǎn)
element.getElementsByTagName() 返回指定標(biāo)簽名的所有子元素集合。
element. getElementsByClassName() 返回文檔中所有指定類名的元素集合，作為 NodeList 對象。
element.getFeature() 返回指定特征的執(zhí)行APIs對象。
element.getUserData() 返回一個(gè)元素中關(guān)聯(lián)鍵值的對象。
element.hasAttribute() 如果元素中存在指定的屬性返回 true，否則返回false。
element.hasAttributes() 如果元素有任何屬性返回true，否則返回false。
element.hasChildNodes() 返回一個(gè)元素是否具有任何子元素
element.hasfocus() 返回布爾值，檢測文檔或元素是否獲取焦點(diǎn)
element.id 設(shè)置或者返回元素的 id。
element.innerHTML 設(shè)置或者返回元素的內(nèi)容。
element.insertBefore() 現(xiàn)有的子元素之前插入一個(gè)新的子元素
element.isContentEditable 如果元素內(nèi)容可編輯返回 true，否則返回false
element.isDefaultNamespace() 如果指定了namespaceURI 返回 true，否則返回 false。
element.isEqualNode() 檢查兩個(gè)元素是否相等
element.isSameNode() 檢查兩個(gè)元素所有有相同節(jié)點(diǎn)。
element.isSupported() 如果在元素中支持指定特征返回 true。
element.lang 設(shè)置或者返回一個(gè)元素的語言。
element.lastChild 返回的最后一個(gè)子元素
element.namespaceURI 返回命名空間的 URI。
element.nextSibling 返回該元素緊跟的一個(gè)元素
element.nodeName 返回元素的標(biāo)記名（大寫）
element.nodeType Returns the node type of an element
element.nodeValue 返回元素的類型
element.normalize() 使得此成為一個(gè)"normal"的形式，其中只有結(jié)構(gòu)（如元素，注釋，處理指令，CDATA節(jié)和實(shí)體引用）隔開Text節(jié)點(diǎn)，即元素（包括屬性）下面的所有文本節(jié)點(diǎn)，既沒有相鄰的文本節(jié)點(diǎn)也沒有空的文本節(jié)點(diǎn)
element.offsetHeight 返回，任何一個(gè)元素的高度包括邊框和填充，但不是邊距
element.offsetWidth 返回元素的寬度，包括邊框和填充，但不是邊距
element.offsetLeft 返回當(dāng)前元素的相對水平偏移位置的偏移容器
element.offsetParent 返回元素的偏移容器
element.offsetTop 返回當(dāng)前元素的相對垂直偏移位置的偏移容器
element.ownerDocument 返回元素的根元素（文檔對象）
element.parentNode 返回元素的父節(jié)點(diǎn)
element.previousSibling 返回某個(gè)元素緊接之前元素
element.querySelector() 返回匹配指定 CSS 選擇器元素的第一個(gè)子元素
document.querySelectorAll() 返回匹配指定 CSS 選擇器元素的所有子元素節(jié)點(diǎn)列表
element.removeAttribute() 從元素中刪除指定的屬性
element.removeAttributeNode() 刪除指定屬性節(jié)點(diǎn)并返回移除后的節(jié)點(diǎn)。
element.removeChild() 刪除一個(gè)子元素
element.removeEventListener() 移除由 addEventListener() 方法添加的事件句柄
element.replaceChild() 替換一個(gè)子元素
element.scrollHeight 返回整個(gè)元素的高度（包括帶滾動(dòng)條的隱蔽的地方）
element.scrollLeft 返回當(dāng)前視圖中的實(shí)際元素的左邊緣和左邊緣之間的距離
element.scrollTop 返回當(dāng)前視圖中的實(shí)際元素的頂部邊緣和頂部邊緣之間的距離
element.scrollWidth 返回元素的整個(gè)寬度（包括帶滾動(dòng)條的隱蔽的地方）
element.setAttribute() 設(shè)置或者改變指定屬性并指定值。
element.setAttributeNode() 設(shè)置或者改變指定屬性節(jié)點(diǎn)。
element.setIdAttribute()  
element.setIdAttributeNode()  
element.setUserData() 在元素中為指定鍵值關(guān)聯(lián)對象。
element.style 設(shè)置或返回元素的樣式屬性
element.tabIndex 設(shè)置或返回元素的標(biāo)簽順序。
element.tagName 作為一個(gè)字符串返回某個(gè)元素的標(biāo)記名（大寫）
element.textContent 設(shè)置或返回一個(gè)節(jié)點(diǎn)和它的文本內(nèi)容
element.title 設(shè)置或返回元素的title屬性
element.toString() 一個(gè)元素轉(zhuǎn)換成字符串
   
nodelist.item() 返回某個(gè)元素基于文檔樹的索引
nodelist.length 返回節(jié)點(diǎn)列表的節(jié)點(diǎn)數(shù)目。
以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號