简体中文

Element对象

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

属性

所有属性继承自它的祖先接口Node，并且扩展了Node的父接口EventTarget，并且从ParentNode、ChildNode、NonDocumentTypeChildNode和Animatable承了属性。

  • Element.prototype.attributes: 只读，返回一个与该元素相关的所有属性集合NamedNodeMap。
  • Element.prototype.classList: 只读，返回该元素包含的class属性，是一个DOMTokenList。
  • Element.prototype.className: 一个DOMString，表示这个元素的class。
  • Element.prototype.clientHeight: 只读，返回Number表示内部相对于外层元素的高度。
  • Element.prototype.clientLeft: 只读，返回Number表示该元素距离它左边界的宽度。
  • Element.prototype.clientTop: 只读，返回Number表示该元素距离它上边界的高度。
  • Element.prototype.clientWidth: 只读，返回Number表示该元素内部的宽度。
  • Element.prototype.computedName: 只读，返回一个DOMString，其中包含公开给可访问性的标签。
  • Element.prototype.computedRole: 只读，返回一个DOMString，其中包含应用于特定元素的ARIA角色。
  • Element.prototype.id: 是一个DOMString表示这个元素的id。
  • Element.prototype.innerHTML: 返回一个DOMString，表示这个元素的内容文本。
  • Element.prototype.localName: 只读，返回一个DOMString表示这个元素名称本地化的部分。
  • Element.prototype.namespaceURI: 只读，元素对应的namespace URI，如果没有则返回null。
  • NonDocumentTypeChildNode.nextElementSibling: 只读，返回一个Element表示该元素下一个兄弟节点，如果为null表示不存在。
  • Element.prototype.outerHTML:返回一个DOMString，获取该DOM元素及其后代的HTML文本，在设置它的时候，会从给定的字符串开始解析，替换自身。
  • Element.prototype.prefix: 只读，表示元素的名称空间前缀的DOMString，如果未指定前缀，则为null。
  • NonDocumentTypeChildNode.prototype.previousElementSibling: 只读，返回一个Element表示该元素上一个兄弟节点, 如果为null表示不存在。
  • Element.prototype.scrollHeight: 只读，返回类型为Number，表示元素的滚动视图高度。
  • Element.prototype.scrollLeft: 返回类型为Number，表示该元素横向滚动条距离最左的位移。
  • Element.prototype.scrollLeftMax: 只读，返回类型为Number表示该元素横向滚动条可移动的最大值。
  • Element.prototype.scrollTop: 返回类型为Number，表示该元素纵向滚动条距离。
  • Element.prototype.scrollTopMax: 只读，返回类型为Number，表示该元素纵向滚动条可移动的最大值。
  • Element.prototype.scrollWidth: 只读，返回类型为Number，表示元素的滚动视图宽度。
  • Element.prototype.shadowRoot: 只读，返回由元素托管的开放shadowRoot，如果没有开放的shadowRoot，则返回null。
  • Element.prototype.openOrClosedShadowRoot: 只读，返回由元素托管的shadowRoot，无论其打开还是关闭，仅适用于WebExtensions。
  • Element.prototype.slot: 返回插入元素的DOM插槽的名称。
  • Element.prototype.tabStop: 返回一个布尔值，指示元素是否可以通过Tab键接收输入焦点。
  • Element.prototype.tagName: 只读，返回一个带有给定元素标记名称的字符串。
  • Element.prototype.undoManager: 只读，返回与元素关联的UndoManager。
  • Element.prototype.undoScope: 返回一个布尔值，指示该元素是否是撤消作用域主机。
  • Slotable.prototype.assignedSlot: 只读，返回HTMLSlotElement，表示节点所插入的<solt>。

方法

