当前位置：首页 > news >正文

JS之Dom模型和Bom模型

news 来源：原创 2025/6/13 16:16:49

Dom模型和Bom模型

一、Dom 模型和 Bom 模型概述

在 JavaScript 的世界里，Document Object Model（Dom）和 Browser Object Model（Bom）是极为重要的两个概念。Dom 模型是针对 HTML 文档的对象模型，它将整个 HTML 文档视为一个由节点组成的树状结构，通过 Dom，我们可以对 HTML 页面中的元素进行访问、修改、添加和删除等操作；而 Bom 模型则提供了一系列与浏览器窗口交互的对象，用于控制浏览器的窗口、地址栏、历史记录等，实现与浏览器环境相关的功能。接下来，我们将通过丰富的案例深入学习这两个模型。

二、Dom 模型详解

1.获取 Dom 元素

获取 Dom 元素是操作 Dom 的基础，我们可以通过多种方式实现。

获取方式

通过 id 获取元素
通过类名获取元素
通过标签名获取元素
通过name属性获取元素

1.1 通过 id 获取元素

let myDiv = document.getElementById('myDiv');

1.2 通过类名获取元素

let boxes = document.getElementsByClassName('box');

1.3 通过标签名获取元素

let paragraphs = document.getElementsByTagName('p');

1.4 通过name属性获取元素

let stus = document.getElementsByName('stu');

2.通过Dom对象操作属性aa

//1.先获取Dom对象
let p1 = document.getElementById("p1");
let img = document.getElementById("img");
let name = document.getElementById("name")
let aa = document.getElementById("aa");
let name1 = document.getElementById("name1");
let hobby1 = document.getElementById("hobby1");
let hobby2 = document.getElementById("hobby2");
let hobby3 = document.getElementById("hobby3");// 直接修改样式属性
p1.style.fontSize = "20px";
p1.style.padding = "15px";
p1.style.borderRadius = "8px";
p1.style.display = "block" // block显示 none 隐藏
// 更换图片
img.src = "https://picsum.photos/seed/b/300/200";
img.alt = "新的示例图片";
// 调整尺寸
img.style.width = "250px";
img.style.height = "180px";
img.style.objectFit = "cover";
// 添加额外属性
aa.setAttribute("title", "点击访问百度网站");
aa.classList.add("underline");
// 禁用/启用输入框
name1.disabled = true; // 禁用
name1.disabled = false; // 启用
name1.removeAttribute("disabled") //移除属性
// 修改输入框值
name1.value = "李四";
// 操作复选框
hobby1.checked = true;
hobby2.checked = true;
hobby3.checked = true;

3. 通过Dom对象操作内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>通过Dom对象操作内容</title></head><body><div id="p">hello world <span>你好</span></div><select name="city" id="city1"><option value="chengdu">成都</option><option value="jinan">济南</option></select><input id="name" name="user" value="zhangsan" type="text"></body><script>//1.获取元素var p = document.getElementById("p")var name = document.getElementById("name")var city1 = document.getElementById("city1")//2.标签内容操作// 2.1元素内容获取、修改// p.innerText = "java编程"// 2.2元素内html内容获取、修改// p1.innerHTML = "<span style='color:red;'>jerry666</span>"// alert(p1.innerHTML)// 3.表单元素内容获取、修改//3.1输入框name1.value = "张三"// 3.2下拉选项卡内容// alert(city1.value)</script>
</html>

4遍历Dom对象数组

使用 for 循环

let elements = document.getElementsByClassName('box');// 标准 for 循环
for (let i = 0; i < elements.length; i++) {elements[i].style.color = 'red';
}

5.其他获取Dom对象的方法

document.documentElement - 获取HTML根元素
document.documentElement 属性返回文档的根元素（HTML文档中的<html>元素）。这是访问文档最顶层元素的最直接方式。
document.body - 获取BODY元素
document.body 属性返回文档的<body>元素。这是访问文档主体内容的最便捷方式
document.querySelector() - 通过选择器获取单个元素
querySelector() 方法返回文档中匹配指定CSS选择器的第一个元素。如果没有找到匹配项，则返回null。
document.querySelectorAll() - 通过选择器获取元素集合
- querySelectorAll() 方法返回文档中匹配指定CSS选择器的所有元素的NodeList（节点列表）。如果没有找到匹配项，则返回空的NodeList。

三、Bom模型详解

1.概述

定义：BOM（Browser Object Model）是 JavaScript 操作浏览器的接口，提供了一系列对象用于控制浏览器窗口、地址栏、历史记录等。
核心对象：window（浏览器窗口）、location（地址栏）、history（历史记录）。

2.`window`对象：浏览器窗口控制

2.1 作用

代表浏览器窗口，是 BOM 的顶层对象（document对象是其子对象）。
可操作浏览器窗口的尺寸、弹出框、定时器等。

2.2 常用属性与方法

警告框：alert(message)

window.alert("这是一个警告框！"); // 可省略window.

确认框：confirm(message)（返回true/false）

const isConfirmed = confirm("是否确认删除？");
if (isConfirmed) {console.log("用户点击了确定");
} else {console.log("用户点击了取消");
}

提示框：prompt(message, defaultText)（返回用户输入值或null）

const name = prompt("请输入姓名", "匿名");
if (name !== null) {console.log("你输入的是：" + name);
}

一次性定时器：setTimeout(callback, delay)

// 3秒后弹出提示
setTimeout(() => {alert("定时器触发！");
}, 3000);

循环定时器：setInterval(callback, delay)

let recount = function(){console.log('3秒倒计时...');
}
setInterval(recount,3000);

3.`location`对象：地址栏操作

3.1作用

用于获取和修改当前页面的 URL 地址，控制页面跳转。

3.2 常用方法

assign(url)：跳转到指定 URL（会记录历史记录）
```
location.assign("https://www.jd.com");
```
replace(url)：替换当前页面（不记录历史记录，无法回退）
```
location.replace("https://www.taobao.com");
```
reload([force])：重新加载当前页面（force=true强制从服务器刷新）
```
location.reload(); // 普通刷新
location.reload(true); // 强制刷新
```

4.`history`对象：历史记录管理

4.1 作用

操作浏览器的历史记录（前进、后退、跳转指定页面）。

4.2 常用方法

方法	说明	代码示例
`back()`	后退到上一个页面（等价于浏览器左上角←按钮）	`history.back();`
`forward()`	前进到下一个页面（等价于浏览器→按钮）	`history.forward();`
`go(n)`	跳转指定步数： `n=1`前进 1 步，`n=-1`后退 1 步，`n=0`刷新当前页	`history.go(-2);`（后退 2 步）

案例：

需求：实现五秒后跳转的操作

html代码

<div  style="font-size: 25px;"><span id = "time">5</span>秒钟后跳转...</div>

javaScript代码

		// 获取元素对象let time = document.getElementById("time")//定义一个变量，记住文章数据，从而进行计时的效果let num = 5let closeInter = setInterval(function (){time.innerText = numnum--// 进行判断if(num < 0 ){clearInterval(closeInter)}},1000)