Javascript学习笔记：BOM和DOM

BOM

BOM全称browser object model浏览器对象模型，是浏览器提供给JS进行访问和操作浏览器的一系列API，包括浏览器窗口、导航、历史记录、屏幕信息等。

在 JS中，操作 BOM 的核心对象是 window，它是浏览器环境中的全局对象，其他 BOM 对象都是它的属性。

window对象

窗口控制 ：window.open()、window.close() 等。

js 复制代码

window.open("https://www.bilibili.com/") // 打开URL
window.close() // 关闭当前网页

弹窗：alert()、confirm()、prompt()。

js 复制代码

window.alert("hello, world") // 显示通知消息
window.confirm("hello, world") // 弹窗展示确认信息，"确定"和"取消"按钮，用于获取用户的确认或取消选择。
window.prompt("请输入密码") // 显示信息和输入框

获取窗口尺寸 ：window.innerWidth、window.innerHeight（视口宽高）。

js 复制代码

window.innerHeight // 获取当前浏览器窗口的高度（像素）
window.innerWidth // 获取当前浏览器窗口的宽度（像素）

滚动控制 ：window.scrollTo()、window.scrollBy()。

js 复制代码

window.scrollTo(0, 2000) // 将窗口滚动到网页中的绝对坐标位置。
window.scrollBy(0,20) // 将窗口滚动到当前滚动位置的相对位置。

location对象

location对象用于管理当前页面的 URL。

常用属性：href、protocol、host、pathname、search。

js 复制代码

location.href // 'https://www.bilibili.com/'  当前页面URL
locationg.protocol // 'https:' 协议
location.host // 'www.bilibili.com' 主机名
location.pathname // URL主机名后的路径
location.search // URL "？"后的参数

常用方法：location.assign(url)、location.replace(url)、location.reload()。

js 复制代码

location.assign("https://www.baidu.com/"); // 加载新URL
location.replace("https://www.taobao.com/"); // 替换当前URL，不产生历史记录（清除当前的URL历史记录，不可返回）
location.reload() // 刷新页面

history对象

history对象用于操作浏览器的历史记录（会话历史）。

常用方法：history.back()、history.forward()、history.go(n)（前进/后退 n 步）。

js 复制代码

history.back() // 后退，相当于用户手动点击浏览器"<-"
history.forward() // 前进，相当于用户手动点击浏览器"->"
history.go(-1); // 后退1步，相当于history.back()

属性：history.length（历史记录数量）。

navigator对象

navigator对象获取浏览器和操作系统的信息。

常用属性：navigator.userAgent、navigator.platform、navigator.language等。

js 复制代码

navigator.userAgent // 用户代理信息
// 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36'
navigator.platform // 平台类型
// MacIntel
navigator.language // 语言
// 'zh-CN'

screen对象

screen对象用于获取用户屏幕的信息。

常用属性：screen.width、screen.height（屏幕总宽高）、screen.availWidth、screen.availHeight（可用宽高，除去任务栏等）。

js 复制代码

screen.width // 获取屏幕的宽度（像素）
// 1440
screen.height // 获取屏幕的高度（像素）
// 900
screen.availHeight // 获取屏幕的可用高度（去除任务栏）
// 811
screen.availWidth // 获取屏幕的可用宽度
// 1440

DOM

DOM全称document object model文档对象模型，是浏览器解析HTML生成的一个树形结构，提供一系列API，允许JS对HTML节点树进行查询和操作。

简单来说，DOM 把网页文档转换为一个由节点（如元素、属性、文本）组成的对象模型，使得我们可以通过 JavaScript 来读取页面内容、修改元素样式、添加或删除元素等。

获取元素

DOM获取元素的方法与CSS选择器很相似，常见的通过标签名、类名、ID等方式获取元素。

getElementById(id)：通过元素ID属性获取元素，返回单个元素对象。
getElementsByClassName(className)：通过类名获取元素的集合，返回动态的元素集合。
getElementsByTagName(tagName)：通过标签名获取标签元素的集合，返回动态的元素集合。

html 复制代码

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
  
<div id="div1">  
    <p class="p1">我要验牌</p>  
    <p class="p1">牌没有问题</p>  
    <p>小瘪三</p>  
    <p>给我擦皮鞋</p>  
</div>  
  
<script>  
    // 通过ID获取单个元素对象  
    const div1 = document.getElementById("div1");  
    // 通过标签名获取元素的集合  
    const p_collection = document.getElementsByTagName("p");  
    // 通过类名获取元素的集合  
    const p1_collection = document.getElementsByClassName("p1");  
</script>  
</body>  
</html>

获取的元素集合，类似于数组，可以通过下标索引得到单个元素对象。

js 复制代码

p1_collection // 元素集合
// HTMLCollection(2) [p.p1, p.p1]
p_collection[0] // 元素集合下标索引
// <p class="p1">我要验牌</p>

获取元素的方法，不仅可以在document对象上调用，也可以在已获取的元素对象上调用，以缩小查询的范围。

js 复制代码

const div1 = document.getElementById("div1");
div1.getElementsByClassName("p1");

除了直接查找，也可以通过已获取元素的属性间接获取相关元素，例如：parentNode、children、firstElementChild等。