从其父节点及其父节点EventTarget继承方法，并实现ParentNode、ChildNode、NonDocumentTypeChildNode和Animatable的方法。

  • EventTarget.prototype.addEventListener(): 将事件处理程序注册到元素上的特定事件类型。
  • Element.prototype.attachShadow(): 将一个shadow DOM树附加到指定的元素，并返回对其ShadowRoot的引用。
  • Element.prototype.animate(): 在元素上创建和运行动画的快捷方法，返回创建的动画对象实例。
  • Element.prototype.closest(): 返回与参数中给定的选择器匹配的当前元素或当前元素本身的最接近祖先的Element。
  • Element.prototype.createShadowRoot(): 在元素上创建shadow DOM，将其转换为shadow host，返回ShadowRoot。
  • Element.prototype.computedStyleMap(): 返回StylePropertyMapReadOnly接口，该接口提供CSS声明块的只读表示形式，它是CSSStyleDeclaration的替代形式。
  • EventTarget.dispatchEvent(): 将事件调度到DOM中的此节点，并返回一个布尔值，该布尔值指示是否没有处理程序取消该事件。
  • Element.prototype.getAnimations(): 返回当前在元素上活动的Animation对象的数组。
  • Element.prototype.getAttribute(): 从当前节点检索命名属性的值，并将其作为对象返回。
  • Element.prototype.getAttributeNames(): 返回当前元素的属性名称数组。
  • Element.prototype.getAttributeNS(): 从当前节点检索具有指定名称和名称空间的属性的值，并将其作为对象返回。
  • Element.prototype.getAttributeNode(): 从当前节点检索命名属性的节点表示形式，并将其作为属性返回。
  • Element.prototype.getAttributeNodeNS(): 从当前节点检索具有指定名称和名称空间的属性的节点表示形式，并将其作为属性返回。
  • Element.prototype.getBoundingClientRect(): 返回元素的大小及其相对于视口的位置。
  • Element.prototype.getClientRects(): 返回矩形的集合，这些矩形指示客户端中每行文本的边框。
  • Element.prototype.getElementsByClassName(): 参数中给出类的列表，返回一个动态的HTMLCollection，包含了所有持有这些类的后代元素。
  • Element.prototype.getElementsByTagName(): 返回一个动态的HTMLCollection，包含当前元素中特定标记名称的所有后代元素。
  • Element.prototype.getElementsByTagNameNS(): 返回一个动态的HTMLCollection，包含当前元素中特定标记名称和命名空间的所有后代元素。
  • Element.prototype.hasAttribute(): 返回一个布尔值，指示元素是否具有指定的属性。
  • Element.prototype.hasAttributeNS():返回一个布尔值，指示元素在指定的名称空间中是否具有指定的属性。
  • Element.prototype.hasAttributes(): 返回一个布尔值，指示元素是否有一个或多个HTML属性。
  • Element.prototype.hasPointerCapture(): 指示在其上被调用的元素是否具有由给定指针ID标识的指针的指针捕获。
  • Element.prototype.insertAdjacentElement(): 将一个给定的元素节点插入到相对于调用它的元素的给定位置。
  • Element.prototype.insertAdjacentHTML(): 将文本解析为HTML或XML，并将结果节点插入给定位置的树中。
  • Element.prototype.insertAdjacentText(): 在相对于调用它的元素的给定位置插入给定的文本节点。
  • Element.prototype.matches(): 返回一个布尔值，指示指定的选择器字符串是否选择该元素。
  • Element.prototype.pseudo(): 返回一个CSSPseudoElement，它表示由指定的伪元素选择器匹配的子伪元素。
  • Element.prototype.querySelector(): 返回与指定的选择器字符串相对于元素匹配的第一个Node。
  • Element.prototype.querySelectorAll(): 返回与指定的选择器字符串相对于元素匹配的节点的NodeList。
  • Element.prototype.releasePointerCapture(): 释放(停止)先前为特定指针事件设置的指针捕获。
  • ChildNode.prototype.remove(): 从其父级的子级列表中删除该元素。
  • Element.prototype.removeAttribute(): 从当前节点中移除命名属性。
  • Element.prototype.removeAttributeNS(): 从当前节点中删除具有指定名称和名称空间的属性。
  • Element.prototype.removeAttributeNode(): 从当前节点中删除命名属性的节点表示形式。
  • EventTarget.prototype.removeEventListener(): 从元素中移除事件监听器。
  • Element.prototype.requestFullscreen(): 异步请求浏览器将元素设置为全屏。
  • Element.prototype.requestPointerLock(): 允许异步请求将指针锁定在给定元素上。
  • Element.prototype.scroll(): 滚动到给定元素内的一组特定坐标。
  • Element.prototype.scrollBy(): 按给定量滚动元素。
  • Element.prototype.scrollIntoView(): 滚动页面，直到元素进入视图。
  • Element.prototype.scrollTo(): 滚动到给定元素内的一组特定坐标。
  • Element.prototype.setAttribute(): 设置当前节点的命名属性的值。
  • Element.prototype.setAttributeNS(): 使用指定的名称和名称空间从当前节点设置属性的值。
  • Element.prototype.setAttributeNode(): 从当前节点设置命名属性的节点表示形式。
  • Element.prototype.setAttributeNodeNS(): 从当前节点设置具有指定名称和名称空间的属性的节点表示形式。
  • Element.prototype.setCapture(): 设置鼠标事件捕获，将所有鼠标事件重定向到此元素。
  • Element.prototype.setPointerCapture(): 指定一个特定元素作为将来指针事件的捕获目标。
  • Element.prototype.toggleAttribute(): 在指定元素上切换布尔属性，如果布尔属性存在，则将其删除，如果布尔属性不存在，则将其添加。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Element