目录

一、DOM（文档对象模型）

1. 什么是 DOM？

2. 获取元素的方法

二、事件

1.事件的创建流程

2. addEventListener 绑定事件示例（更推荐）

3. 常见鼠标事件

DOM元素上的的属性：

三、操作元素

1. 修改元素内容

2. 修改元素属性

3. 修改样式

四、BOM（浏览器对象模型）

1. 什么是 BOM？

2. 常用 BOM 操作

页面加载事件

定时器

窗口大小变化事件

总结

---

---

本篇文章主要讲的是，DOM、事件、操作元素、BOM 四个核心知识点。

一、DOM（文档对象模型）

1. 什么是 DOM？

DOM 是浏览器提供的一套用于操作 HTML 文档的接口，它将 HTML 文档解析为一个由节点和对象组成的树形结构，开发者可以通过 JavaScript 来操作这些节点，实现动态更新页面内容、结构和样式。

1. 文档：一个页面就是一个文档，DOM中使用document表示
2. 节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
3. 标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示

DOM核心概念

双重性质

• 既是HTML/XML文档的结构化数据表示，也是一组可操作的编程接口（API）。

核心功能 ：通过JavaScript等语言动态操作网页内容、结构和样式。

示例方法：

• document.getElementById() 获取元素
• element.innerHTML 修改内容
• element.appendChild() 动态添加元素 

2. 获取元素的方法

1.通过id名获取

2.通过标签名获取（html标签：如 div，li ul这些）

3.通过 类名（class）获取

<!DOCTYPE html>
<html>
<head>
    <title>DOM 示例</title>
</head>
<body>
    <div id="box">我是一个盒子</div>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>
    <script>
        // 通过 ID 获取元素
        const box = document.getElementById('box');
        console.log(box.innerText); // 输出：我是一个盒子

        // 通过标签名获取元素
        const lis = document.getElementsByTagName('li');
        console.log(lis[0].innerText); // 输出：列表1

        // 通过类名获取元素
        const items = document.getElementsByClassName('item'); // 假设有类名为 item 的元素

        // 使用 querySelector 获取第一个匹配元素
        const firstLi = document.querySelector('li');
        console.log(firstLi.innerText); // 输出：列表1

        // 使用 querySelectorAll 获取所有匹配元素
        const allLis = document.querySelectorAll('li');
        allLis.forEach(li => console.log(li.innerText));
    </script>
</body>
</html>

---

二、事件

1.事件的创建流程

①事件源（谁）：触发事件的元素

②事件类型（什么事件）： 例如 click 点击事件

③事件处理程序（做啥）：事件触发后要执⾏的代码(函数形式)，事件处理函数

大白话：什么元素会触发事件，我做了什么导致触发，触发了会做什么

 // 执⾏事件步骤
 // 点击div 控制台输出 我被选中了
 // 1. 获取事件源
 var div = document.querySelector('div');
// 2.绑定事件 注册事件
// div.onclick
// 3.添加事件处理程序
div.onclick = function() {
 console.log('我被选中了');
}

onclick解释：事件处理器属性，是元素对象的一个属性，用于响应click事件，是click事件在DOM元素上的具体实现方式

另一种写法：事件绑定在标签内部：

//写在html里面 页面展示
<button onclick="func()"> 点击我</button>

<script>
function func(){
    console.log("我被选中了")
}
</script>

2. addEventListener 绑定事件示例（更推荐）

语法：element.addEventListener(eventType, handler, [options]);

• element：要绑定事件的 DOM 元素（如 document、document.body、button 等），
• eventType：事件类型名称，不带前缀 on（如点击事件是 click 而非 onclick）。常见值：click、mouseover、keydown、load、resize、submit 等。
• handler：（函数 / 对象）事件触发时执行的处理程序，有两种形式：

                函数形式：普通函数、匿名函数、箭头函数（注意 this 指向差异）。

                对象形式：实现了 handleEvent 方法的对象（较少用）。

• options / useCapture（可选）：控制事件的触发阶段和行为，是布尔值或配置对象：

        布尔值 useCapture：false（默认）表示冒泡阶段触发，true 表示捕获阶段触发。

        配置对象 options（更灵活）

