DOM笔记(三):Element接口和HTMLElement接口_html/css_WEB-ITnose

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月6日21:25:07 评论 7 views 1655字阅读5分31秒

一、Element接口

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

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

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

方法名数据类型说明
getAttributeDOMString返回对应属性
getAttributeNodeAttr返回对应属性节点
getAttributeNodeNSAttr返回属性命名空间
getAttributeNSDOMString返回对应属性节点
getElementsByTagNameNodeList节点名获取元素列表
getElementsByTagNameNSNodeList根据指定空间内的标签名搜索所有元素
hasAttributeBoolean判断属性是否存在
hasAttributeNSBoolean判断属性是否存在
removeAttributevoid删除属性
removeAttributeNodeAttr删除属性
removeAttributeNSvoid删除属性
setAttributevoid添加属性
setAttributeNodeAttr添加属性节点
setAttributeNodeNSAttr添加属性节点
setAttributeNSvoid添加属性

二、HTMLElement接口

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

1、属性列表

属性名数据类型只读说明
innerHTMLDOMString获取或设置HTML内容
outerHTMLDOMString设置或获取对象的纯文本形式
idDOMString对应元素的id属性
titleDOMString对应元素的title属性
langDOMString对应元素的lang属性
dirDOMString对应元素的dir属性
classNameDOMString对应元素的class属性
classListDOMTokeListY返回元素的class属性作为DOMTokenList对象
datasetDOMStringMapY返回自定义的data-*属性集合
hiddenBoolean对应元素的hidden属性
tabIndexlong对应元素的tabIndex属性
accessKeyDOMString对应元素的accessKey属性
accessKeyLabelDOMStringY返回热键组合
draggableBoolean对应元素的draggable属性
contentEditableDOMString对应元素的contentEditable属性
isContentEditableBooleanY判断元素是否可用编辑
contextMenuHTMLMenuElement对应元素的contextMenu属性
spellcheckDOMString对应元素的spellcheck属性
commandTypeDOMStringY对应元素的commandType属性
labelDOMStringY对应元素的label属性
iconDOMStringY对应元素的icon属性
disabledBooleanY对应元素的disabled属性
checkedBooleanY对应元素的checked属性
styleCSSStyleDeclarationY对应元素的style属性

2、方法列表

方法名数据类型说明
getElementsByClassNameNodeList根据元素的class属性获取所有元素
insertAdjacentHTMLvoid在指定位置插入HTML或XML
clickvoid单击元素,触发click事件
scrollIntoViewvoid滚动元素内容到视点内
focusvoid元素获取焦点
blurvoid元素失去焦点

原文首发:

下一篇:DOM笔记(四):HTML 5 DOM复杂数据类型

继续阅读
css的一些小技巧!页面视觉差!_html/css_WEB-ITnose html教程

css的一些小技巧!页面视觉差!_html/css_WEB-ITnose

相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎。 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括。这导致了一个很好的光学效应,使参观者的注意。 在网页设计中,为了实现这...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: