none

0%

HTML--Element的各种位置信息

发表于 更新于

Element

  1. outerHTML 包含本元素自身

    • e.outerHTML = 'template' 时会把 e 自己进行替换，vue 的 v-html 默认使用的是 innerHTML

  2. clientHeight 整数 表示元素节点的 CSS 高度,行内元素返回0,包括自身+padding, 不包含 border+ margin + 滚动条

  3. clientWidth 同理

  4. clientLeft 整数 等于元素节点左边框（ border）的宽度（单位像素），不包括 padding和margin。

  5. clientTop

  6. scrollHeight 整数 表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度，还包括伪元素（::before或::after）的高度。

  7. scrollWidth

  8. scrollTop 垂直滚动条向顶侧滚动的像素数量，

  9. scrollLeft

  10. offsetParent 第一个 position属性不等于static 的上层元素。

  11. offsetHeight 整数，表示元素的 CSS 垂直高度（单位像素），元素+padding+border+滚动条

  12. offsetWidth

  13. offsetLeft 返回当前元素左上角相对于Element.offsetParent节点的水平位移，

  14. offsetTop

  15. scrollIntoView(bool) 当 bool 为 true，滚动元素到当前视口的最上面，false，滚动到最下面

  16. getBoundingClientRect() 方法返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息。

  17. getClientRects()

  18. insertAdjacentElement(position,node) 在相对于当前元素的指定位置，插入一个新的节点。返回被插入的节点

    • position 值为以下 4 个之一，
    1. beforebegin：当前元素之前
    2. afterbegin：当前元素内部的第一个子节点前面
    3. beforeend：当前元素内部的最后一个子节点后面
    4. afterend：当前元素之后

  19. insertAdjacentHTML() 插入 html

  20. insertAdjacentText() 插入 text

DocumentFragment

  • 节点代表一个文档的片段，本身就是一个完整的 DOM 树形结构。它没有父节点，parentNode返回null，但是可以插入任意数量的子节点。它不属于当前文档，操作DocumentFragment节点，要比直接操作 DOM 树快得多。