<button id="btn">点击我</button>
<script>
    const btn = document.getElementById('btn');
    btn.onclick = function() {
        alert('按钮被点击了！');
    };

    // 使用 addEventListener 绑定事件（推荐）
    btn.addEventListener('click', function() {
        console.log('你点击了按钮');
    });
</script>

3. 常见鼠标事件

DOM元素上的的属性：

事件名称	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

---

三、操作元素

-操作元素----文本内容，属性值

1. 修改元素内容

文本内容====innerText，innerHTML

1.-获取：

元素对象.innerText

元素对象.innerHTML （支持解析 HTML 标签）

2.-修改：

元素对象.innerText=值

元素对象.innerHTML=值

<div id="content">原始内容</div>
<button id="changeContent">修改内容</button>
<script>
    const content = document.getElementById('content');
    const btn = document.getElementById('changeContent');

    btn.addEventListener('click', function() {
        content.innerText = '内容已被修改！';
        // 或者使用 innerHTML 支持 HTML 标签
        // content.innerHTML = '<strong>加粗内容</strong>';
    });
</script>

2. 修改元素属性

-常⽤元素的属性操作=====href，src，class，value，……

1.获取属性的值

元素对象.属性名称

2.修改属性的值

元素对象.属性名称=值

<img id="myImg" src="image1.jpg" alt="图片">
<button id="changeImg">切换图片</button>
<script>
    const img = document.getElementById('myImg');
    const btn = document.getElementById('changeImg');

    btn.addEventListener('click', function() {
        img.src = 'image2.jpg';
        img.alt = '新图片';
    });
</script>

3. 修改样式

1.获取属性的样式

元素对象.style.样式

2.修改属性的值

元素对象.style.样式=值

<div id="styleBox">样式盒子</div>
<button id="changeStyle">改变样式</button>
<script>
    const box = document.getElementById('styleBox');
    const btn = document.getElementById('changeStyle');

    btn.addEventListener('click', function() {
        box.style.color = 'red';
        box.style.backgroundColor = 'yellow';
        box.style.padding = '20px';
    });
</script>

---

四、BOM（浏览器对象模型）

1. 什么是 BOM？

BOM 是浏览器提供的用于操作浏览器窗口的对象模型，其核心是 window 对象。

DOM和BOM的对比：

BOM ⽐ DOM 更⼤，它包含 DOM。

2. 常用 BOM 操作

页面加载事件

window.onload 是窗⼝ (⻚⾯）加载事件，当⽂档内容完全加载完成会触发该事件(包括图像、脚本⽂

件、CSS ⽂件等), 就调⽤的处理函数。

window.onload = function() {
    console.log('页面完全加载完毕');
};

// 或者使用 addEventListener
window.addEventListener('load', function() {
    alert('页面加载完成');
});

注意：

1.有了window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载

再去执行处理函数。

2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准

3.如果使用addEventListener则没有限制。

定时器

语法：window.setTimeout（调用函数，[延迟的毫秒数]）; （window 可以省略）

一次性定时器：setTimeout（调用函数，[延迟的毫秒数]）;

清除定时器：clearTimeout（使用过的定时器名称）;

重复性定时器：setInterval（调用函数，[间隔的毫秒数]）;

// 一次性定时器
const timeoutId = setTimeout(() => {
    console.log('5秒后执行');
}, 5000);

// 清除定时器
// clearTimeout(timeoutId);

// 重复性定时器
const intervalId = setInterval(() => {
    console.log('每隔1秒执行一次');
}, 1000);

// 清除重复定时器
// clearInterval(intervalId);

窗口大小变化事件

window.addEventListener('resize', function() {
    console.log('窗口大小改变了，当前宽度：', window.innerWidth);
});

注意：

1. 只要窗⼝⼤⼩发⽣像素变化，就会触发这个事件。

2. 我们经常利⽤这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

---

总结

知识点	说明	常用方法/属性
DOM	操作 HTML 文档	getElementById、querySelector、innerHTML
事件	响应用户交互	addEventListener、onclick、onmouseover
操作元素	修改内容、属性、样式	innerText、src、style
BOM	操作浏览器窗口	window、setTimeout、onresize

---

希望这篇博客能帮助你更好地理解 JavaScript 中 DOM、事件、操作元素和 BOM 的核心用法。如果有任何疑问，欢迎在评论区留言交流！🚀