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

＆白帝＆

于 2024-08-23 08:48:30 发布

阅读量485

点赞数 12

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_48763502/article/details/141430190

版权

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 的一些核心组件及其功能：