Logo

# JavaScript教程 - 15 DOM

前面主要讲解 JavaScript 的语法基础，现在开始将 JavaScript 在网页中的应用，如何使用 JavaScript 操作网页，更好的实现与人的交互。

# 15.1 DOM简介

首先需要介绍一个概念 DOM ，什么是 DOM？

DOM（Document Object Model文档对象模型），也就是将网页中的所有元素（元素、属性、文本、注释等）转换为对象，这样就可以通过 JavaScript 来操作了。

  • D（Document）：网页文档；
  • O（Object）：文档中的每个部分都是一个对象；
  • M（Model）：就是指这些对象之间的结构关系和组织形式。

每一个 HTML 标签、文本、注释等，都会变成 DOM 树中的一个 节点 ：

举个栗子：

<body>
  <h1>Hello</h1>
  <p>Welcome!</p>
</body>

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello</h1>
    <p>Welcome!</p>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

这段 HTML 会变成一棵树形结构，也就是 DOM 树，每个元素，就是树上的一个节点。

Document  （整个网页 = DOM 根对象）
 └── html（元素节点）
      └── body（元素节点）
           ├── h1（元素节点）
           │   └── "Hello"（文本节点）
           └── p（元素节点）
               └── "Welcome!"（文本节点）
1
2
3
4
5
6
7

JavaScript 就可以操作这些节点：添加、删除、修改、查找等，从而实现对网页的操作。

# 15.2 操作DOM

现在就来操作DOM，从而实现对网页的操作。

浏览器为我们提供了全局的 document 对象，它表示整个网页，我们之前就通过 document.write() 方法向网页中输出数据。

下面通过 document 对象来获取网页中的元素对象，这样就可以操作对象，从而实现对网页的操作。

举个栗子，编写网页如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>For技术栈</title>
  </head>
  <body>

    <button id="my-button">点我</button>

    <script>
      let myButton = document.getElementById('my-button');  // 根据id获取元素
      console.log(myButton.id);  // 打印元素的id：my-button
      myButton.innerText = '大官人点我';  // 修改 button 中的文字
    </script>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  • 在 <body> 中定义了一个按钮，添加了一个 id；
  • 然后在 <script> 标签中编写代码，可以使用 document.getElementById(id) 方法，通过 id 来获取指定的元素；获取元素后，就可以使用对象的形式来操作元素了。
  • 需要注意，上面的 <script> 标签一定要写在后面，这个后面再讲。

上面的网页运行后，按钮的内容就变成了 大官人点我 。

所以后面对网页的操作就是先获取到元素对象，然后通过对象对网页进行操作。

其实还有一个全局对象 window 对象，表示整个浏览器窗口，document 对象其实是 window 对象的属性，还可以通过 window.document 来调用 document 对象。

# 15.3 document对象

document 对象表示的是整个网页，下面简单介绍一下 document 对象。

内容未完......
查看完整内容 →

← 15-DOM-2 →