JavaScript中DOM和BOM的区别与用处详解-牛翰网

1. 概念与定义

DOM (Document Object Model) : 文档对象模型，它是一种标准的编程接口，表示 HTML 或 XML 文档的结构，使得开发者可以通过 JavaScript 动态地访问和操作文档的内容、结构和样式。DOM 将文档表示为节点树，其中每个节点都表示文档的一部分，如元素、属性、文本等。
BOM (Browser Object Model) : 浏览器对象模型，它是指由浏览器提供的一组对象，用于与浏览器窗口进行交互。BOM 并不局限于操作文档本身，而是可以操作浏览器的其他功能，如控制浏览器窗口、导航历史、定位 URL 以及浏览器相关的信息等。

2. 区别

操作对象:
- DOM 操作的是文档结构，包括元素节点、文本节点、属性等。
- BOM 操作的是浏览器窗口及其周边的功能，如导航、窗口大小、位置等。
标准性:
- DOM 是由 W3C 标准定义的，是跨浏览器的一致接口。
- BOM 不是一个正式的标准，各个浏览器的实现可能有所不同。
常用属性和方法:
- DOM 常用方法有 getElementById、querySelector、appendChild 等，用于访问和操作 HTML 元素。
- BOM 常用对象有 window、navigator、location、history 等，用于与浏览器相关的操作。

3. 用处举例

DOM 的用处示例

动态修改页面内容：

 // 获取元素并修改其文本内容和样式
    let header = document.querySelector('.header')
    header.textContent = '欢迎来到我的网站'
    header.style.color = 'blue' // 修改文本颜色
    header.style.fontSize = '24px' // 修改字体大小

    // 修改元素的属性
    let link = document.querySelector('a')
    link.setAttribute('href', 'https://www.newlink.com') // 修改链接地址
    link.setAttribute('target', '_blank') // 在新窗口打开链接

创建和插入新元素：

  // 创建新的列表项元素
    let newItem = document.createElement('li')
    newItem.textContent = '新列表项'

    // 将新元素插入到现有的列表中
    let list = document.getElementById('myList')
    list.appendChild(newItem)

    // 在指定位置插入元素
    let anotherItem = document.createElement('li')
    anotherItem.textContent = '插入的新列表项'
    list.insertBefore(anotherItem, list.children[1]) // 在第二个子元素之前插入

监听用户交互事件：

// 为按钮添加点击事件监听器
let button = document.getElementById("submitButton");
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

BOM 的用处示例

控制浏览器窗口：

  // 打开一个新的窗口并设置一些窗口属性
    let newWindow = window.open('https://www.example.com', '_blank', 'width=800,height=600')

    // 移动窗口到屏幕指定位置
    newWindow.moveTo(100, 100)

    // 调整窗口大小
    newWindow.resizeTo(500, 500)

    // 关闭窗口
    newWindow.close()

浏览器信息和导航：

javascript
复制代码
// 获取浏览器的用户代理字符串
let userAgent = navigator.userAgent;
console.log("用户代理信息:", userAgent);

// 检测是否为移动设备
if (/Mobi|Android/i.test(userAgent)) {
    console.log("这是一个移动设备");
}

操作 URL 和导航：

javascript
复制代码
// 获取当前页面的 URL
let currentUrl = window.location.href;
console.log("当前 URL:", currentUrl);

// 重定向到新的页面
window.location.href = "https://www.example.com";

浏览器信息和导航：

 // 获取浏览器用户代理信息
    let userAgent = navigator.userAgent
    console.log('用户代理:', userAgent)

    // 检测是否为某个浏览器
    if (userAgent.indexOf('Chrome') > -1) {
        console.log('当前浏览器是 Chrome')
    }

    // 获取当前页面的 URL 信息
    console.log('当前 URL:', window.location.href)
    console.log('协议:', window.location.protocol)
    console.log('主机名:', window.location.hostname)
    console.log('路径名:', window.location.pathname)

    // 导航到新页面
    window.location.href = 'https://www.new-page.com'

    // 重载当前页面
    window.location.reload()

    // 浏览器历史记录操作
    window.history.back() // 返回上一页
    window.history.forward() // 前进到下一页

操作 localStorage 和 sessionStorag

// localStorage 持久存储数据（页面关闭后仍然存在）
localStorage.setItem("username", "JohnDoe");
let username = localStorage.getItem("username");
console.log("用户名:", username);

// 移除存储的数据
localStorage.removeItem("username");

// sessionStorage 临时存储数据（页面关闭后数据消失）
sessionStorage.setItem("sessionID", "123456");
let sessionID = sessionStorage.getItem("sessionID");
console.log("会话 ID:", sessionID);

// 清除所有 sessionStorage 数据
sessionStorage.clear();

定时器与计时器

// 设置定时器，每隔一秒执行一次
let count = 0;
let intervalID = setInterval(() => {
    console.log(`计时器执行次数: ${count}`);
    count++;
    if (count === 5) {
        clearInterval(intervalID); // 停止定时器
    }
}, 1000);

// 延时执行函数
setTimeout(() => {
    console.log("延时执行的代码");
}, 2000);

弹出对话框

// 提示框
alert("这是一个提示框！");

// 确认框
let confirmResult = confirm("你确定要删除这条记录吗？");
if (confirmResult) {
    console.log("用户点击了确认");
} else {
    console.log("用户点击了取消");
}

// 输入框
let userInput = prompt("请输入你的名字:", "匿名");
if (userInput !== null) {
    console.log(`你好，${userInput}`);
}