HTML DOM 元素對象
HTML DOM 節點
在HTML DOM (Document Object Model)中,每個東西都是節點 :
- 文檔本身就是一個文檔對象
- 所有HTML 元素都是元素節點
- 所有HTML 屬性都是屬性節點
- 插入到HTML 元素文本是文本節點
- 註釋是註釋節點
元素對象
在HTML DOM中, 元素對象代表著一個HTML元素。
元素對象的子節點可以是,可以是元素節點,文本節點,註釋節點。
NodeList對象代表了節點列表,類似於HTML元素的子節點集合。
元素可以有屬性。 屬性屬於屬性節點(查看下一章節)。
瀏覽器支持
所有主流瀏覽器都支持元素對象和NodeList 對象。 .
屬性和方法
以上屬性和方法可適用於所有HTML 元素:
屬性/ 方法 | 描述 |
---|---|
element .accessKey | 設置或返回accesskey一個元素 |
element .addEventListener() | 向指定元素添加事件句柄 |
element .appendChild() | 為元素添加一個新的子元素 |
element .attributes | 返回一個元素的屬性數組 |
element .childNodes | 返回元素的一個子節點的數組 |
element .classlist | 返回元素的類名,作為DOMTokenList 對象。 |
element .className | 設置或返回元素的class屬性 |
element.clientHeight | 在頁面上返回內容的可視高度(不包括邊框,邊距或滾動條) |
element.clientWidth | 在頁面上返回內容的可視寬度(不包括邊框,邊距或滾動條) |
element .cloneNode() | 克隆某個元素 |
element .compareDocumentPosition() | 比較兩個元素的文檔位置。 |
element .contentEditable | 設置或返回元素的內容是否可編輯 |
element .dir | 設置或返回一個元素中的文本方向 |
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 .namespaceURI | 返回命名空間的URI。 |
element .nextSibling | 返回該元素緊跟的一個元素 |
element .nodeName | 返回元素的標記名(大寫) |
element .nodeType | 返回元素的節點類型 |
element .nodeValue | 返回元素的節點值 |
element .normalize() | 使得此成為一個"normal"的形式,其中只有結構(如元素,註釋,處理指令,CDATA節和實體引用)隔開Text節點,即元素(包括屬性)下面的所有文本節點,既沒有相鄰的文本節點也沒有空的文本節點 |
element.offsetHeight | 返回,任何一個元素的高度包括邊框和填充,但不是邊距 |
element.offsetWidth | 返回元素的寬度,包括邊框和填充,但不是邊距 |
element.offsetLeft | 返回當前元素的相對水平偏移位置的偏移容器 |
element.offsetParent | 返回元素的偏移容器 |
element.offsetTop | 返回當前元素的相對垂直偏移位置的偏移容器 |
element .ownerDocument | 返回元素的根元素(文檔對象) |
element .parentNode | 返回元素的父節點 |
element .previousSibling | 返回某個元素緊接之前元素 |
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 | 返回節點列表的節點數目。 |