JavaScript中DOM和BOM的区别与用处详解_Javascript

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}`);
}