Element对象

Element对象

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

属性

所有属性继承自它的祖先接口Node,并且扩展了Node的父接口EventTarget,并且从ParentNodeChildNodeNonDocumentTypeChildNodeAnimatable承了属性。

  • 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继承方法,并实现ParentNodeChildNodeNonDocumentTypeChildNodeAnimatable的方法。

  • 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(): 将文本解析为HTMLXML,并将结果节点插入给定位置的树中。
  • 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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/5861.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

QT-QTCreator环境配置

准备工作&#xff1a; 下载QT: 链接&#xff1a;https://pan.baidu.com/s/1prJcsC4DGqhKiXvLuPQFVA?pwd60b3 提取码&#xff1a;60b3下载WindowsKits&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1QNiS3HpbH5M5kXx5AhkqnQ?pwde2h8 提取码&#xff1a;e2h8安装的…

Windows环境下基于CMake构建Lua

Windows环境下基于CMake构建Lua 环境&#xff01;&#xff01;&#xff01;注意&#xff1a; lua-5.4.6.tar.gz压缩包中&#xff0c;并未提供luac.c文件&#xff0c;无法构建luac.exe&#xff0c;可以从lua-5.4.5.tar.gz压缩包中拷贝使用 一、搭建基于CMake构建的Lua环境二、构…

Python-快速搭建一个管理平台

目录 &#x1f4dc; 准备工作 一、项目介绍 ✨ 二、制作数据库表 添加信息 ⚒️ 三、运行client.exe &#x1f680; 1、连接数据库&#xff0c;选择对应表&#xff0c;生成代码 2、把后端代码依次复制到项目中 3、把前端代码依次复制到前端项目中 4、添加路由 四、运行后端项目…

python生成随机字符串

随机字符的场景大致有以下场景&#xff1a; 1.产生随机字符串 无数字 2.产生随机长度的字符串 无数字、有数字 3.产生随机手机号 4.产生随机n位的数字 5.产生随机n以内的数字 随机使用的两种思路如下&#xff1a; 一&#xff1a;使用random.randint(0,n) 我们有一个包含…

《21天学通C++》(第十三章) 类型转换运算符

1.为什么需要类型转换&#xff1f; ①兼容不同类型&#xff1a; 在C中不同类型的数据不能直接进行运算&#xff0c;如需要则要进行类型转换 ②指针转换&#xff1a; 在处理指针时&#xff0c;经常需要把一个类型的指针转化为另一个类型的指针 ③与C语言兼容&#xff1a; C兼…

[1678]旅游景点信息Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 旅游景点信息管理系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql…

【信息系统项目管理师知识点速记】进度管理:排列活动顺序

10.5 排列活动顺序 排列活动顺序是识别和记录项目活动之间关系的过程,主要作用是定义工作之间的逻辑顺序,以在既定的所有项目制约因素下获得最高的效率。本过程需要在整个项目期间开展。 10.5.1 输入 项目管理计划: 进度管理计划:规定了排列活动顺序的方法、准确度和其他…

数据结构:图

数据结构&#xff1a;图 前言 在自动化程序分析中&#xff0c;图和树的一些算法起到了至关重要的作用&#xff0c;所以在开始自动化程序分析的研究前&#xff0c;我用了两天复习了一遍数据结构中的图。本章主要内容有图的基本概念&#xff0c;图的存储和图相关的经典算法&…

OpenCV(二)—— 车牌定位

从本篇文章开始我们进入 OpenCV 的 Demo 实战。首先&#xff0c;我们会用接下来的三篇文章介绍车牌识别 Demo。 1、概述 识别图片中的车牌号码需要经过三步&#xff1a; 车牌定位&#xff1a;从整张图片中识别出牌照&#xff0c;主要操作包括对原图进行预处理、把车牌从整图…

数据结构--顺序表经典OJ题

例1&#xff1a;合并有序顺序表 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff…

测试开发工具开发 -JMeter 函数二次开发

