DOM和BOM区别

DOM（Document Object Model）和 BOM（Browser Object Model）是浏览器提供的两个不同的API，它们分别用于操作网页内容和浏览器窗口。以下是它们的主要区别：

DOM（Document Object Model）

• 定义：DOM 是一个与平台和语言无关的接口，它定义了访问和操作网页的标准方法。DOM 将整个网页视为一个文档对象，将网页中的元素、属性、文本等表示为节点，并构建了一个树状的文档结构。

• 用途：DOM 主要用于操作网页内容，包括：

  • 元素操作：获取、创建、修改和删除网页中的元素，如获取元素的属性、样式、内容等，修改元素的样式、添加或删除元素等。
  • 事件处理：为网页中的元素添加事件监听器，响应用户的交互操作，如点击、输入、滚动等事件。
  • 文档结构操作：遍历和修改文档的结构，如获取元素的子节点、父节点、兄弟节点等，修改元素的层级关系等。

• 范围：DOM 只关注于文档本身，不涉及浏览器窗口的其他部分，如窗口大小、位置、浏览器功能等。

• 主要方法：

  • 获取元素：
    • document.getElementById(id)：通过元素的ID获取元素。
    • document.getElementsByTagName(tagName)：通过标签名获取元素集合。
    • document.getElementsByClassName(className)：通过类名获取元素集合。
    • document.querySelector(selector)：通过CSS选择器获取第一个匹配的元素。
    • document.querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素。
  • 操作元素属性：
    • element.getAttribute(name)：获取元素的属性值。
    • element.setAttribute(name, value)：设置元素的属性值。
    • element.removeAttribute(name)：移除元素的属性。
  • 操作元素样式：
    • element.style.property = value：设置元素的样式属性。
  • 操作元素内容：
    • element.innerHTML：获取或设置元素的HTML内容。
    • element.textContent：获取或设置元素的文本内容。
  • 操作元素结构：
    • element.appendChild(child)：将子元素添加到元素的末尾。
    • element.removeChild(child)：移除元素的子元素。
    • element.insertBefore(newChild, referenceChild)：在指定子元素之前插入新子元素。
  • 事件处理：
    • element.addEventListener(event, callback)：为元素添加事件监听器。
    • element.removeEventListener(event, callback)：移除元素的事件监听器.
    • element.dispatchEvent(event)：触发元素的事件.

BOM（Browser Object Model）

• 定义：BOM 是浏览器提供的一个API，它定义了浏览器窗口和浏览器对象的标准方法和属性。BOM 包括了浏览器窗口（window）对象及其相关属性和方法，如浏览器窗口的大小、位置、历史记录、定时器等。

• 用途：BOM 主要用于操作浏览器窗口和浏览器功能，包括：

  • 窗口操作：获取和设置浏览器窗口的大小、位置、状态等，如打开新窗口、关闭窗口、调整窗口大小等。
  • 浏览器功能：访问浏览器的历史记录、书签、插件等，如前进、后退、刷新页面等。
  • 定时器：使用定时器功能，如setTimeout和setInterval，在指定的时间后执行代码或周期性地执行代码。
  • 其他功能：如访问浏览器的用户代理信息、屏幕信息、导航信息等。

• 范围：BOM 涉及浏览器窗口的各个方面，包括窗口、历史记录、定时器等，不局限于文档内容。

• 主要方法：

  • 窗口操作：
    • window.open(url, target, features)：打开新窗口。
    • window.close()：关闭当前窗口。
    • window.resizeTo(width, height)：设置窗口的大小。
    • window.moveTo(x, y)：设置窗口的位置.
    • window.scroll(x, y)：滚动窗口到指定位置.
  • 浏览器历史：
    • window.history.back()：后退历史记录.
    • window.history.forward()：前进历史记录.
    • window.history.go(delta)：跳转到历史记录中的某个页面，delta为偏移量.
  • 定时器：
    • window.setTimeout(callback, delay)：在指定的延迟后执行一次回调函数.
    • window.clearTimeout(timeoutID)：清除指定的定时器.
    • window.setInterval(callback, interval)：每隔指定的时间间隔执行一次回调函数.
    • window.clearInterval(intervalID)：清除指定的定时器.
  • 其他功能：
    • window.alert(message)：显示警告框.
    • window.confirm(message)：显示确认框，返回用户的选择.
    • window.prompt(message, default)：显示提示框，返回用户输入的值.
    • window.location：获取或设置当前页面的URL，包含多个属性如href、pathname、search等.
    • window.screen：获取屏幕信息，如屏幕宽度、高度等.
    • window.navigator：获取浏览器信息，如浏览器名称、版本等.

总结

• 关注点不同：DOM 关注于网页文档的内容和结构，提供操作元素、属性、事件等的方法；而 BOM 关注于浏览器窗口和浏览器功能，提供操作窗口、历史记录、定时器等的方法。
• 对象不同：DOM 的核心对象是document，它代表整个网页文档；BOM 的核心对象是window，它代表浏览器窗口。
• 应用场景不同：DOM 用于网页内容的动态操作和交互，如修改页面布局、响应用户输入等；BOM 用于浏览器窗口的控制和浏览器功能的访问，如打开新窗口、使用浏览器历史等。

在实际开发中，DOM 和 BOM 经常一起使用，以实现复杂的网页功能和交互。例如，可以通过 DOM 获取网页中的元素，然后使用 BOM 的定时器功能来实现元素的动画效果。