首页 > 代码库 > DOM笔记(三):Element接口和HTMLElement接口
DOM笔记(三):Element接口和HTMLElement接口
一、Element接口
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 | 元素失去焦点 |
原文首发:http://www.ido321.com/1321.html
下一篇:DOM笔记(四):HTML 5 DOM复杂数据类型
下一篇:DOM笔记(四):HTML 5 DOM复杂数据类型
DOM笔记(三):Element接口和HTMLElement接口
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。