在JMeter中开发自定义函数是一个常见的需求&#xff0c;允许我们扩展JMeter的功能以适应特定的测试需求。自定义函数可以用来处理数据&#xff0c;生成输出&#xff0c;或者执行特定的运算。通过JMeter函数二次开发可以帮我们解决实际测试过程中造数难的问题 用过JMeter的同学…

JAVASE->数据结构|顺序表底层逻辑

✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;再无B&#xff5e;U&#xff5e;G-CSDN博客 目标&#xff1a; 1. 什么是 List 2. List 常见接口介绍 3. …

java并发编程-AQS介绍及源码详解

介绍 AQS 的全称为 AbstractQueuedSynchronizer &#xff0c;就是抽象队列同步器。 从源码上可以看到AQS 就是一个抽象类&#xff0c;它继承了AbstractOwnableSynchronizer&#xff0c;实现了java.io.Serializable接口。 public abstract class AbstractQueuedSynchronizere…

信号与线性系统 1绪论

信号 信号是随时间变化的某种物理量&#xff08;狭义&#xff09; 本课程中&#xff0c;信号用 函数&#xff08;而且是一维函数&#xff09;表示 连续 离散 信号分类 确定与随机&#xff1a;是否能以确定的时间函数表示离散与连续&#xff1a;是用全体实数还是特定整数来描述…

普乐蛙景区vr体验馆VR游乐场设备身历其境体验

小编给大家推荐一款gao坪效产品【暗黑战车】&#xff0c;一次6人同乘&#xff0c;炫酷外观、强大性能和丰富内容适合各个年龄层客群&#xff0c;紧张刺激的VR体验让玩家沉浸在元宇宙的魅力中&#xff0c;无论是节假日还是平日&#xff0c;景区商场助力门店提高客流量和营收~ ◆…

苹果和OpenAI再续前缘,iOS 18会是颠覆级的吗?|TodayAI

据彭博社最新报道&#xff0c;苹果公司已经与人工智能领域的先锋企业OpenAI重启了对话&#xff0c;双方目前正在讨论一项可能的合作&#xff0c;以将OpenAI的生成式人工智能技术整合到苹果即将推出的iOS 18操作系统中。这一举措表明&#xff0c;苹果正加速其在人工智能技术上的…

Acwing 818. 数组排序

给定一个长度为 n n n的数组 a a a以及两个整数 l l l和 r r r&#xff0c;请你编写一个函数&#xff0c;void sort(int a[], int l, int r)&#xff0c;将 a [ l ] ∼ a [ r ] a[l]∼a[r] a[l]∼a[r]从小到大排序。 输出排好序的数组 a。 输入格式 第一行包含三个整数 n &…

Go Web 开发基础【用户登录、注册、验证】

前言 这篇文章主要是学习怎么用 Go 语言&#xff08;Gin&#xff09;开发Web程序&#xff0c;前端太弱了&#xff0c;得好好补补课&#xff0c;完了再来更新。 1、环境准备 新建项目&#xff0c;生成 go.mod 文件&#xff1a; 出现报错&#xff1a;go: modules disabled by G…

【JavaEE网络】网络编程及其应用概述

目录 面向字节流粘包问题 TCP异常情况TCP/UDP对比 网络层重点协议IP协议IP地址 面向字节流 粘包问题 在面向字节流的情况下&#xff0c;会产生一些其他的问题&#xff1a;粘包问题&#xff0c;这里“粘”的是“应用层数据报”&#xff0c;通过TCP read/write的数据&#xff0…

小米消金持续发力,全面强化金融消费者权益保护措施

近年来&#xff0c;电信网络欺诈手段层出不穷&#xff0c;深度伪造等互联网技术被误用&#xff0c;导致欺诈行为更加隐蔽。重庆小米消费金融有限公司&#xff08;以下简称“小米消金”&#xff09;&#xff0c;作为一家持牌消费金融公司&#xff0c;深知保护消费者财产安全的重…