js学习笔记72——DOM简介

最新推荐文章于 2025-11-04 19:06:29 发布

原创最新推荐文章于 2025-11-04 19:06:29 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

小白学习js 专栏收录该内容

83 篇文章

订阅专栏

本文介绍了 JavaScript 中的 DOM (文档对象模型)基本概念，并通过一个简单的 HTML 页面实例演示了如何使用 JS 获取元素、修改内容等操作。

js学习笔记72——DOM简介

例子

DOM是文档对象模型。js中通过DOM来对html文档进行操作。
文档：整个的HTML网页文档
对象：将网页中的每一个部分都转换为了一个对象。
模型：表示对象之间的关系，这样方便我们获取对象。
在这里插入图片描述
如果想从a找到title，则可以根据这个模型找，先找到它们的共同祖先，然后找title。

节点：构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为节点。
在这里插入图片描述

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">我是一个按钮</button>
</body>
</html>

在这里插入图片描述
如何通过js来操作这个按钮？
先找到文档节点

浏览器已经为我们提供文档节点对象，这个对象是window对象的属性。可以在页面中直接使用，文档节点代表的是整个网页。

    <script>
        console.log(document);
    </script>

在这里插入图片描述
通过id获取button对象

    <script>
        bt = document.getElementById("btn");
        console.log(bt);
    </script>

在这里插入图片描述
此时的bt和btn是同一个。

修改文字

    <script>
        bt = document.getElementById("btn");
        bt.innerHTML = "我在修改按钮文字"
    </script>

在这里插入图片描述