时间：2021-07-01 10:21:17 帮助过：30人阅读
Element接口表示一个元素，该接口扩展自Node接口，自然继承了Node接口的属性和方法，也有一套针对元素的属性和方法。
Element接口常见的属性比较少，常用的就是一个只读的tagName属性，该属性返回元素名，数据类型是DOMString。
Element接口定义的方法也主要是针对属性操作，常见方法如下：
| 方法名 | 数据类型 | 说明 |
| getAttribute | DOMString | 返回对应属性 |
| getAttributeNode | Attr | 返回对应属性节点 |
| getAttributeNodeNS | Attr | 返回属性命名空间 |
| getAttributeNS | DOMString | 返回对应属性节点 |
| getElementsByTagName | NodeList | 节点名获取元素列表 |
| getElementsByTagNameNS | NodeList | 根据指定空间内的标签名搜索所有元素 |
| hasAttribute | Boolean | 判断属性是否存在 |
| hasAttributeNS | Boolean | 判断属性是否存在 |
| removeAttribute | void | 删除属性 |
| removeAttributeNode | Attr | 删除属性 |
| removeAttributeNS | void | 删除属性 |
| setAttribute | void | 添加属性 |
| setAttributeNode | Attr | 添加属性节点 |
| setAttributeNodeNS | Attr | 添加属性节点 |
| setAttributeNS | void | 添加属性 |
二、HTMLElement接口
该接口继承自Element接口，同样用于表示一个HTML元素，拥有自定义的属性和方法。
1、属性列表
| 属性名 | 数据类型 | 只读 | 说明 |
| innerHTML | DOMString | 获取或设置HTML内容 | |
| outerHTML | DOMString | 设置或获取对象的纯文本形式 | |
| id | DOMString | 对应元素的id属性 | |
| title | DOMString | 对应元素的title属性 | |
| lang | DOMString | 对应元素的lang属性 | |
| dir | DOMString | 对应元素的dir属性 | |
| className | DOMString | 对应元素的class属性 | |
| classList | DOMTokeList | Y | 返回元素的class属性作为DOMTokenList对象 |
| dataset | DOMStringMap | Y | 返回自定义的data-*属性集合 |
| hidden | Boolean | 对应元素的hidden属性 | |
| tabIndex | long | 对应元素的tabIndex属性 | |
| accessKey | DOMString | 对应元素的accessKey属性 | |
| accessKeyLabel | DOMString | Y | 返回热键组合 |
| draggable | Boolean | 对应元素的draggable属性 | |
| contentEditable | DOMString | 对应元素的contentEditable属性 | |
| isContentEditable | Boolean | Y | 判断元素是否可用编辑 |
| contextMenu | HTMLMenuElement | 对应元素的contextMenu属性 | |
| spellcheck | DOMString | 对应元素的spellcheck属性 | |
| commandType | DOMString | Y | 对应元素的commandType属性 |
| label | DOMString | Y | 对应元素的label属性 |
| icon | DOMString | Y | 对应元素的icon属性 |
| disabled | Boolean | Y | 对应元素的disabled属性 |
| checked | Boolean | Y | 对应元素的checked属性 |
| style | CSSStyleDeclaration | Y | 对应元素的style属性 |
2、方法列表
| 方法名 | 数据类型 | 说明 |
| getElementsByClassName | NodeList | 根据元素的class属性获取所有元素 |
| insertAdjacentHTML | void | 在指定位置插入HTML或XML |
| click | void | 单击元素，触发click事件 |
| scrollIntoView | void | 滚动元素内容到视点内 |
| focus | void | 元素获取焦点 |
| blur | void | 元素失去焦点 |
原文首发：
下一篇：DOM笔记（四）：HTML 5 DOM复杂数据类型