js 复制代码

div1.parentNode // 获取父元素
// <body>...</body>
div1.children // 获取子元素集合
// HTMLCollection(4) [p.p1, p.p1, p, p]
div1.firstElementChild // 获取第一个子元素
// <p class="p1">我要验牌</p>

学习了CSS的选择器，JS可以直接使用CSS选择器的方法来获取元素对象吗？当然可以！

DOM提供使用 CSS 选择器查找 DOM 元素的方法：querySelector 和 querySelectorAll。

querySelector：返回匹配的第一个 元素，无匹配时返回null。当你只需要操作或检查一个元素时，使用这个方法。

js 复制代码

// 选取匹配 CSS 选择器的第一个元素
const img = document.querySelector("img"); // 标签选择器
const firstButton = document.querySelector('.btn');           // 类选择器
const header = document.querySelector('#header');             // ID 选择器
const link = document.querySelector('a[target="_blank"]');    // 属性选择器

querySelectorAll：返回所有匹配到的元素列表。当你需要遍历或操作一组元素时，使用这个方法。

js 复制代码

// 选取所有匹配的元素（返回静态 NodeList）
const allParagraphs = document.querySelectorAll('p');         // 标签选择器
const items = document.querySelectorAll('.list > li');        // 子组合器
const checkedInputs = document.querySelectorAll('input:checked'); // 伪类

推荐使用querySelector和querySelectorAll 来查找获取元素。

更新元素

更改元素的内容

获取到单个元素对象时，可以更改元素的内容，可使用元素的属性innerText和innerHTML。

js 复制代码

const xiaobiesan = document.getElementById("xiaobiesan");  
xiaobiesan.innerText = "我是小瘪三"; // 使用innerText属性，将元素标签包裹的文本内容进行更改

js 复制代码

const xiaobiesan = document.getElementById("xiaobiesan");  
xiaobiesan.innerHTML = "我是<strong>小瘪三</strong>"; // 使用innerHTML属性，可以设置并解析为HTML标签

修改属性

可以通过setAttribute()方法为元素对象设置属性，也可以通过赋值的方式，为元素设置属性。需要注意：赋值的方式只能设置元素已有的属性，自定义属性只能用setAttribute()方法

js 复制代码

const img = document.querySelector("img"); // 获取第一个img元素  
img.src = "https://img2.baidu.com/it/u=someimg"; // 替换src属性  
img.alt = "新描述"; // 替换alt属性  
// 添加自定义属性  
img.setAttribute("data-info", "这是一张图片");  
// 自定义属性不可以直接赋值  
// img.data-info = "这是一张图片"; // 错误的方式

修改样式

通过 style 属性，可为已选择的元素的设置样式。

js 复制代码

xiaobiesan.style.color = "red";

删除元素

在 JavaScript 中操作 DOM 时，删除一个元素主要有两种常用方法：通过父节点调用 removeChild()，或直接调用元素自身的 remove() 方法。

js 复制代码

// 方法1：通过父元素删除子元素  
// 获取父元素  
const div1 = document.querySelector("#div1");  
// 获取子元素  
const img = document.querySelector("img");  
// 删除子元素  
div1.removeChild(img);  
  
// 方法2：找到元素后删除  
const xiaobiesan = document.querySelector("#xiaobiesan");  
// 删除元素  
xiaobiesan.remove();

添加元素

在 JavaScript 中操作 DOM 添加元素通常分为两步：创建新元素，然后将其插入到 DOM 树中的指定位置。

创建新元素：使用document.createElement(tagName)创建一个新标签元素，创建后的元素尚未出现在页面中，需要进一步操作才能插入。
将元素插入到DOM树中。
1. 使用appendChild() 将一个节点添加到指定父元素的子节点列表的末尾。

js 复制代码

// 创建一个新元素  
const gun = document.createElement("p");  
// 为新元素添加内容  
gun.innerHTML = "我有一把枪";  
// 将新元素插入到DOM树中  
const div1 = document.querySelector("#div1");  
div1.appendChild(gun);

复制代码

2. `insertBefore(newNode, referenceNode)` 将新节点插入到参考节点之前。如果参考节点为 `null`，则等同于 `appendChild`。
3. `parent.append(...nodesOrDOMStrings)`：在父元素的最后一个子元素之后插入节点或字符串（会自动转换为文本节点）。可以同时插入多个，推荐使用。

js 复制代码

// 获取要插入的父元素  
const div2 = document.querySelector(".div2");  
// 插入多个元素  
const p1 = document.querySelector(".p1");  
const p2 = document.querySelector("#xiaobiesan");  
const p3 = document.querySelector("p:nth-child(4)");  
div2.append(p1, p2, p3); // 可一次性插入多个元素

复制代码

4. 在兄弟元素前后插入：`before()` 和 `after()` ，直接在某个元素的前面或后面插入新节点（或字符串），无需通过父元素调用。

js 复制代码

const existing = document.getElementById('myElement');
const newNode = document.createElement('div');
newNode.textContent = '新节点';

existing.before(newNode);    // 在 existing 之前插入
existing.after('一段文字');   // 在 existing 之后插入一段文本（自动转为文本节点）