电影网站cpa怎么做济南网站的优化
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)