Element基类
描述: 定义了所有元素节点的公有属性与方法
说明: Element是非常通用的基类,所有 Document对象下的对象都继承它. 这个接口描述了所有相同种类的元素所普遍具有的方法和属性
原型属性
| 属性名 | 值 | 类型 | 描述 |
|---|
| tagName | 标签名 | String | 返回此元素的标签名(大写) |
| name | name属性值 | String | 获取元素的name属性 |
| id | id属性值 | String | 返回此元素的id标识 |
| className | class属性值 | String | 返回此元素的class属性值 |
| currentStyle | css属性集合 | [object CSS2Properties] | 旧版IE实现, 等同于标准的window.getComputedStyle |
| classList | css列表 | [object DOMTokenList] | 返回一个元素的类属性的实时DOMTokenList 集合 |
| attributes | 属性集合 | [object NamedNodeMap] | 返回该元素所有属性节点的一个实时集合 |
| innerHTML | html字符串 | String | 设置或获取当前元素的所有后代html节点 |
| outerHTML | html字符串 | String | 设置或获取当前元素和所有后代html节点 |
| children | 子元素集合 | [object HTMLCollection] | 一个Node的子elements是一个动态更新的集合 |
| firstElementChild | 第一个子元素 | element对象 | 返回对象的第一个子Element或null |
| lastElementChild | 最后一个子元素 | element对象 | 返回对象的最后子Element或null |
| previousElementSibling | 上一个兄弟元素 | element对象 | 此元素的上一个元素节点 |
| nextElementSibling | 下一个兄弟元素 | element对象 | 此元素的下一个元素节点 |
| childElementCount | 子元素数量 | Number | 返回当前元素的子元素数 |
| clientWidth | 数值 | Number | 元素的盒内宽度 |
| clientHeight | 数值 | Number | 元素的盒内高度 |
| clientLeft | 数值 | Number | 元素的左边框的宽度 |
| clientTop | 数值 | Number | 元素顶部边框的宽度 |
| scrollWidth | 数值 | Number | 元素内容的宽度, 最小与clientWidth相等. |
| scrollHeight | 数值 | Number | 元素内容的高度, 最小与clientHeight相等. |
| scrollLeft | 数值 | Number | 读取或设置元素滚动条到元素左边的距离=元素的左边到视中可见区域的左边 |
| scrollTop | 数值 | Number | 读取或设置元素滚动条到元素顶边的距离=元素的顶边到视中可见区域的顶边 |
原型方法
| 方法名 | 返回值 | 类型 | 描述 |
|---|
| getAttribute | 属性值 | String | Null | 根据属性名返回元素上一个指定的属性值。如果指定的属性不存在,则返回 null 或 “” (空字符串) |
| getAttributeNames | 所有属性名 | Array | 返回一个Array,该数组包含此元素的所有属性名称 |
| getAttributeNode | 属性节点 | [object Attr] | 返回此元素指定属性名的指定attr节点类型 |
| setAttribute | undefined | Undefined | 设置此元素的属性值, 没有此属性名则创建 |
| setAttributeNode | 被替换的属性节点 | [object Attr] | 为此元素添加Attr对象的属性节点, 返回被替换掉的属性节点 |
| removeAttribute | undefined | Undefined | 在此元素上移除某个属性 |
| removeAttributeNode | 被删除的属性节点 | [object Attr] | 在此元素上 删除指定的Attr属性节点 |
| hasAttribute | true | false | Boolean | 该元素是否包含有指定的属性 |
| getElementsByClassName | 子元素列表 | [object HTMLCollection] | 返回动态包含有指定的class属性的所有子元素集合 |
| getElementsByTagName | 子元素列表 | [object HTMLCollection] | 返回动态的包含所有指定标签名的元素的HTML集合 |
| querySelector | 第一个子元素 | element对象 | 返回指定的选择器组匹配的第一个子元素 |
| querySelectorAll | 所有子元素 | [object NodeList] | 返回指定的选择器组匹配的NodeList元素列表 |
| insertAdjacentElement | 被插入的元素 | element对象 | 将一个给定的元素节点插入到相对于被调用的元素的给定的一个位置 |
| insertAdjacentHTML | 被插入的html文本 | String | 指定的文本解析为HTML或XML,并将结果节点插入到DOM树中的指定位置 |
| insertAdjacentText | 被插入的文本 | String | 将文本插入到指定的位置 |
| getBoundingClientRect | 元素信息 | [object DOMRect] | 返回元素的大小及其相对于视口的位置 |
| getClientRects | DOMRect集合 | [object DOMRectList] | 返回一个指向客户端中每一个盒子的边界矩形的矩形集合 |
| setCapture | undefined | Undefined | 把鼠标事件重新定向到这个元素,直到鼠标按钮被释放或者 document.releaseCapture() 被调用。 |
Adjacent -参数 position位置选项
- beforebegin —— 元素自身的前面
- afterend —— 元素自身的后面
- afterbegin —— 插入元素内部的第一个子节点之前
- beforeend —— 插入元素内部的最后一个子节点之后