DOM 和 BOM

BOM 包含 DOM（window.document 是 DOM 的根对象），BOM 是浏览器窗口的接口，DOM 是文档内容的接口。

Dom

是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。Dom 将文档表示为节点和对象。(可以将其理解为 js 操作 html 标签的一种浏览器内置 api，在浏览器之外的环境就无法使用，因此目前的项目在逐渐去 dom 化，例如 vue 就通过双向绑定来去 dom 化，或者给标签通过$ref 来标记一个 id，用来对其操作，虚拟 Dom)

网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。

术语：Attr 节点：attribute； Dom 节点组成的数组：nodeList

数据类型：

  • Document：document 对象
  • Node: 节点
  • NodeList: 元素节点组成的数组
  • Element: 是一个 Node 节点的成员节点
  • Attr: 表示节点的属性
  • NamedNodeMap:节点名字来组成的数组

这里可以了解一下就可以，下面有具体实例便于访问。(可以将 Dom 想象成一棵树，每个标签就是一个节点，一个节点可能有 element 节点、每个节点有多个 attr 属性,这只是我对 Dom 的理解)

使用文档对象模型

文档对象模型（DOM）是一个用于操作 HTML 和 XML 文档（包括其他树状文档）的 DOM 树的 API。这个 API 是页面描述的根源，并作为 web 脚本的基础。

（感兴趣的读者可以查阅一下 xml,html,json,yaml 等其他格式,个人认为对于学习之后其他的知识很重要）

Dom 树:是一种树状结构，其节点代表 HTML 或 XML 文档，当 web 浏览器解析 HTML 文档时，它建立了一个 DOM 树，然后用它来显示文档。即浏览器内部维护了一个 dom 树。

Dom API：这里只列出我常用的 api，想了解更多 API 请查阅官方文档。

  • 文档节点选择

    • document.getElementById(id)：通过 ID 选择元素
    • document.getElementsByClassName(className)：通过类名选择元素（返回 HTMLCollection）
    • getBoundingClientRect()：获取按钮的尺寸和位置
    • document.getElementsByTagName(tagName)：通过标签名选择元素（返回 HTMLCollection）
    • document.querySelector(selector)：通过 CSS 选择器选择第一个匹配元素
    • document.querySelectorAll(selector)：通过 CSS 选择器选择所有匹配元素（返回 NodeList）
    • document.documentElement：获取根元素 <html>
    • document.body：获取 <body> 元素

  • 节点操作

    • 创建节点：
      • document.createElement(tagName)：创建元素节点
      • document.createTextNode(text)：创建文本节点
      • document.createComment(comment)：创建注释节点
    • 添加 / 插入节点：
      • parentNode.appendChild(child)：向父节点末尾添加子节点
      • parentNode.insertBefore(newNode, referenceNode)：在参考节点前插入新节点
    • 删除 / 替换节点：
      • parentNode.removeChild(child)：删除子节点
      • parentNode.replaceChild(newNode, oldNode)：替换子节点
    • 复制节点：
      • node.cloneNode(deep)：复制节点（deep=true 表示深拷贝，包含子节点）

  • 属性操作

    • element.getAttribute(attrName)：获取元素属性值
    • element.setAttribute(attrName, value)：设置元素属性
    • element.removeAttribute(attrName)：删除元素属性
    • 直接访问 HTML 属性（如 element.id、element.className、element.src）

  • 样式操作

    • element.style：访问或设置元素的内联样式（如 element.style.color = 'red'）

    • element.classList：操作类名（add()/remove()/toggle()/contains()）

      1
      2
      element.classList.add("active");
      element.classList.toggle("hidden");

  • 事件处理

    • element.addEventListener(eventType, handler)：绑定事件（如 click、input）
    • element.removeEventListener(eventType, handler)：移除事件监听

都看完 dom 了，一定要看完 bom 啊

Bom

浏览器对象模型:BOM 用于操作浏览器窗口和环境，核心是 window 对象（全局对象）。Window 接口是各种函数、命名空间、对象和构造函数的家，它们不一定与用户界面窗口的概念直接相关。然而，Window 接口是一个可以包含这些需要全局可用的项目的合适的地方。

常用 API

  1. 窗口控制
    • window.open(url, name, features)：打开新窗口
    • window.close()：关闭当前窗口
    • window.resizeTo(width, height)：调整窗口大小
    • window.scrollTo(x, y)：滚动窗口到指定位置
  2. 导航与历史
    • window.location：操作 URL 相关信息
      • location.href：获取或设置完整 URL（跳转页面）
      • location.reload()：刷新页面
      • location.search：获取 URL 中的查询字符串（?key=value）
    • window.history：操作浏览器历史
      • history.back()：后退一页
      • history.forward()：前进一页
      • history.go(n)：跳转 n 页（n 为正数前进，负数后退）
  3. 定时器
    • setTimeout(callback, delay)：延迟指定毫秒后执行一次回调
    • setInterval(callback, interval)：每隔指定毫秒重复执行回调
    • clearTimeout(timerId)：清除 setTimeout 定时器
    • clearInterval(timerId)：清除 setInterval 定时器
  4. 对话框
    • alert(message)：弹出警告对话框
    • confirm(message)：弹出确认对话框（返回布尔值）
    • prompt(message, defaultValue)：弹出输入对话框（返回输入值或 null）
  5. 浏览器信息
    • window.navigator：获取浏览器相关信息
      • navigator.userAgent：浏览器标识字符串
      • navigator.language：用户语言
      • navigator.platform：运行平台
    • window.screen：获取屏幕信息
      • screen.width/screen.height：屏幕分辨率
      • screen.availWidth/screen.availHeight：可用屏幕尺寸
  6. 存储
    • localStorage：持久化存储（无过期时间，关闭浏览器后不消失）
      • localStorage.setItem(key, value)：存储数据
      • localStorage.getItem(key)：获取数据
    • sessionStorage：会话级存储（关闭标签页后数据清除）
      • 用法同 localStorage

Bom 和 Dom 的常用事件类型

  1. 鼠标事件：click:点击 ；dbclick: 双击；mousedown|mouseup:鼠标按下，松开;contextmenu:右键

    ​ mouseover||mouseout：鼠标移出，移出触发

  2. 键盘事件：keydown，keyup

  3. 表单事件：submit:调教；reset：重置；input：输入框内容变化；change:表单元素变化且失去焦点

    ​ focus：获得焦点触发；blur：失去焦点触发；select：文本被选中触发

  4. 元素加载与状态：load：加载完成时触发；error：加载失败触发；resize：元素大小改变触发;scroll:鼠标滚动触发；

  5. 触摸事件(移动端)：touchstart:手指触摸时触发；touchend：手指离开时触发；

    ​ touchmove：手指在元素上滑动触发；

  6. 窗口事件：load：所有资源加载完成时触发；unload：页面卸载时触发；resize：浏览器窗口大小改变触发；

    scroll：页面滚动时触发；

事件的监听方式：

1
element.addEventListener("click", handleClick);

注意：注意这两个事项，有时候还需要阻止表单等标签的默认事件；一定要注意事件冒泡，避免子元素污染了父元素，当父元素有多个子元素时且有相同的事件，应使用冒泡机制，优化性能，列表的操作；

  • 事件冒泡：多数事件会从触发元素向上传播到父元素（可通过 event.stopPropagation() 阻止）。
  • 事件委托：利用冒泡机制，将事件绑定到父元素，统一处理子元素事件（优化性能）。