Computer Science

WangMC Blog

DOM&BOM对象的方法和属性

发表于 分类于
本文字数： 11k 阅读时长 ≈ 10 分钟

如题，结合官方文档与网络帖子，利用AI整理

DOM & BOM 对象方法属性全面总结

DOM（文档对象模型）

概念介绍

DOM (Document Object Model) 是浏览器把HTML或XML文档结构化成对象的方式，并提供了一套API让JavaScript去操作这些对象，从而动态控制网页内容、结构和样式。

核心特点：

  • DOM将文档表示为节点树结构

  • 每个节点都是一个对象，可以被JavaScript访问和修改

  • DOM不是JavaScript语言的一部分，而是浏览器提供的Web API

  • 支持跨平台和跨语言访问

Document对象

概念：代表整个HTML文档，是DOM树的根节点

常用属性

属性名 说明
document.documentElement 获取<html>元素
document.body 获取<body>元素
document.head 获取<head>元素
document.title 获取或设置文档标题
document.URL 获取当前文档的URL
document.domain 获取文档的域名
document.cookie 获取或设置cookie
document.referrer 获取引用页面的URL
document.characterSet 获取文档的字符编码
document.readyState 获取文档的加载状态
document.doctype 获取文档类型声明
document.activeElement 获取当前获得焦点的元素
document.hidden 获取文档是否隐藏
document.visibilityState 获取文档的可见性状态

常用方法

方法名 说明
getElementById(id) 通过ID获取元素
getElementsByClassName(className) 通过类名获取元素集合
getElementsByTagName(tagName) 通过标签名获取元素集合
querySelector(selector) 通过CSS选择器获取第一个匹配元素
querySelectorAll(selector) 通过CSS选择器获取所有匹配元素
createElement(tagName) 创建新的元素节点
createTextNode(text) 创建新的文本节点
createDocumentFragment() 创建文档片段
write(content) 向文档写入内容
open() 打开文档以便写入
close() 关闭文档写入
addEventListener(eventName, listener) 添加事件监听器
removeEventListener(eventName, listener) 移除事件监听器
dispatchEvent(event) 派发事件

Element对象

概念：代表HTML元素，是DOM树中的元素节点

常用属性

属性名 说明
element.id 获取或设置元素的ID
element.className 获取或设置元素的类名
element.classList 获取元素的类列表对象
element.style 获取元素的内联样式对象
element.innerHTML 获取或设置元素的HTML内容
element.textContent 获取或设置元素的文本内容
element.attributes 获取元素的所有属性
element.parentElement 获取父元素
element.children 获取子元素集合
element.firstElementChild 获取第一个子元素
element.lastElementChild 获取最后一个子元素
element.previousElementSibling 获取前一个兄弟元素
element.nextElementSibling 获取后一个兄弟元素
element.offsetTop 获取元素相对于offsetParent的顶部偏移
element.offsetLeft 获取元素相对于offsetParent的左侧偏移
element.offsetWidth 获取元素的宽度（包括边框和内边距）
element.offsetHeight 获取元素的高度（包括边框和内边距）
element.clientWidth 获取元素的内容宽度（不包括边框）
element.clientHeight 获取元素的内容高度（不包括边框）
element.scrollTop 获取或设置元素的垂直滚动位置
element.scrollLeft 获取或设置元素的水平滚动位置
element.scrollWidth 获取元素的总宽度（包括不可见部分）
element.scrollHeight 获取元素的总高度（包括不可见部分）
element.dataset 获取元素的自定义数据属性

常用方法

方法名 说明
setAttribute(name, value) 设置元素属性
getAttribute(name) 获取元素属性值
removeAttribute(name) 移除元素属性
hasAttribute(name) 检查元素是否有指定属性
appendChild(child) 添加子元素到末尾
insertBefore(newChild, refChild) 在指定位置插入子元素
removeChild(child) 移除子元素
replaceChild(newChild, oldChild) 替换子元素
cloneNode(deep) 克隆元素节点
contains(node) 检查元素是否包含指定节点
scrollIntoView(behavior) 滚动到视图中
focus() 使元素获得焦点
blur() 使元素失去焦点
click() 模拟点击元素
classList.add(className) 添加类名
classList.remove(className) 移除类名
classList.toggle(className) 切换类名
classList.contains(className) 检查是否有类名

