BOM

当谈到JavaScript的BOM（浏览器对象模型）时，它是一组与浏览器窗口进行交互的对象和方法的集合。BOM提供了许多功能，用于控制浏览器窗口、获取浏览器信息、处理浏览器历史记录、显示对话框等。

BOM的主要组成部分包括以下对象：

window对象：
window对象是BOM的顶级对象，它表示浏览器窗口。在浏览器环境中，全局作用域中的所有变量和函数都属于window对象的属性和方法。
navigator对象：
navigator对象包含有关浏览器的信息，如用户代理字符串、浏览器名称、版本等。
screen对象：
screen对象提供了有关用户屏幕的信息，如屏幕宽度、高度、颜色深度等。
location对象：
location对象用于获取或设置当前窗口的URL信息，包括主机名、路径、查询参数等。
history对象：
history对象允许你操作浏览器的历史记录，如前进、后退、跳转到特定页面等。
alert()、confirm()和prompt()方法：
这些方法用于在浏览器中显示对话框，用于向用户显示信息、确认某些操作或获取用户输入。
setTimeout()和setInterval()方法：
这些方法允许你在一定时间后执行函数或按照一定时间间隔重复执行函数。

示例：

// 使用window对象的alert方法显示对话框
window.alert("Hello, World!");

// 使用navigator对象获取浏览器信息
console.log(navigator.userAgent); // 输出用户代理字符串

// 使用screen对象获取屏幕信息
console.log(screen.width); // 输出屏幕宽度
console.log(screen.height); // 输出屏幕高度

// 使用location对象获取URL信息
console.log(location.href); // 输出当前页面的URL
console.log(location.hostname); // 输出主机名

// 使用history对象操作历史记录
history.back(); // 后退到上一页
history.forward(); // 前进到下一页

BOM提供了与浏览器交互的接口，使得JavaScript可以与浏览器环境进行沟通，控制浏览器行为和获取有关浏览器和窗口的信息。

以下是一些常见的BOM对象和方法：

window对象：代表浏览器窗口，是BOM的顶级对象，包含全局作用域中的所有变量和函数。
navigator对象：提供浏览器信息，如用户代理字符串、浏览器名称、版本等。
screen对象：提供有关用户屏幕的信息，如屏幕宽度、高度、颜色深度等。
location对象：用于获取或设置当前窗口的URL信息，包括主机名、路径、查询参数等。
history对象：允许你操作浏览器的历史记录，如前进、后退、跳转到特定页面等。
alert(message)：显示带有一条消息和一个确定按钮的对话框。
confirm(message)：显示带有一条消息和确定、取消按钮的对话框，并返回用户的选择（true或false）。
prompt(message, defaultText)：显示带有一条消息、文本输入框和确定、取消按钮的对话框，并返回用户输入的文本。
setTimeout(function, delay)：在指定的延迟后执行一次函数。
setInterval(function, interval)：每隔指定的时间间隔重复执行函数。
clearTimeout(timeoutID)：取消通过setTimeout()创建的定时器。
clearInterval(intervalID)：取消通过setInterval()创建的定时器。

这些是常用的BOM对象和方法，它们允许JavaScript与浏览器环境进行交互，控制浏览器的行为，获取浏览器和窗口的信息，以及与用户进行交互。

DOM

DOM以树形结构表示HTML文档，每个HTML元素都是DOM中的一个节点，包括元素、文本、注释等。DOM操作允许你找到特定的元素、修改元素的内容、属性和样式，添加或删除元素等。

获取元素：
- document.getElementById(id)：根据给定的元素ID获取单个元素。
- document.getElementsByClassName(className)：根据给定的类名获取元素集合（类数组）。
- document.getElementsByTagName(tagName)：根据给定的标签名获取元素集合（类数组）。
- document.querySelector(selector)：根据CSS选择器获取第一个匹配的元素。
- document.querySelectorAll(selector)：根据CSS选择器获取所有匹配的元素集合（类数组）。
修改元素内容：
- 使用element.innerHTML：可以设置或获取元素的HTML内容。例如：element.innerHTML = "<strong>Hello</strong>";。
- 使用element.textContent：可以设置或获取元素的文本内容。例如：element.textContent = "Hello";。
修改元素属性：
- 使用element.getAttribute(attributeName)：获取元素指定属性的值。例如：let value = element.getAttribute("data-id");。
- 使用element.setAttribute(attributeName, value)：设置元素指定属性的值。例如：element.setAttribute("data-id", "123");。
修改元素样式：
- 使用element.style.property：设置元素的CSS样式。例如：element.style.color = "red";。
创建和添加元素：
- 使用document.createElement(tagName)：创建新的HTML元素节点。
- 使用element.appendChild(newElement)：将新元素添加为指定元素的最后一个子节点。
- 使用element.insertBefore(newElement, referenceElement)：将新元素插入到指定元素的指定位置，作为其兄弟节点。
删除元素：
- 使用element.parentNode.removeChild(element)：从DOM中删除指定元素。
事件处理：
- 使用element.addEventListener(eventName, eventHandler)：添加事件监听器，以响应特定事件。例如：btnElement.addEventListener("click", function() { alert("按钮被点击了！"); });。
- 使用element.removeEventListener(eventName, eventHandler)：从元素中删除事件监听器。

示例（更多详细代码）：

<!DOCTYPE html>
<html>
<head>
  <title>详细的DOM操作示例</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1 id="heading">Hello, World!</h1>
  <button id="btn">点击我</button>
  <ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <script>
    // 获取元素
    let headingElement = document.getElementById("heading");
    let btnElement = document.getElementById("btn");
    let listItems = document.querySelectorAll("#list li");

    // 修改元素内容
    headingElement.innerHTML = "<strong>你好，世界！</strong>";

    // 修改元素属性
    btnElement.setAttribute("data-id", "123");

    // 修改元素样式
    headingElement.style.color = "blue";

    // 创建和添加元素
    let newParagraph = document.createElement("p");
    newParagraph.textContent = "这是新段落";
    document.body.appendChild(newParagraph);

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

    // 添加事件处理
    btnElement.addEventListener("click", function() {
      alert("按钮被点击了！");
    });

    // 修改元素样式并添加事件处理
    for (let i = 0; i < listItems.length; i++) {
      listItems[i].addEventListener("mouseover", function() {
        this.classList.add("highlight");
      });

      listItems[i].addEventListener("mouseout", function() {
        this.classList.remove("highlight");
      });
    }
  </script>
</body>
</html>

这个示例演示了如何使用DOM操作来获取元素、修改元素内容和样式、创建新元素、添加事件处理等。DOM操作使得网页可以动态地与用户交互，响应用户的操作和改变页面的显示。

希望这个更详细的示例能帮助你更好地理解和使用JavaScript的DOM操作！如果你有其他问题，请随时提问。

文大师的藏经阁

JavaScript的BOM和DOM

BOM

DOM