首页 > 网络编程 > JavaScript > javascript技巧 > JS Dom模型和Bom模型

JavaScript中Dom模型和Bom模型举例详解

2025-06-16 11:34:59 作者：GH小杨

DOM和BOM是Web开发中的两个重要模型,这篇文章主要给大家介绍了关于JavaScript中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 = 5
		let closeInter = setInterval(function (){
			time.innerText = num
			num--
			// 进行判断
			if(num < 0 ){
				clearInterval(closeInter)
			}
		},1000)

总结

到此这篇关于JavaScript中Dom模型和Bom模型的文章就介绍到这了,更多相关JS Dom模型和Bom模型内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！