（JavaScript）DOM与BOM的介绍

KillerQueen
168 阅读8分钟

前言-DOM与BOM的前世今生

DOM（Document Object Model）：

  1. 前世： DOM起源于早期的Web浏览器，最早由Netscape引入，用于表示和操作HTML和XML文档的树状结构。最早的DOM版本在HTML文档中提供了一种途径来访问和修改文档的元素和属性。
  2. 今生： DOM已经经历了多个版本和标准化进程，如DOM Level 1、Level 2、Level 3，以及HTML5中的DOM。DOM允许开发者使用脚本（通常是JavaScript）来动态地访问和修改网页内容。它将网页文档表示为一个树状结构，其中每个元素都是一个节点，可以通过JavaScript访问和操作这些节点，实现动态交互和内容修改。DOM不仅用于HTML和XML文档，还用于处理文档对象，如SVG和MathML。

SVG（Scalable Vector Graphics）和MathML（Mathematical Markup Language）都是XML（可扩展标记语言）的应用，用于描述不同类型的内容：SVG用于矢量图形绘制，而MathML用于数学表示。

SVG（Scalable Vector Graphics）：

  1. 用途： SVG是一种用于描述矢量图形的XML标准。它被广泛用于Web开发，用于绘制图形、图表、图像和动画。SVG图形是矢量的，因此可以缩放到不同尺寸而不失真。
  2. 特点： SVG图形使用XML标记来描述图形元素，如线条、圆圈、矩形、文本等。这些元素可以被轻松地创建、编辑和操控，因为它们是基于数学公式的。SVG图形可以在HTML文档中嵌入，可以通过CSS进行样式化，也可以通过JavaScript进行交互性和动画效果的添加。
  3. 示例： 以下是一个简单的SVG示例，用于绘制一个红色矩形：
<svg width="100" height="100">
  <rect width="80" height="60" fill="red" />
</svg>

MathML（Mathematical Markup Language）：

  1. 用途： MathML是一种用于表示数学和数学公式的XML标准。它的主要应用领域包括数学教育、科学文档、技术文档等。MathML使得数学内容可以在Web文档中准确地表示和呈现。

  2. 特点： MathML定义了一组标记来表示数学符号、表达式、公式等。它支持复杂的数学符号和结构，如分数、根号、积分、矩阵等。MathML的主要目标是确保数学公式在不同设备和平台上的可靠呈现，以确保数学内容的可读性和可编辑性。

  3. 示例： 以下是一个简单的MathML示例，表示一个分数：

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mfrac>
    <mrow>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mn>2</mn>
    </mrow>
  </mfrac>
</math>

总之，SVG用于绘制矢量图形，而MathML用于表示数学和数学公式。它们都是XML标准的应用，允许在Web文档中以结构化的方式表示不同类型的内容。这些标准有助于改善Web内容的可视化和数学表达。

BOM（Browser Object Model）：

  1. 前世： BOM没有一个单一的起源，它起源于浏览器制造商的尝试为开发者提供访问浏览器窗口和导航的接口。早期浏览器的BOM包括一些全局对象，如window，以及用于处理浏览器窗口大小、导航历史、弹出窗口等功能的方法和属性。
  2. 今生： BOM已经发展为一个相对分散的集合，其中包括window对象以及其他与浏览器窗口和环境相关的对象和功能。这些功能包括处理浏览器的历史记录、管理浏览器窗口和标签、控制浏览器的导航、处理用户输入等。BOM的功能取决于浏览器厂商的实现，因此在不同浏览器中可能会有不同的特性和行为。

DOM篇

