JavaScript WebAPI详解：DOM与BOM基础及元素操作
本文深入解析JavaScript WebAPI，涵盖DOM与BOM的核心概念。详细讲解如何通过querySelector获取元素，理解事件三要素，并演示利用innerText、innerHTML及属性接口修改页面内容与表单状态，帮助开发者掌握前端交互基础。
WebAPI是浏览器提供的一套用于操作网页的接口集合。
它主要由DOM API和BOM API两部分组成，前者用于操作页面内容，后者用于操作浏览器窗口。
DOM（文档对象模型）
W3C标准定义了一系列函数，允许开发者对网页内容、页面结构以及样式进行编程操作。
一个典型的网页HTML结构示例如下：
<html>
<head>
<title> 标题 </title>
</head>
<body>
<a href=" ">链接</a>
<h1>我的标题</h1>
</body>
</html>
理解DOM需要掌握几个核心概念：
- 文档（Document）：整个网页页面被视为一个文档对象，通过 document 对象访问。
- 元素（Element）：页面中所有的HTML标签统称为元素，通过 element 对象表示。
- 节点（Node）：网页中所有内容（包括标签、注释、文本、属性等）均被视为节点，通过 node 对象表示。
获取页面元素
DOM提供了类似CSS选择器的功能来定位元素。
querySelector
语法示例：var elem = document.querySelector(selectors);
querySelectorAll
<div class="box">abc</div>
<div id="id">def</div>
<script>
var elems = document.querySelectorAll('div');
console.log(elems);
</script>事件机制
事件处理包含三个关键要素：
1. 事件源：触发事件的HTML元素。
2. 事件类型：如点击、选中或修改等具体行为。
3. 事件处理程序：定义触发后执行的具体逻辑，通常是一个回调函数。
操作页面元素
读取或修改元素内部内容
innerText
使用示例：
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取 div 内部内容
console.log(div.innerText);
// 修改 div 内部内容, 界面上就会同步修改
div.innerText = 'hello js <span>hello js</span>';
</script>innerHTML
Element.innerHTML 属性用于设置或获取元素后代的HTML语法表示。使用示例：
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取页面内容
console.log(div.innerHTML);
// 修改页面内容
div.innerHTML = '<span>hello js</span>'
</script>读取或修改元素属性
//修改属性
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
img.onclick = function () {
if (img.src.lastIndexOf('rose.jpg') !== -1) {
img.src = './rose2.png';
} else {
img.src = './rose.jpg';
}
}
</script>
//获取属性
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
// console.dir(img);
console.log(img.src);
console.log(img.title);
console.log(img.alt);
</script>操作表单元素属性
表单元素（主要是 input 标签）的以下属性可通过DOM进行修改：
- value：获取或设置 input 的值。
- disabled：控制元素是否禁用。
- checked：用于复选框的状态控制。
- selected：用于下拉框的选项控制。
- type：指定 input 的类型（如文本、密码、按钮、文件等）。
代码示例：
<input type="button" value="播放">
<script>
var btn = document.querySelector('input');
btn.onclick = function () {
if (btn.value === '播放') {
btn.value = '暂停';
} else {
btn.value = '播放';
}
}
</script>至此，关于JavaScript深入介绍WebAPI用法的文章结束。如需了解更多JavaScript WebAPI相关内容，请查阅本站往期文章或继续阅读下文。感谢大家的支持！
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33