DOM笔记（三）：Element接口和HTMLElement接口

柔光的暖阳◎ 2022-08-06 01:20 141阅读 0赞

一、Element接口

Element接口表示一个元素，该接口扩展自Node接口，自然继承了Node接口的属性和方法，也有一套针对元素的属性和方法。

Element接口常见的属性比较少，常用的就是一个只读的tagName属性，该属性返回元素名，数据类型是DOMString。

Element接口定义的方法也主要是针对属性操作，常见方法如下：

<table> 
 <tbody> 
 <tr> 
 <td>方法名</td> 
 <td>数据类型</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>getAttribute</td> 
 <td>DOMString</td> 
 <td>返回对应属性</td> 
 </tr> 
 <tr> 
 <td>getAttributeNode</td> 
 <td>Attr</td> 
 <td>返回对应属性节点</td> 
 </tr> 
 <tr> 
 <td>getAttributeNodeNS</td> 
 <td>Attr</td> 
 <td>返回属性命名空间</td> 
 </tr> 
 <tr> 
 <td>getAttributeNS</td> 
 <td>DOMString</td> 
 <td>返回对应属性节点</td> 
 </tr> 
 <tr> 
 <td>getElementsByTagName</td> 
 <td>NodeList</td> 
 <td>节点名获取元素列表</td> 
 </tr> 
 <tr> 
 <td>getElementsByTagNameNS</td> 
 <td>NodeList</td> 
 <td>根据指定空间内的标签名搜索所有元素</td> 
 </tr> 
 <tr> 
 <td>hasAttribute</td> 
 <td>Boolean</td> 
 <td>判断属性是否存在</td> 
 </tr> 
 <tr> 
 <td>hasAttributeNS</td> 
 <td>Boolean</td> 
 <td>判断属性是否存在</td> 
 </tr> 
 <tr> 
 <td>removeAttribute</td> 
 <td>void</td> 
 <td>删除属性</td> 
 </tr> 
 <tr> 
 <td>removeAttributeNode</td> 
 <td>Attr</td> 
 <td>删除属性</td> 
 </tr> 
 <tr> 
 <td>removeAttributeNS</td> 
 <td>void</td> 
 <td>删除属性</td> 
 </tr> 
 <tr> 
 <td>setAttribute</td> 
 <td>void</td> 
 <td>添加属性</td> 
 </tr> 
 <tr> 
 <td>setAttributeNode</td> 
 <td>Attr</td> 
 <td>添加属性节点</td> 
 </tr> 
 <tr> 
 <td>setAttributeNodeNS</td> 
 <td>Attr</td> 
 <td>添加属性节点</td> 
 </tr> 
 <tr> 
 <td>setAttributeNS</td> 
 <td>void</td> 
 <td>添加属性</td> 
 </tr> 
 </tbody> 
</table>

二、HTMLElement接口

该接口继承自Element接口，同样用于表示一个HTML元素，拥有自定义的属性和方法。

1、属性列表

<table> 
 <tbody> 
 <tr> 
 <td>属性名</td> 
 <td>数据类型</td> 
 <td>只读</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>innerHTML</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>获取或设置HTML内容</td> 
 </tr> 
 <tr> 
 <td>outerHTML</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>设置或获取对象的纯文本形式</td> 
 </tr> 
 <tr> 
 <td>id</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>对应元素的id属性</td> 
 </tr> 
 <tr> 
 <td>title</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>对应元素的title属性</td> 
 </tr> 
 <tr> 
 <td>lang</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>对应元素的lang属性</td> 
 </tr> 
 <tr> 
 <td>dir</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>对应元素的dir属性</td> 
 </tr> 
 <tr> 
 <td>className</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>对应元素的class属性</td> 
 </tr> 
 <tr> 
 <td>classList</td> 
 <td>DOMTokeList</td> 
 <td>Y</td> 
 <td>返回元素的class属性作为DOMTokenList对象</td> 
 </tr> 
 <tr> 
 <td>dataset</td> 
 <td>DOMStringMap</td> 
 <td>Y</td> 
 <td>返回自定义的data-*属性集合</td> 
 </tr> 
 <tr> 
 <td>hidden</td> 
 <td>Boolean</td> 
 <td> </td> 
 <td>对应元素的hidden属性</td> 
 </tr> 
 <tr> 
 <td>tabIndex</td> 
 <td>long</td> 
 <td> </td> 
 <td>对应元素的tabIndex属性</td> 
 </tr> 
 <tr> 
 <td>accessKey</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>对应元素的accessKey属性</td> 
 </tr> 
 <tr> 
 <td>accessKeyLabel</td> 
 <td>DOMString</td> 
 <td>Y</td> 
 <td>返回热键组合</td> 
 </tr> 
 <tr> 
 <td>draggable</td> 
 <td>Boolean</td> 
 <td> </td> 
 <td>对应元素的draggable属性</td> 
 </tr> 
 <tr> 
 <td>contentEditable</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>对应元素的contentEditable属性</td> 
 </tr> 
 <tr> 
 <td>isContentEditable</td> 
 <td>Boolean</td> 
 <td>Y</td> 
 <td>判断元素是否可用编辑</td> 
 </tr> 
 <tr> 
 <td>contextMenu</td> 
 <td>HTMLMenuElement</td> 
 <td> </td> 
 <td>对应元素的contextMenu属性</td> 
 </tr> 
 <tr> 
 <td>spellcheck</td> 
 <td>DOMString</td> 
 <td> </td> 
 <td>对应元素的spellcheck属性</td> 
 </tr> 
 <tr> 
 <td>commandType</td> 
 <td>DOMString</td> 
 <td>Y</td> 
 <td>对应元素的commandType属性</td> 
 </tr> 
 <tr> 
 <td>label</td> 
 <td>DOMString</td> 
 <td>Y</td> 
 <td>对应元素的label属性</td> 
 </tr> 
 <tr> 
 <td>icon</td> 
 <td>DOMString</td> 
 <td>Y</td> 
 <td>对应元素的icon属性</td> 
 </tr> 
 <tr> 
 <td>disabled</td> 
 <td>Boolean</td> 
 <td>Y</td> 
 <td>对应元素的disabled属性</td> 
 </tr> 
 <tr> 
 <td>checked</td> 
 <td>Boolean</td> 
 <td>Y</td> 
 <td>对应元素的checked属性</td> 
 </tr> 
 <tr> 
 <td>style</td> 
 <td>CSSStyleDeclaration</td> 
 <td>Y</td> 
 <td>对应元素的style属性</td> 
 </tr> 
 </tbody> 
</table>

2、方法列表

原文首发：[http://www.ido321.com/1321.html][http_www.ido321.com_1321.html]  
  
下一篇：[DOM笔记（四）：HTML 5 DOM复杂数据类型 ][DOM_HTML 5 DOM_]

[http_www.ido321.com_1321.html]: http://www.ido321.com/1321.html
[DOM_HTML 5 DOM_]: http://www.ido321.com/1324.html