快!给！我！来！复习！DOM！

想进字节冲啊冲
245 阅读8分钟

概念

文档对象模型(dom)是HTML和XML文档的编程接口。DOM表示由多层节点构成的文档，通过它开发者可以添加，删除，和修改页面各个部分。

所有节点都继承Node类型，因此所有节点都共享相同的基本属性和方法。

用法

常见属性

  1. nodeName: 存在于dom元素实例上的属性，通过console.log打印后是标签名
  2. nodeValue：存在于文本元素，是文本值，其他元素为null
  3. childNodes：当前元素的子Node，包含文本节点，空白节点等。是一个类数组对象，可以通过Array.from或者Array.propotype.slice.call解析为数组对象，是一个实时变化的数组。
  4. parentNode: 指向DOM树中的父元素。
  5. previousSibling: 当前元素的上一个节点
  6. nextSibling： 下一个节点。
  7. firstChild：首节点
  8. lastChild: 最后一个子节点
  9. childElementCout: 返回子元素数量
  10. firstElementChild: 指向第一个element元素类型。
  11. lastElementChild: 指向最后一个元素类型。
  12. previousElementSibling: 指向前一个Element类型的同胞元素
  13. nextElementSibling: 指向后一个Element类型的同胞元素。
  14. ownerDocument: 指向document
  15. tagName: 标签名，element元素独有。
  16. id：元素在文档中的唯一标识符
  17. title: 包含元素的额外信息
  18. lang: 元素内容的语言代码
  19. data-xx: 自定义属性
    1. 通过dataset属性访问
  1. dir: 语言的书写方向。
  2. innerHTML
  • 定义：返回或设置元素内部的 HTML 内容，但不包括元素本身的标签。
  • 适用范围：仅包含标签内的子元素和文本内容。
  1. outerHTML
  • 定义：返回或设置元素本身及其内部的所有 HTML 代码。
  • 适用范围：包含当前元素的标签本身及其内部的内容。
  1. className: class属性。
  2. document
    1. documentElement: HTML元素实例
    2. body：body实例
    3. doctype：标签
    4. title：页面标题
    5. url: 完整URL
    6. activeElement: 始终包含当前拥有焦点的DOM元素
    7. hasFocus: 方法，表示文档是否有焦点。
    8. readyState
      1. loading： 文档正在加载
      2. complete：文档加载完成
    1. domain: 页面域名
    2. referrer: 链接到当前页面的那个页面的URL。
    3. anchors: 包含文档所有带name属性的a元素
    4. forms：包含文档所有元素
    5. images: 文档所有img元素
    6. links: 所有带href的a元素。
    7. write: 重写html
    8. writeLn
    9. open
    10. close
    11. defaultView: 文档窗口
    12. createHTMLDocument: 用来创建一个新的 HTML 文档。
  1. classList: classname的一个集合

    • add: 向类目中添加指定字符串值value
    • contains: 判断value是否存在
    • remove：删除指定的字符串值
    • toggle：如果存在指定value，则删除，如果不存在，则添加。