Node对象

概念：DOM树中的所有节点都继承自Node接口

节点类型

节点类型 值 说明
ELEMENT_NODE 1 元素节点
TEXT_NODE 3 文本节点
COMMENT_NODE 8 注释节点
DOCUMENT_NODE 9 文档节点
DOCUMENT_TYPE_NODE 10 文档类型节点
DOCUMENT_FRAGMENT_NODE 11 文档片段节点

常用属性

属性名 说明
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值
parentNode 父节点
childNodes 子节点集合
firstChild 第一个子节点
lastChild 最后一个子节点
previousSibling 前一个兄弟节点
nextSibling 后一个兄弟节点
ownerDocument 所属文档
textContent 文本内容

常用方法

方法名 说明
appendChild(child) 添加子节点
insertBefore(newChild, refChild) 插入子节点
removeChild(child) 移除子节点
replaceChild(newChild, oldChild) 替换子节点
cloneNode(deep) 克隆节点
normalize() 规范化节点
isEqualNode(node) 检查节点是否相等
contains(node) 检查是否包含节点
hasChildNodes() 检查是否有子节点

DOM事件处理

事件级别

  • DOM0级事件：直接通过元素属性绑定

  • DOM2级事件：使用addEventListener，支持事件捕获和冒泡

  • DOM3级事件：扩展了事件类型，增加了更多事件接口

事件流阶段

  1. 捕获阶段：事件从文档根节点向下传播到目标元素

  2. 目标阶段：事件到达目标元素

  3. 冒泡阶段：事件从目标元素向上传播到文档根节点

常用事件方法

方法名 说明
addEventListener(type, listener, useCapture) 添加事件监听器
removeEventListener(type, listener, useCapture) 移除事件监听器
dispatchEvent(event) 派发事件
preventDefault() 阻止事件默认行为
stopPropagation() 阻止事件传播
stopImmediatePropagation() 立即阻止事件传播

常见事件类型

鼠标事件：

  • click - 鼠标点击

  • dblclick - 鼠标双击

  • mousedown - 鼠标按下

  • mouseup - 鼠标释放

  • mouseover - 鼠标悬停

  • mouseout - 鼠标离开

  • mousemove - 鼠标移动

  • mouseenter - 鼠标进入

  • mouseleave - 鼠标离开

键盘事件：

  • keydown - 键盘按下

  • keyup - 键盘释放

  • input - 输入事件

表单事件：

  • submit - 表单提交

  • reset - 表单重置

  • change - 值改变

  • focus - 获得焦点

  • blur - 失去焦点

文档事件：

  • load - 页面加载完成

  • unload - 页面卸载

  • beforeunload - 页面即将卸载

  • DOMContentLoaded - DOM加载完成

  • resize - 窗口大小改变

  • scroll - 页面滚动

BOM（浏览器对象模型）

概念介绍

BOM (Browser Object Model) 是浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对象。

核心特点：

  • BOM没有正式的标准，但所有浏览器都支持基本的对象和方法

  • window对象是BOM的核心，也是JavaScript的全局对象

  • 提供了操作浏览器窗口、导航、历史记录等功能

  • 包含DOM的document对象作为其子对象

Window对象

概念：代表浏览器窗口，是BOM的顶层对象

常用属性

