跳至内容
概览
软件开发
Web开发
BOM 与 DOM

BOM 与 DOM

JavaScript 通过两套对象模型与浏览器和页面交互：BOM（Browser Object Model）让 JS 能操控浏览器窗口本身；DOM（Document Object Model）让 JS 能读写页面中的 HTML 元素。本文覆盖两套模型的核心 API 和常用事件绑定方式。

BOM

BOM 以 window 为顶级对象，调用其方法和属性时可以省略 window. 前缀。

window 对象

属性/方法说明
innerHeight浏览器窗口内部高度
innerWidth浏览器窗口内部宽度
open(url, name, features)新建浏览器标签页/窗口
close()关闭当前窗口
opener父子页面通信（子页面引用打开它的父页面）
// 打开一个 400×400 的新窗口
window.open('https://example.com', '', 'height=400px,width=400px,top=400px,left=400px');

navigator

包含当前浏览器的信息，常用于判断用户使用的浏览器或操作系统。

navigator.appName      // Web 浏览器全称
navigator.appVersion   // 厂商和版本的详细字符串
navigator.userAgent    // 客户端完整信息（最常用）
navigator.platform     // 操作系统平台

screen

屏幕对象，获取可用屏幕尺寸。

screen.availWidth    // 可用屏幕宽度
screen.availHeight   // 可用屏幕高度

history

浏览历史对象，可前进或后退页面（无法查看具体 URL）。

history.forward()   // 前进一页
history.back()      // 后退一页

location

获取和操控当前页面 URL。

location.href               // 获取当前 URL
location.href = 'https://example.com'  // 跳转到指定页面
location.reload()           // 重新加载当前页面

弹框

JS 提供三种原生弹框：

alert('你看到了吗？')             // 警告框：用户点确定后继续

var confirmed = confirm('确定吗？')   // 确认框：确定→true，取消→false

var input = prompt('请输入', '默认值') // 提示框：返回输入值或 null

计时器 

// setTimeout：延迟执行，一次性任务
function func1() { alert(123); }
let t = setTimeout(func1, 3000);  // 3 秒后执行
clearTimeout(t);                  // 取消定时任务

// setInterval：周期性执行
function func2() { alert(123); }

function show() {
  let t = setInterval(func2, 3000);  // 每隔 3 秒执行一次
  setTimeout(function() {
    clearInterval(t);                // 9 秒后停止
  }, 9000);
}
show();

DOM

DOM 将 HTML 文档表示为树形结构，JS 通过它可以读写页面上所有 HTML 元素、属性和样式。DOM 操作以关键字 document 起手。

HTML DOM 树

DOM树结构

DOM 标准规定 HTML 文档中的每个成分都是节点（node）：

  • 文档节点（document）：代表整个文档
  • 元素节点（element）：代表一个 HTML 标签
  • 文本节点（text）：代表元素中的文本内容
  • 属性节点（attribute）：代表元素的属性

JS 通过 DOM 可以动态改变页面中的 HTML 元素、属性、CSS 样式以及对事件做出响应。

查找标签

直接查找 

// 按 ID（返回单个元素）
document.getElementById('app')

// 按 class（返回类数组，用索引取元素）
document.getElementsByClassName('header')[0]

// 按标签名（返回类数组）
document.getElementsByTagName('h3')[5]

间接查找（相对导航） 

var el = document.getElementById('d1');

el.parentElement            // 父节点
el.children                 // 所有子标签（类数组）
el.firstElementChild        // 第一个子标签
el.lastElementChild         // 最后一个子标签
el.nextElementSibling       // 下一个兄弟标签
el.previousElementSibling   // 上一个兄弟标签

标签操作

创建与插入 

var divEle = document.createElement('div');

// 追加为最后一个子节点
somenode.appendChild(divEle);

// 插入到指定节点前
somenode.insertBefore(divEle, someOtherNode);

// 示例：动态插入图片
var imgEle = document.createElement('img');
imgEle.setAttribute('src', 'photo.jpg');
document.getElementById('d1').appendChild(imgEle);

删除与替换 

// 删除（通过父节点调用）
somenode.removeChild(childNode);

// 替换
somenode.replaceChild(newNode, oldNode);

属性操作 

var divEle = document.getElementById('d1');

// 读写文本内容
divEle.innerText            // 纯文本（不含子标签）
divEle.innerHTML            // 含 HTML 标签的内容

divEle.innerText = '纯文本';
divEle.innerHTML = '<p>段落</p>';

// 自定义属性
divEle.setAttribute('age', '18');
divEle.getAttribute('age');
divEle.removeAttribute('age');

// 元素原生属性可直接点语法访问
imgEle.src
imgEle.src = 'new.jpg';

// 获取表单值（适用于 input / select / textarea）
document.getElementById('i1').value

class 操作 

el.className                    // 获取所有 class（字符串）
el.classList.add('active')      // 添加 class
el.classList.remove('active')   // 删除 class
el.classList.contains('active') // 是否含有该 class
el.classList.toggle('active')   // 有则删，无则加

样式操作 

// 直接设置内联样式
el.style.backgroundColor = 'red';

// 无中横线的属性：直接使用
el.style.margin
el.style.width
el.style.position

// 含中横线的属性：去掉横线，后一个字母大写
el.style.marginTop
el.style.borderLeftWidth
el.style.zIndex
el.style.fontFamily

Window 对象

window 是客户端 JS 的顶级对象，调用其方法和属性时可省略 window. 前缀（如 window.document.write() 可简写为 document.write()）。

window.onload 在页面完全加载（包括所有图像、脚本、链接）后触发，确保此时 DOM 中的元素都已存在再绑定事件。

window.onload 存在覆盖现象——多次赋值只有最后一次生效。如果需要多个回调，改用 addEventListener('load', fn)。

事件

常用事件

事件触发时机
onclick鼠标单击
ondblclick鼠标双击
onfocus元素获得焦点
onblur元素失去焦点（常用于表单验证）
onchange域的内容被改变（常用于 select 联动）
onkeydown键盘按键被按下
onkeyup键盘按键被松开
onload页面或图像加载完成
onmousedown鼠标按钮被按下
onmousemove鼠标移动
onmouseout鼠标移离元素
onmouseover鼠标移入元素
onsubmit表单提交（绑定在 <form> 上）

绑定方式

方式一：HTML 属性内联绑定（this 代表触发元素）

<div id="d1" onclick="changeColor(this)">点我</div>
<script>
  function changeColor(ths) {
    ths.style.backgroundColor = 'green';
  }
</script>

方式二：JS 赋值绑定（推荐，行为与结构分离）

<div id="d2">点我</div>
<script>
  var divEle = document.getElementById('d2');
  divEle.onclick = function() {
    this.innerText = '呵呵';
  };
</script>
最后更新于
JavaScript 基础jQuery 基础