DOM Element 对象

# DOM Element 对象

Element MDN说明

Element 是一个通用性非常强的基类,所有 Document (opens new window) 对象下的对象都继承自它。这个接口描述了所有相同种类的元素所普遍具有的方法和属性。一些接口继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。例如, HTMLElement (opens new window) 接口是所有 HTML 元素的基本接口,而 SVGElement (opens new window) 接口是所有 SVG 元素的基础。大多数功能是在这个类的更深层级(hierarchy)的接口中被进一步制定的。

在 Web 平台的领域以外的语言,比如 XUL,通过 XULElement 接口,同样也实现了 Element 接口。

# HTML DOM 节点

在 HTML DOM (文档对象模型)中,每个部分都是节点:

  • 文档本身是文档节点
  • 所有 HTML 元素是元素节点
  • 所有 HTML 属性是属性节点
  • HTML 元素内的文本是文本节点
  • 注释是注释节点

# Element 对象

在 HTML DOM 中,Element 对象表示 HTML 元素。

Element 对象可以拥有类型为1元素节点、2文本节点、3注释节点的4子节点。

NodeList 对象表示节点列表,比如 HTML 元素的子节点集合。

所有浏览器都支持 Element 对象和 NodeList 对象。

# 属性和方法

下面的属性和方法可用于所有 HTML 元素上:来自w3c (opens new window)

属性 / 方法 描述
element.accessKey (opens new window) 设置或返回元素的快捷键。
element.appendChild() (opens new window) 向元素添加新的子节点,作为最后一个子节点。
element.attributes (opens new window) 返回元素属性的 NamedNodeMap。
element.childNodes (opens new window) 返回元素子节点的 NodeList。
element.className (opens new window) 设置或返回元素的 class 属性。
element.clientHeight 返回元素的可见高度。
element.clientWidth 返回元素的可见宽度。
element.cloneNode() (opens new window) 克隆元素。
element.compareDocumentPosition() (opens new window) 比较两个元素的文档位置。
element.contentEditable (opens new window) 设置或返回元素的文本方向。
element.dir (opens new window) 设置或返回元素的内容是否可编辑。
element.firstChild (opens new window) 返回元素的首个子。
element.getAttribute() (opens new window) 返回元素节点的指定属性值。
element.getAttributeNode() (opens new window) 返回指定的属性节点。
element.getElementsByTagName() (opens new window) 返回拥有指定标签名的所有子元素的集合。
element.getFeature() 返回实现了指定特性的 API 的某个对象。
element.getUserData() 返回关联元素上键的对象。
element.hasAttribute() (opens new window) 如果元素拥有指定属性,则返回true,否则返回 false。
element.hasAttributes() (opens new window) 如果元素拥有属性,则返回 true,否则返回 false。
element.hasChildNodes() (opens new window) 如果元素拥有子节点,则返回 true,否则 false。
element.id (opens new window) 设置或返回元素的 id。
element.innerHTML (opens new window) 设置或返回元素的内容。
element.insertBefore() (opens new window) 在指定的已有的子节点之前插入新节点。
element.isContentEditable (opens new window) 设置或返回元素的内容。
element.isDefaultNamespace() (opens new window) 如果指定的 namespaceURI 是默认的,则返回 true,否则返回 false。
element.isEqualNode() (opens new window) 检查两个元素是否相等。
element.isSameNode() (opens new window) 检查两个元素是否是相同的节点。
element.isSupported() (opens new window) 如果元素支持指定特性,则返回 true。
element.lang (opens new window) 设置或返回元素的语言代码。
element.lastChild (opens new window) 返回元素的最后一个子元素。
element.namespaceURI (opens new window) 返回元素的 namespace URI。
element.nextSibling (opens new window) 返回位于相同节点树层级的下一个节点。
element.nodeName (opens new window) 返回元素的名称。
element.nodeType (opens new window) 返回元素的节点类型。
element.nodeValue (opens new window) 设置或返回元素值。
element.normalize() (opens new window) 合并元素中相邻的文本节点,并移除空的文本节点。
element.offsetHeight 返回元素的高度。
element.offsetWidth 返回元素的宽度。
element.offsetLeft 返回元素的水平偏移位置。
element.offsetParent 返回元素的偏移容器。
element.offsetTop 返回元素的垂直偏移位置。
element.ownerDocument (opens new window) 返回元素的根元素(文档对象)。
element.parentNode (opens new window) 返回元素的父节点。
element.previousSibling (opens new window) 返回位于相同节点树层级的前一个元素。
element.removeAttribute() (opens new window) 从元素中移除指定属性。
element.removeAttributeNode() (opens new window) 移除指定的属性节点,并返回被移除的节点。
element.removeChild() (opens new window) 从元素中移除子节点。
element.replaceChild() (opens new window) 替换元素中的子节点。
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。
element.setAttribute() (opens new window) 把指定属性设置或更改为指定值。
element.setAttributeNode() (opens new window) 设置或更改指定属性节点。
element.setIdAttribute()
element.setIdAttributeNode()
element.setUserData() 把对象关联到元素上的键。
element.style 设置或返回元素的 style 属性。
element.tabIndex (opens new window) 设置或返回元素的 tab 键控制次序。
element.tagName (opens new window) 返回元素的标签名。
element.textContent (opens new window) 设置或返回节点及其后代的文本内容。
element.title (opens new window) 设置或返回元素的 title 属性。
element.toString() 把元素转换为字符串。
nodelist.item() (opens new window) 返回 NodeList 中位于指定下标的节点。
nodelist.length (opens new window) 返回 NodeList 中的节点数。