文档对象模型（Document Object Model，DOM）是一种用于处理XML和HTML文档的编程接口，它将文档表示为一个树状结构，其中每个部分都可以被操作，即把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。DOM 允许开发者通过编程方式访问、操作和修改网页或文档的内容和结构，以及响应用户交互事件。下面是 DOM 的详细介绍：

  1. DOM 的基本概念：

    • 节点（Node） ：DOM 中的基本单位，文档中的每个部分都是一个节点，例如元素节点、属性节点、文本节点等。
    • 树状结构：DOM 表示文档为一个树状结构，树的顶端是文档节点（Document Node），包含整个文档。文档节点的子节点可以是元素节点、属性节点、文本节点等。

  2. 节点类型：

    • 元素节点：代表HTML或XML文档中的标签元素，如<div>或<p>。
    • 属性节点：代表元素的属性，如class或id。
    • 文本节点：包含元素的文本内容。
    • 注释节点：代表文档中的注释。
    • 文档节点：代表整个文档。

  3. DOM 树的层次结构：

    • 文档根节点（Document Node）

      • 元素节点

        • 属性节点
        • 文本节点

      • 元素节点

        • ...

  4. DOM 操作：

    • 查询节点：开发者可以使用各种方法（如getElementById、querySelector、getElementsByTagName等）来查找文档中的节点。
    • 创建节点：可以使用 DOM 方法创建新的节点，例如createElement、createTextNode等。
    • 修改节点：开发者可以修改节点的属性、内容、结构等，以更新文档的外观和行为。
    • 删除节点：可以使用removeChild等方法删除节点。
    • 遍历节点：DOM 提供了各种遍历节点的方法，如childNodes、parentNode、nextSibling等，以便访问和操作文档中的节点。

  5. 事件处理：

    • DOM 允许开发者为文档中的元素注册事件处理程序，以响应用户的交互行为，如单击、鼠标移动等。

  6. DOM 的兼容性：

    • 不同浏览器可能在 DOM 的实现上有差异，因此需要考虑跨浏览器的兼容性问题。
    • 使用现代的 JavaScript 库或框架可以简化跨浏览器开发。

  7. 性能考虑：

    • 频繁操作 DOM 可能导致性能问题，因为 DOM 操作通常比较昂贵。为了提高性能，可以使用技巧如批量操作、事件委托等。

  8. DOM 与 JavaScript：

    • JavaScript 是常用于操作 DOM 的编程语言，开发者可以使用 JavaScript 来访问、修改和操控文档的结构和内容。

BOM篇

浏览器对象模型（Browser Object Model，BOM）是一种Web浏览器提供的编程接口，把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口，用于控制和交互浏览器窗口本身以及与浏览器相关的信息。BOM 并不是一个标准化的规范，而是浏览器厂商各自实现的接口，因此在不同浏览器中可能会有一些差异。以下是 BOM 的详细介绍：

  1. 窗口对象：

    • BOM 的核心是窗口对象（window对象），它代表浏览器窗口或标签页。window 对象提供了许多方法和属性，用于控制窗口的大小、位置、导航等。window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。

  2. 浏览器信息：

    • BOM 允许开发者访问浏览器的信息，如浏览器类型、版本、用户代理字符串等。

  3. 导航控制：

    • BOM 提供了方法来控制页面导航，例如window.location对象，可以用于加载新的页面、刷新当前页面，或者获取当前页面的URL等信息。

  4. 窗口管理：

    • BOM 允许开发者控制浏览器窗口的大小、位置和外观，通过window.resizeTo、window.moveTo等方法。

  5. 弹出窗口和对话框：

    • BOM 允许创建弹出窗口和对话框，例如使用window.open方法可以打开新的浏览器窗口。

  6. 定时器：

    • BOM 提供了定时器功能，通过window.setTimeout和window.setInterval方法，开发者可以执行定时的操作，如定时执行代码或执行周期性任务。

  7. 屏幕信息：

    • BOM 允许开发者访问用户屏幕的信息，如屏幕分辨率、色深度等。

  8. 历史记录：

    • BOM 提供了访问浏览器历史记录的接口，如window.history对象，可以用于在浏览历史中前进或后退。

  9. Cookies：

    • BOM 允许开发者管理浏览器的 cookies，包括读取、设置和删除 cookies。

  10. 存储机制：

    • BOM 支持本地存储（localStorage）和会话存储（sessionStorage），允许开发者在客户端存储数据，以便稍后使用。

  11. 屏幕和打印：

    • BOM 允许开发者控制页面的打印和屏幕表现，通过window.print方法可以触发打印操作。

  12. 客户端信息：

    • BOM 允许开发者获取有关客户端设备的信息，如用户的屏幕分辨率、浏览器窗口大小等。

  13. 窗口事件：

    • BOM 允许开发者注册和处理窗口事件，如窗口大小变化、窗口关闭、页面加载完成等事件。

需要注意的是，BOM 不属于 JavaScript 核心规范，它是浏览器提供的扩展，因此在不同浏览器中的实现可能存在差异。为了确保跨浏览器的兼容性，开发者通常需要谨慎使用 BOM 功能，并进行必要的检测和处理。 BOM 主要用于与浏览器窗口和用户交互的功能，而文档内容的操作通常由文档对象模型（DOM）来处理。

avatar
文章
阅读
粉丝