属性名 说明
window.innerWidth 视口宽度
window.innerHeight 视口高度
window.outerWidth 浏览器窗口宽度
window.outerHeight 浏览器窗口高度
window.scrollX 水平滚动距离
window.scrollY 垂直滚动距离
window.screenX 窗口相对于屏幕的X坐标
window.screenY 窗口相对于屏幕的Y坐标
window.closed 检查窗口是否关闭
window.frames 获取窗口中的框架集合
window.parent 获取父窗口
window.top 获取顶级窗口
window.self 获取当前窗口
window.name 获取或设置窗口名称
window.location 获取位置对象
window.history 获取历史对象
window.navigator 获取导航对象
window.screen 获取屏幕对象
window.document 获取文档对象
window.localStorage 获取本地存储
window.sessionStorage 获取会话存储
window.console 获取控制台对象

常用方法

方法名 说明
alert(message) 显示警告框
confirm(message) 显示确认框
prompt(message, defaultText) 显示输入框
open(url, name, features) 打开新窗口
close() 关闭窗口
focus() 使窗口获得焦点
blur() 使窗口失去焦点
print() 打印窗口内容
scrollTo(x, y) 滚动到指定位置
scrollBy(x, y) 相对滚动
resizeTo(width, height) 调整窗口大小
resizeBy(width, height) 相对调整窗口大小
setTimeout(callback, delay) 设置超时器
setInterval(callback, interval) 设置定时器
clearTimeout(timeoutId) 清除超时器
clearInterval(intervalId) 清除定时器
requestAnimationFrame(callback) 请求动画帧
cancelAnimationFrame(requestId) 取消动画帧
btoa(string) Base64编码
atob(string) Base64解码
encodeURI(uri) 编码URI
decodeURI(uri) 解码URI
encodeURIComponent(uriComponent) 编码URI组件
decodeURIComponent(uriComponent) 解码URI组件

Location对象

概念：包含有关当前URL的信息

常用属性

属性名 说明
location.href 完整URL
location.protocol 协议（http:或https:）
location.host 主机名和端口
location.hostname 主机名
location.port 端口号
location.pathname 路径部分
location.search 查询字符串
location.hash 哈希值
location.origin 源（协议+主机名+端口）

常用方法

方法名 说明
assign(url) 跳转到指定URL
replace(url) 替换当前URL
reload(forceGet) 重新加载页面
toString() 返回完整URL字符串

History对象

概念：包含浏览器的历史记录

常用属性

属性名 说明
history.length 历史记录数量
history.state 当前历史状态
history.scrollRestoration 滚动恢复模式

常用方法

方法名 说明
back() 返回上一页
forward() 前进到下一页
go(delta) 跳转到指定页面
pushState(state, title, url) 添加历史记录
replaceState(state, title, url) 替换当前历史记录

概念：包含浏览器的相关信息

常用属性

属性名 说明
navigator.userAgent 用户代理字符串
navigator.appName 浏览器名称
navigator.appVersion 浏览器版本
navigator.platform 操作系统平台
navigator.language 浏览器语言
navigator.onLine 是否在线
navigator.cookieEnabled 是否启用cookie
navigator.geolocation 地理位置接口
navigator.mediaDevices 媒体设备接口
navigator.hardwareConcurrency CPU核心数
navigator.deviceMemory 设备内存

Screen对象

概念：包含屏幕的相关信息

常用属性

属性名 说明
screen.width 屏幕宽度
screen.height 屏幕高度
screen.availWidth 可用屏幕宽度
screen.availHeight 可用屏幕高度
screen.colorDepth 颜色深度
screen.pixelDepth 像素深度
screen.orientation 屏幕方向

Storage对象

概念：提供本地存储功能

存储类型

  • localStorage：永久存储，无过期时间，容量约5MB

  • sessionStorage：会话存储，关闭页面后清除，容量约5MB

常用方法

方法名 说明
setItem(key, value) 设置存储项
getItem(key) 获取存储项
removeItem(key) 移除存储项
clear() 清除所有存储项
key(index) 获取指定索引的键名

实际使用示例

DOM操作示例

元素选择和操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取元素
const element = document.getElementById('myElement');
const elements = document.querySelectorAll('.myClass');
const firstDiv = document.querySelector('div');

