WebAPI 全面解析：BOM与DOM核心指南

WebAPI 学习文档

概述

WebAPI 是浏览器提供的一套 API，用于操作浏览器窗口和界面，与 JavaScript 标准库不同，它依赖于浏览器环境。WebAPI 主要包含两部分：

• BOM（Browser Object Model）：浏览器模型，提供和浏览器相关的操作
• DOM（Document Object Model）：文档模型，提供和页面相关的操作

BOM（浏览器对象模型）

BOM 提供了一系列对象和函数，用于操作浏览器本身。

window 对象

window 是浏览器的全局对象，所有 BOM 和 DOM 的功能都以某种方式与 window 对象相关联。

示例代码：

// 打开新窗口constnewWindow=window.open('https://example.com','_blank','width=500,height=300');// 3秒后执行consttimer=setTimeout(()=>{console.log('3秒后执行');},3000);// 清除计时器clearTimeout(timer);// 每隔1秒执行一次constinterval=setInterval(()=>{console.log('每隔1秒执行');},1000);// 5秒后停止间隔执行setTimeout(()=>{clearInterval(interval);},5000);

window.location

提供地址栏的相关操作，用于获取或修改当前页面的 URL 信息。

示例代码：

// 获取当前URLconsole.log(location.href);// 输出完整URL// 跳转到新页面location.href='https://example.com';// 获取URL参数console.log(location.search);// 输出"?id=1&name=test"// 刷新页面location.reload();

window.history

提供当前窗口历史记录的操作。

示例代码：

// 后退一页history.back();// 前进一页history.forward();// 前进两页history.go(2);// 添加新的历史记录history.pushState({page:1},"页面1","/page1");

DOM（文档对象模型）

DOM 将 HTML 文档表示为一个树状结构，每个节点都是一个对象，通过操作这些对象可以改变页面的结构、内容和样式。

获取 DOM 元素

示例代码：

// 根据ID获取constbox=document.getElementById('box');// 根据标签名获取constdivs=document.getElementsByTagName('div');// 根据类名获取constitems=document.getElementsByClassName('item');// 根据CSS选择器获取constfirstItem=document.querySelector('.list .item');constallItems=document.querySelectorAll('.list .item');// 获取子元素constchildren=box.children;// 获取父元素constparent=box.parentElement;

创建 DOM 元素

示例代码：

// 创建一个div元素constnewDiv=document.createElement('div');newDiv.textContent='新创建的元素';newDiv.className='new-class';

更改 DOM 结构

示例代码：

constparent=document.getElementById('parent');constchild=document.createElement('div');// 添加子元素parent.appendChild(child);// 在第一个子元素前插入新元素constfirstChild=parent.firstElementChild;parent.insertBefore(child,firstChild);// 删除子元素parent.removeChild(child);// 移除自身child.remove();

DOM 属性操作

标准属性

HTML 元素的标准属性（如href、src、value等）可以直接通过dom.属性名访问和修改。

注意：

• 布尔属性会自动转换为 boolean 类型
• 路径类属性会转换为绝对路径
• class属性需使用className访问（避免与关键字冲突）

示例代码：

constlink=document.querySelector('a');console.log(link.href);// 获取href属性link.href='https://example.com';// 设置href属性constinput=document.querySelector('input');input.value='默认值';// 设置输入框值constdiv=document.querySelector('div');div.className='active';// 设置类名

自定义属性

自定义属性需要通过setAttribute和getAttribute方法操作。

示例代码：

constdiv=document.querySelector('div');// 设置自定义属性div.setAttribute('data-id','123');div.setAttribute('data-name','test');// 获取自定义属性console.log(div.getAttribute('data-id'));// 输出"123"

DOM 内容操作

示例代码：

constdiv=document.querySelector('div');// 设置文本内容div.innerText='Hello <strong>World</strong>';// 显示为"Hello <strong>World</strong>"// 设置HTML内容div.innerHTML='Hello <strong>World</strong>';// 显示为"Hello World"（World会加粗）// 获取内容console.log(div.innerText);// 获取文本内容console.log(div.innerHTML);// 获取HTML内容

DOM 样式操作

JS 中可以操作两种样式：内联样式和计算样式（最终样式），但只能设置内联样式。

示例代码：

