浏览器的 HTMLElement

53 阅读1分钟

HTMLElement

HTMLElement 是所有Html元素的父类,而HTMLElement又是继承Element

image.png

contentEditable 和 isContentEditable

isContentEditable - 判断当前元素是否可以编辑
contentEditable - 当前元素进入编辑g状态

dataset

只读属性 dataset 提供了对元素上自定义数据属性data-*)读/写访问。它暴露了一个字符串映射(DOMStringMap),其中包含每个 data-* 属性条目。
备注:  dataset 属性本身可以被读取,但是不能直接写入。相反,所有写入都必须是写入 dataset 的单个属性,而 dataset 又表示这些数据的属性。
自定义 data 属性的属性名与没有 data- 前缀的 HTML 属性相同,并且在移除单个破折号(-)后,大写之后的字母以获得属性的“驼峰”命名。

dir

定义文本排版方向 rtl or ltr

hidden

HTML 元素的 hidden 属性是一个 Boolean 类型的值,如果想要隐藏元素,就将值设置为 true,否则就将值设置为false。这完全不同于使用 CSS 属性 display 来控制一个元素的可见性。
参考:三种隐藏 HTML 元素的方式 - 简书 (jianshu.com)

style

inert

使得界面元素冻结,不可操作
快速了解 inert 属性 - 前端侦探 - SegmentFault 思否

nonce

srcipt 脚本相关,nonce属性可以告诉浏览器特定脚本或样式元素的内联内容不是由某些(恶意的)第三方注入到文档中的,而是由控制提供文档的服务器的任何人故意放入文档中的。

位置定位相关

  • offsetHeight
  • offsetWidth
  • offsetLeft
  • offsetParent
  • offsetTop

image.png

image.png

搞懂clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的区别 - 掘金 (juejin.cn)

tabindex

运行tab按钮聚焦,而且设置定义顺序