常见方法

  1. hasChildNodes: 判断当前元素是否有子元素。
  2. appendChild: 在childNodes列表添加子元素。
  3. insertBefore: 插入指定位置
  4. replaceChild: 替换指定位置元素
  5. removeChild: 移除元素
  6. cloneNode： 复制元素，如果传true： 可以复制整个元素以及子元素。 不能复制事件处理程序。
  7. normalize: 合并文本元素。
  8. 定位元素相关
    1. getElementById: 传入id，定位id元素，如果有两个只定位一个。
    2. getElementsByTagName: 传入标签名，获取所有标签集合。
    3. getElementsByName: 返回具有给定name属性的所有元素。
    4. querySelector: 接收CSS选择符参数，返回匹配模式的第一个后代元素
    5. querySelectorAll: 接收CSS参数，返回当前元素下所有匹配的，这个数组是一个快照，对元素进行增删不会实时反应。
    6. matches：如果元素被指定的选择器字符串选择，Element.matches() 方法返回 true; 否则返回 false。
    7. getElementsByClassName: 接收一个类目参数，多个类目用空格分隔，返回匹配的nodeList，实时。
  1. appendData: 向文本节点末尾添加文本
  2. deleteData: 从offset开始删除count个字符
  3. insertData: 在位置offset插入text
  4. replaceData: 替换...
  5. splitText: 拆分两个文本节点。
  6. substringData: 提取文本。
  7. insertAdjacentHTML/insertAdjacentText
    1. insertAdjacentHTML() 方法将指定的文本解析为 Element 元素，并将结果节点插入到 DOM 树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用 innerHTML 操作更快。
  1. 创建元素相关
    1. crtateElement: 传入标签名，创建标签。
    2. createTextNode: 创建文本节点。
    3. createDocumentFragment: 创建文档碎片。
    4. createAttribute: 创建attr节点。
  1. getAttribute: 获得属性
  2. setAttribute: 设置属性
  3. isSameNode: 已废弃，使用 === 即可。
  4. isEqualNode :Node.isEqualNode() 方法可以判断两个节点是否相等。当两个节点的类型相同，定义特征 (defining characteristics) 相同（对元素来说，即 id，孩子节点的数量等等），属性一致等，这两个节点就是相等的。一些具体的数据指出：多数时候的比较是根据节点的类型来的。
  5. scrollIntoView: 方法会滚动元素的父容器，使被调用 scrollIntoView() 的元素对用户可见。
    1. Element.scrollIntoView() - Web API | MDN
  1. removeAttribute: 移除属性
  2. innerText: 读模式会收集所有text文本，写模式会删除所有子节点，插入对应的text。
  3. outerText
  4. contains: 确定一个元素是不是另一个元素的后代。
  5. attributes: 属性的list集合。
    1. getNamedItem: 传入属性名，得到属性值
    2. removeNamedItem: 删除nodeName属性等于name的节点。
    3. setNamedItem: 添加属性名
  1. 内嵌窗格
    1. contentDocument: 包含内嵌窗格中内容的document对象指针。
    2. contentWindow: 返回窗格的window对象

样式操作相关

任何支持style属性的HTML元素在JS中都有一个对应的style属性。包含HTMLstyle属性里面的样式信息，不包含写在style里面的信息。

属性

  1. style
    1. HTMLElement：style 属性 - Web API | MDN
    2. CSSStyleDeclaration - Web API | MDN
    3. cssText: 包含style属性中的css代码，如果批量修改属性可以用这个。
  1. document.styleSheets: 表示文档中可用的样式表集合。
    1. 可以通过循环遍历出整个页面的所有样式。不包含动态加载的。

CSS规则

  1. cssText：返回整条规则文本。
  2. parentRule: 如果规则被其他规则包含，则指向包含规则。
  3. parentStyleSheet: 包含当前规则样式表。
  4. selectorText：规则的选择符文本
  5. style： 当前样式信息。
  6. insertRule: 插入规则
  7. deleteRule： 删除规则。

方法

  1. getComputedStyle
    1. 第一个参数传入元素，第二个参数传入伪元素字符串，返回样式，可以读，不可以写。

元素尺寸

偏移尺寸

元素在屏幕上占用的所有视觉空间。

offsetParent

HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

  • offfsetHeight: 元素在垂直方向上占用的像素尺寸，包括他的高度，水平滚动条高度和上、下边框的高度。
  • offsetWidth: 元素在水平方向上占用的像素尺寸，包括它的宽度、垂直滚动条宽度和左、右边框的宽度。
  • offsetLeft: 元素左边框外侧和offsetParent内测的像素
  • offsetTop: 元素上边框外侧和offsetParent内测的像素

客户端尺寸

包含元素内容及其内边距所占用的空间。

  • clientHeight: 内容区+ 内边距
  • clientWidth：内容区+内边距

在根元素（<html> 元素）或怪异模式下的 <body> 元素上使用 clientHeight 时，该属性将返回视口高度（不包含任何滚动条）。这是一个clientHeight的特例。

滚动尺寸

元素内容滚动距离的信息。

  • scrollHeight: 元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。高度的度量方式与 clientHeight 相同：包括元素的内边距，但不包括元素的边框、外边距以及水平滚动条（如果存在）。它也包括 ::before 和 ::after 这样的伪元素的高度。如果元素的内容不需要垂直滚动条就可以容纳，则其 scrollHeight 等于 clientHeight。

如果你把一个元素定义为height: 300;overflow: hidden; 如果子元素很多，那么其实也相当于有了滚动条，也会计算整个溢出的高度。

  • scrollWidth: 总宽度
  • scrollTop: 顶部隐藏的像素数
  • scrollLeft：左侧隐藏像素数

getBoundingClientRect

Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。

getClientRects

用于获取元素的每一部分的矩形信息，适合复杂布局场景，如文本分行或多块内容处理。

avatar
文章
阅读
粉丝