浏览器对象模型 BOM和文档对象模型DOM

DOM（文档对象模型，Document Object Model）是一个平台和语言无关的接口，它提供了一种结构化的方法来表示和操作 HTML 和 XML 文档。通过 DOM，文档被表示为一个树状结构，文档的每个部分都可以作为一个对象进行访问和操作。

一 DOM 的基本概念

节点（Node）:

DOM 树由各种节点组成，每个节点代表文档的一个部分。主要的节点类型包括：

• 元素节点（Element Node）: 代表文档中的元素（如 <div>、<p>）。
• 文本节点（Text Node）: 代表元素中的文本内容。
• 属性节点（Attribute Node）: 代表元素的属性（如 id=“example”）。
• 文档节点（Document Node）: 代表整个文档。

节点树（Node Tree）:

• DOM 文档结构呈现为一棵树，其中根节点是文档节点。元素节点作为树的分支，而文本节点则作为树的叶子。

访问和操作 DOM:

• JavaScript 可以用于访问和操作 DOM 节点，实现动态修改网页内容、结构和样式。

1 DOM 操作示例

• 访问元素节点:

// 获取元素节点
var element = document.getElementById("myElement");

// 获取多个元素节点
var elements = document.getElementsByClassName("myClass");

• 修改元素内容:

// 修改元素的文本内容
var element = document.getElementById("myElement");
element.textContent = "新的文本内容";

// 修改元素的 HTML 内容
element.innerHTML = "<strong>新的 HTML 内容</strong>";

• 修改元素属性:

// 修改元素的属性
var element = document.getElementById("myElement");
element.setAttribute("class", "newClass");

// 获取元素的属性
var className = element.getAttribute("class");

• 添加和删除元素:

// 创建新元素
var newElement = document.createElement("div");
newElement.textContent = "这是一个新创建的元素";

// 将新元素添加到 DOM 中
document.body.appendChild(newElement);

// 删除元素
var elementToRemove = document.getElementById("removeMe");
elementToRemove.parentNode.removeChild(elementToRemove);

• 修改样式:

// 修改元素的 CSS 样式
var element = document.getElementById("myElement");
element.style.color = "blue";
element.style.fontSize = "20px";

• 事件处理:

// 为元素添加事件监听器
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("按钮被点击了！");
});

// 也可以使用传统的方式
button.onclick = function() {
  alert("按钮被点击了！");
};

2 常用 DOM 方法和属性

• document.getElementById(id): 根据 ID 获取单个元素。

• document.getElementsByClassName(className): 根据类名获取多个元素。

• document.getElementsByTagName(tagName): 根据标签名获取多个元素。

• document.querySelector(selector): 根据 CSS 选择器获取单个元素。

• document.querySelectorAll(selector): 根据 CSS 选择器获取多个元素。

• element.appendChild(node): 将一个节点添加到指定元素的子节点列表中。

 <ul id="myList">
        <li>1</li>
        <li>2</li>
    </ul>
    <button onclick="addItem()">添加新项目</button>

    <script>
        function addItem() {
            var ul = document.getElementById("myList");
            var li = document.createElement("li");
            li.textContent = "新项目";
            ul.appendChild(li);
        }
    </script>

• element.removeChild(node): 从指定元素中删除一个子节点。

<ul id="myList">
        <li>项目 1</li>
        <li>项目 2</li>
        <li id="removeMe">项目 3</li>
    </ul>
    <button onclick="removeItem()">删除项目 3</button>

    <script>
        function removeItem() {
            var item = document.getElementById("removeMe");
            item.parentNode.removeChild(item);
        }
    </script>

• element.classList.add(className): 向元素添加一个或多个类名。
• element.classList.remove(className): 从元素中移除一个或多个类名。
• setAttribute 和 getAttribute： 设置或获取元素的属性值。

 <input type="text" id="myInput" placeholder="输入一些文本">
    <button onclick="setPlaceholder()">设置占位符</button>
    <button onclick="showPlaceholder()">显示占位符</button>

    <script>
        function setPlaceholder() {
            var input = document.getElementById("myInput");
            input.setAttribute("placeholder", "新的占位符文本");
        }

        function showPlaceholder() {
            var input = document.getElementById("myInput");
            alert("当前占位符: " + input.getAttribute("placeholder"));
        }
    </script>

DOM 使得网页能够动态变化，提升了网页的交互性和用户体验。通过 JavaScript 操作 DOM，开发者可以在页面加载后动态地修改内容、响应用户操作和实现复杂的交互效果。

二 浏览器对象模型 BOM

浏览器对象模型（BOM，Browser Object Model）是 Web 浏览器提供的一组 JavaScript 对象和方法，用于与浏览器进行交互。BOM 使得 JavaScript 可以访问浏览器的功能，除了 Web 页面的内容和结构之外，还可以控制浏览器窗口、历史记录、导航、用户代理信息等。下面是 BOM 的一些核心组件及其功能：

1. window 对象

window 对象是 BOM 的核心，表示浏览器窗口。所有其他 BOM 对象都是 window 对象的属性。

常用属性和方法：

• window.alert(message)：显示一个警告框。
• window.confirm(message)：显示一个确认框，返回用户的选择（true 或 false）。
• window.prompt(message, default)：显示一个提示框，允许用户输入文本。
• window.location：表示当前文档的 URL 和浏览器的地址栏。可以用来获取和设置 URL。
• window.history：访问浏览器的历史记录。
• window.navigator：提供有关浏览器和操作系统的信息。
• window.localStorage 和 window.sessionStorage：用于存储数据在本地存储和会话存储中。

2. location 对象

location 对象用于处理当前文档的 URL。

常用属性和方法：

• location.href：获取或设置当前 URL。
• location.protocol：获取当前 URL 的协议（如 http: 或 https:）。
• location.host：获取当前 URL 的主机（包括端口号）。
• location.pathname：获取当前 URL 的路径。
• location.search：获取当前 URL 的查询字符串。
• location.hash：获取当前 URL 的锚点。
• location.assign(url)：加载新的 URL。
• location.reload()：重新加载当前页面。
• location.replace(url)：加载新的 URL，并替换当前页面，不会在历史记录中留下记录。

3 history 对象

history 对象提供对浏览器历史记录的访问。

常用方法：

• history.back()：返回到历史记录中的前一个页面。
• history.forward()：前进到历史记录中的下一个页面。
• history.go(n)：前进或后退到历史记录中的第 n 个页面。
• history.length：返回历史记录的数量。

4 navigator 对象

navigator 对象提供有关浏览器的信息，如用户代理字符串和浏览器的功能支持情况。

常用属性：

• navigator.userAgent：返回一个字符串，表示浏览器的用户代理（即浏览器的名称、版本号等信息）。
• navigator.platform：返回操作系统平台的字符串。
• navigator.language：返回浏览器的语言设置。
• navigator.cookieEnabled：指示浏览器是否启用 Cookies。

5 screen 对象

screen 对象提供有关用户屏幕的信息。

常用属性：

• screen.width：屏幕的宽度（以像素为单位）。
• screen.height：屏幕的高度（以像素为单位）。
• screen.availWidth：可用的屏幕宽度（不包括任务栏等）。
• screen.availHeight：可用的屏幕高度（不包括任务栏等）。

总结
BOM 允许 JavaScript 脚本与浏览器的各个方面进行交互，从而使开发者能够构建更加动态和互动的网页。掌握 BOM 的使用方法对于前端开发者来说是非常重要的。