constdiv=document.querySelector('div');// 设置内联样式div.style.color='red';div.style.fontSize='16px';div.style.backgroundColor='#f0f0f0';// 获取内联样式console.log(div.style.color);// 输出"red"// 获取计算样式constcomputedStyle=getComputedStyle(div);console.log(computedStyle.width);// 输出元素的实际宽度console.log(computedStyle.marginTop);// 输出元素的实际上边距

事件监听

事件监听是指当某个 DOM 元素发生特定事件时，执行相应的处理函数。

事件类型

表单类事件

鼠标类事件

键盘类事件

注册事件的方式

方式 1：通过元素属性（不推荐）

<buttononclick="handleClick()">点击我</button><script>functionhandleClick(){console.log('按钮被点击了');}</script>

方式 2：通过 DOM 属性

constbutton=document.querySelector('button');button.onclick=function(){console.log('按钮被点击了');};// 移除事件监听button.onclick=null;

方式 3：通过addEventListener方法（推荐）

constbutton=document.querySelector('button');functionhandleClick(){console.log('按钮被点击了');}// 添加事件监听button.addEventListener('click',handleClick);// 移除事件监听button.removeEventListener('click',handleClick);

事件对象

事件处理函数会接收一个事件对象参数，包含事件相关的信息。

示例代码：

document.querySelector('button').addEventListener('click',function(e){console.log('鼠标X坐标：',e.clientX);console.log('鼠标Y坐标：',e.clientY);console.log('事件源：',e.target);});

DOM 进阶

事件默认行为

某些事件会触发浏览器的默认行为（如 a 标签的跳转、表单的提交等），可以通过e.preventDefault()阻止。

示例代码：

// 阻止a标签跳转document.querySelector('a').addEventListener('click',function(e){e.preventDefault();// 阻止默认跳转行为console.log('链接被点击，但不跳转');});// 阻止表单提交document.querySelector('form').addEventListener('submit',function(e){e.preventDefault();// 阻止默认提交行为console.log('表单被提交，但不刷新页面');});

事件传播机制

事件传播分为三个阶段：捕获阶段、目标阶段、冒泡阶段。

• 捕获阶段：事件从最外层元素向内传播到目标元素
• 目标阶段：事件到达目标元素
• 冒泡阶段：事件从目标元素向外传播到最外层元素

示例代码：

// 在捕获阶段触发parent.addEventListener('click',function(){console.log('捕获阶段 - 父元素');},true);// 在冒泡阶段触发（默认）parent.addEventListener('click',function(){console.log('冒泡阶段 - 父元素');},false);// 阻止事件冒泡child.addEventListener('click',function(e){e.stopPropagation();// 阻止事件继续传播console.log('子元素被点击');});

DOM 尺寸和位置

可以通过以下属性和方法获取元素的尺寸和位置信息：

• dom.offsetWidth/dom.offsetHeight：元素的宽高（包括边框和内边距）
• dom.clientWidth/dom.clientHeight：元素的宽高（包括内边距，不包括边框）
• dom.scrollWidth/dom.scrollHeight：元素内容的实际宽高（包括滚动隐藏部分）
• dom.offsetTop/dom.offsetLeft：元素相对于 offsetParent 的位置
• dom.scrollTop/dom.scrollLeft：元素滚动的距离
• dom.getBoundingClientRect()：获取元素相对于视口的位置和尺寸

示例代码：

constbox=document.querySelector('.box');// 获取元素尺寸console.log('宽：',box.offsetWidth);console.log('高：',box.offsetHeight);// 获取元素位置console.log('距离顶部：',box.offsetTop);console.log('距离左侧：',box.offsetLeft);// 获取相对于视口的位置constrect=box.getBoundingClientRect();console.log('视口顶部：',rect.top);console.log('视口左侧：',rect.left);// 滚动到顶部box.scrollTo(0,0);

总结

WebAPI 是前端开发的基础，包含 BOM 和 DOM 两部分：

• BOM 用于操作浏览器窗口，包括窗口控制、地址栏操作、历史记录等
• DOM 用于操作网页内容，包括元素获取、创建、修改、样式设置和事件处理等

掌握 WebAPI 是进行前端开发的必备技能，通过灵活运用这些 API，可以实现丰富的交互效果和功能。建议结合实际项目多练习，加深对这些 API 的理解和应用。