// 修改内容
element.textContent = '新的文本内容';
element.innerHTML = '<strong>加粗文本</strong>';

// 修改样式
element.style.color = 'red';
element.style.fontSize = '16px';
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('visible');

// 修改属性
element.setAttribute('src', 'image.jpg');
element.getAttribute('href');
element.removeAttribute('disabled');

创建和插入元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 创建元素
const newDiv = document.createElement('div');
newDiv.textContent = '新创建的元素';
newDiv.className = 'new-element';

// 插入元素
const container = document.getElementById('container');
container.appendChild(newDiv);

// 在指定位置插入
const referenceElement = document.getElementById('reference');
container.insertBefore(newDiv, referenceElement);

// 使用文档片段批量插入
const fragment = document.createDocumentFragment();
for (let i = 0; i < 10; i++) {
    const item = document.createElement('div');
    item.textContent = `项目 ${i + 1}`;
    fragment.appendChild(item);
}
container.appendChild(fragment);

事件处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// DOM0级事件
const button = document.getElementById('myButton');
button.onclick = function() {
    alert('按钮被点击了！');
};

// DOM2级事件
button.addEventListener('click', function(event) {
    console.log('事件类型:', event.type);
    console.log('目标元素:', event.target);
    
    // 阻止默认行为
    event.preventDefault();
    
    // 阻止事件传播
    event.stopPropagation();
});

// 事件委托
document.getElementById('list').addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('列表项被点击:', event.target.textContent);
    }
});

BOM操作示例

窗口操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 窗口信息
console.log('窗口宽度:', window.innerWidth);
console.log('窗口高度:', window.innerHeight);
console.log('滚动位置:', window.scrollX, window.scrollY);

// 滚动操作
window.scrollTo(0, 100); // 滚动到指定位置
window.scrollBy(0, 50);  // 相对滚动
window.scrollTo({
    top: 100,
    left: 0,
    behavior: 'smooth' // 平滑滚动
});

// 弹出框
alert('这是一个警告框');
const result = confirm('确定要删除吗？');
const name = prompt('请输入您的姓名:', '张三');

// 打开和关闭窗口
const newWindow = window.open('https://www.example.com', '_blank', 'width=800,height=600');
newWindow.close();

位置和导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 位置信息
console.log('当前URL:', location.href);
console.log('协议:', location.protocol);
console.log('主机名:', location.hostname);
console.log('路径:', location.pathname);
console.log('查询参数:', location.search);

// 导航操作
location.href = 'https://www.example.com'; // 跳转
location.assign('https://www.example.com'); // 跳转
location.replace('https://www.example.com'); // 替换当前页面
location.reload(); // 刷新页面
location.reload(true); // 强制刷新

// 解析查询参数
function getQueryParams() {
    const params = new URLSearchParams(location.search);
    const result = {};
    for (const [key, value] of params) {
        result[key] = value;
    }
    return result;
}

历史记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 历史记录操作
console.log('历史记录数量:', history.length);
history.back(); // 返回上一页
history.forward(); // 前进到下一页
history.go(-2); // 返回前两页

// HTML5 History API
history.pushState({page: 1}, '页面 1', '?page=1');
history.replaceState({page: 2}, '页面 2', '?page=2');

// 监听历史状态变化
window.addEventListener('popstate', function(event) {
    console.log('历史状态变化:', event.state);
});

本地存储

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// localStorage
localStorage.setItem('username', '张三');
localStorage.setItem('settings', JSON.stringify({theme: 'dark'}));

const username = localStorage.getItem('username');
const settings = JSON.parse(localStorage.getItem('settings'));

localStorage.removeItem('username');
// localStorage.clear();

// sessionStorage
sessionStorage.setItem('tempData', '临时数据');
const tempData = sessionStorage.getItem('tempData');

// 监听存储变化
window.addEventListener('storage', function(event) {
    console.log('存储变化:', event.key, event.newValue);
});