什么？期望月薪 18k，你居然讲不清楚 DOM？

最新推荐文章于 2024-07-22 15:19:55 发布

前端小目标

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量504

点赞数 11

分类专栏： # JavaScript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_30094821/article/details/137248580

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

你知道怎么使用 JavaScript 操作页面的各个部分，实现动态内容的添加、删除和修改么？

今天一起来学习一个新知识 - DOM。

1. 基础知识

什么是 DOM

DOM 是文档对象模型（Document Object Model）的缩写，它是一个跨平台和语言独立的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。

DOM 将文档表现为一个树状结构，每个元素、属性和文本都是一个节点，这些节点以父子关系相互连接。

为何要使用 DOM

DOM 让我们能够通过 JavaScript 来动态地读取、修改、添加或删除网页的内容和结构。

这意味着，我们可以根据用户的操作或其他事件来更新页面，无需重新加载整个页面，从而提供更流畅和互动的用户体验。

如何使用 DOM

获取元素: 你可以使用这些方法来获取页面中的元素。

getElementById
getElementsByClassName
getElementsByTagName
querySelector
querySelectorAll

创建和插入元素: createElement 可以创建新的元素节点，appendChild 和 insertBefore 可以将节点插入到 DOM 树中。

修改元素: 可以通过 innerHTML 和 textContent 属性来修改元素的内容，通过设置节点的属性来改变元素的样式或行为。

事件监听: addEventListener 方法允许我们绑定事件监听器到特定节点，当事件发生时执行对应的函数。

注意

性能考虑: 频繁的 DOM 操作可能会导致性能问题，因此应该尽量减少 DOM 的访问和修改，比如通过批量更新或使用文档片段（DocumentFragment）。
浏览器兼容性: 不同的浏览器可能会有 DOM 实现上的差异，开发时应注意兼容性问题。

2. 示例演示

下面是一个简单的 HTML 示例，它演示了如何使用 DOM 来动态添加一个新的列表项到页面上。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>DOM 示例演示</title>
</head>
<body>
    <h1>我的待办事项</h1>
    <ul id="todo-list">
        <li>学习 JavaScript</li>
        <li>阅读一本书</li>
    </ul>
    <button id="add-item">添加新事项</button>

    <script>
        // 获取按钮和待办事项列表的引用
        var addButton = document.getElementById('add-item');
        var todoList = document.getElementById('todo-list');

        // 为按钮添加点击事件处理器
        addButton.addEventListener('click', function() {
            // 创建一个新的列表项
            var newItem = document.createElement('li');
            newItem.textContent = '完成 DOM 文章';

            // 将新的列表项添加到待办事项列表
            todoList.appendChild(newItem);
        });
</script>
</body>
</html>

在这个示例中，首先通过 getElementById 获取了待办事项列表和按钮的引用。

然后，给按钮添加了一个点击事件处理器，当按钮被点击时，创建一个新的 <li> 元素，并设置其文本内容。

最后，我们将这个新元素添加到待办事项列表的末尾。