BOM

BOM（Browser Object Model，浏览器对象模型）是一组与浏览器窗口交互的对象和方法集合，用于控制浏览器行为、获取浏览器信息和处理用户交互。

核心对象

对象 说明
window BOM顶级对象，代表整个浏览器窗口
navigator 包含浏览器信息（用户代理、版本等）
screen 提供屏幕信息（宽度、高度、颜色深度）
location 管理URL信息（主机名、路径、参数）
history 操作浏览器历史记录

常用方法

// 对话框
alert("提示信息");           // 显示警告框
confirm("确定删除？");        // 显示确认框，返回布尔值
prompt("输入姓名", "默认");   // 显示输入框，返回字符串

// 定时器
setTimeout(fn, 1000);        // 延迟执行
setInterval(fn, 1000);       // 循环执行
clearTimeout(id);           // 取消延迟执行
clearInterval(id);          // 取消循环执行

实用示例

// 获取浏览器信息
console.log(navigator.userAgent);

// 获取屏幕信息
console.log(screen.width, screen.height);

// 获取URL信息
console.log(location.href);
console.log(location.hostname);

// 操作历史记录
history.back();             // 后退
history.forward();          // 前进

DOM

DOM（Document Object Model，文档对象模型）以树形结构表示HTML文档，每个HTML元素都是树中的一个节点。

获取元素

document.getElementById("id");                    // ID获取
document.getElementsByClassName("class");         // 类名获取
document.getElementsByTagName("div");             // 标签名获取
document.querySelector(".class");                 // CSS选择器（首个）
document.querySelectorAll("p");                   // CSS选择器（全部）

操作内容

// 修改HTML或文本内容
element.innerHTML = "<strong>加粗</strong>";
element.textContent = "纯文本";

// 修改属性
element.setAttribute("data-id", "123");
let value = element.getAttribute("data-id");

// 修改样式
element.style.color = "red";
element.style.fontSize = "16px";

创建与删除元素

// 创建元素
let p = document.createElement("p");
p.textContent = "新段落";

// 添加元素
document.body.appendChild(p);                    // 追加到末尾
parent.insertBefore(p, reference);              // 插入到指定位置

// 删除元素
p.parentNode.removeChild(p);

事件处理

// 绑定事件
element.addEventListener("click", function() {
  alert("点击了！");
});

// 移除事件
element.removeEventListener("click", handler);

// 常用事件类型
"click"           // 点击
"mouseover"      // 鼠标进入
"mouseout"       // 鼠标离开
"submit"         // 表单提交
"keydown"        // 键盘按下

综合示例

<!DOCTYPE html>
<html>
<head>
  <title>DOM操作示例</title>
  <style>.highlight { background-color: yellow; }</style>
</head>
<body>
  <h1 id="title">Hello</h1>
  <button id="btn">点击</button>
  <ul id="list">
    <li>项目1</li>
    <li>项目2</li>
  </ul>

  <script>
    const title = document.getElementById("title");
    const btn = document.getElementById("btn");
    const items = document.querySelectorAll("#list li");

    // 修改内容与样式
    title.innerHTML = "<strong>你好！</strong>";
    title.style.color = "blue";

    // 添加点击事件
    btn.addEventListener("click", () => alert("按钮点击了！"));

    // 动态创建元素
    const newP = document.createElement("p");
    newP.textContent = "新段落";
    document.body.appendChild(newP);

    // 列表项悬停效果
    items.forEach(item => {
      item.addEventListener("mouseover", () => item.classList.add("highlight"));
      item.addEventListener("mouseout", () => item.classList.remove("highlight"));
    });
  </script>
</body>
</html>

通过BOM和DOM，JavaScript能够与浏览器环境进行交互、控制浏览器行为、动态操作网页内容，从而实现丰富的用户交互体验。