文档对象模型（DOM）

（图片来源于网络）

HTML DOM是HTML文档对象模型或简称。HTML DOM 是一种 W3C（万维网联盟）标准，它将 HTML 元素定义为对象。可以将每个HTML元素（即<h1>，<p>，<a>等视为包含以下内容的对象：

方法（可以对 HTML 元素执行的操作）
属性（可以设置或更改的 HTML 值）
事件（HTML 元素可能发生的事情）

因此，HTML DOM 定义了：

用于访问 HTML 文档的标准
所有 HTML 元素的属性、方法和事件

HTML DOM提供了一个标准，以便可以：

更改现有 HTML 元素和属性
添加和删除 HTML 元素和属性
更改 HTML 元素的样式
响应或添加 HTML 事件

DOM 文档对象

文档对象位于 HTML DOM 的顶部，是页面上加载的所有其他对象的父对象。如果我们需要访问页面上的任何其他元素，现在，从 Document 对象开始。

当查看如何在触发按钮的 onclick 事件（即单击按钮）时运行一些 JavaScript。

在下面的部分中，将研究以下方法：

getElementById

还将查看以下三个属性：

innerHTML
style
attribute

getElementById 方法

文档对象有一个名为 getElementById 的特殊方法，其用法如下：

document.getElementById(id)

一个实际的例子：

<!DOCTYPE html>
<html>
<body>
    <button onclick="getById()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>
    <script>
        function getById() {
            document.getElementById("test");           
        }
    </script>
</body>
</html>

在上面的示例中，当按钮 onclick 事件发生时调用 getById 函数，然后：

我们使用 getElementById 方法通过 id 测试获取元素，在本例中是段落

然后会发生什么？嗯，没什么...我们没有对该元素做任何事情。

innerHTML 属性

之前的部分如何通过元素的 id 获取元素。现在让我们用它做点什么。

<!DOCTYPE html>
<html>
<body>
    <button onclick="changeHTML()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>
    <script>
        function changeHTML() {
            document.getElementById("test").innerHTML = "We are learning JavaScript!";
        }
    </script>
</body>
</html>

在上面的示例中，当按钮 onclick 事件发生时，将调用 changeHTML 函数，然后：

我们使用 getElementById 方法通过 id 测试获取元素，在本例中是段落
我们通过为其内部HTML属性赋值“We are learning JavaScript!”来更改段落的内容。

style 属性

当通过 id 获取元素时可以更改的另一个属性。请看下面的代码：

<!DOCTYPE html>
<html>
  <body>
    <button onclick="changeColour()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>   
    <script>
      function changeColour() {
        document.getElementById("test").style.color = "blue";
      }
    </script>
  </body>
</html>

在上面的示例中，当按钮单击事件发生时，将调用 changeColor 函数，然后：

使用 getElementById 方法通过 id 测试获取元素，在本例中是段落
通过为其 style.color 属性分配值“blue”来更改段落中文本的颜色

以下又是一个示例代码：

<html>
  <body>
    <button onclick="changeColour()">Push me</button>
    <p id="test">Lets learn some JavaScript!</p>   
    <script>
      function changeColour() {
        document.getElementById("test").style.fontSize = "40px";
      }
    </script>
  </body>
</html>

这其中包含了一个按钮和一个段落。当点击按钮时，会调用一个名为 changeColour() 的 JavaScript 函数。这个函数通过 document.getElementById("test") 来获取一个带有 id="test" 的元素，然后使用 style.fontSize 属性将该元素的字体大小设置为 “40px”。也就是说，点击按钮后，段落中的文字将以 40 像素的大小呈现。

attribute 属性

如何更改 HTML 属性的值？在本例中为图像的 src 属性。

<!DOCTYPE html>
<html>
  <body>
    <button onclick="changeImage()">Push me</button>
    <img id="someImage" src="smile.png">  
    <script>
      function changeImage() {
        document.getElementById("someImage").src = "frown.png";
      }
    </script>
  </body>
</html>

这其中包含了一个按钮和一个图片。当点击按钮时，会调用一个名为 changeImage() 的 JavaScript 函数。这个函数通过 document.getElementById("someImage") 来获取一个带有 id="someImage" 的元素，然后使用 src 属性将该元素的图片地址更改为 “frown.png”。也就是说，点击按钮后，图片将从 “smile.png” 更改为 “frown.png”。

createElement 方法

<!DOCTYPE html>
<html>
<body>
  <button onclick="create()">Push me</button>
  <script>
    function create() {
      let paragraph = document.createElement("p");   
      paragraph.innerHTML = "This is a paragraph.";   
    }
  </script>
</body>
</html>

在上述代码中：

创建一个 HTML 元素并将其分配给一个变量
以及设置元素的内部 HTML

然后会发生什么？嗯，没什么...我们尚未将该元素添加到文档中。

appendChild 方法

仅仅创建一个新元素是不够的。还需要将其添加到文档中。

<!DOCTYPE html>
<html>
<body>
  <button onclick="create()">Push me</button>
  <script>
    function create() {
      let paragraph = document.createElement("p");
      paragraph.innerHTML = "This is a paragraph.";
      document.body.appendChild(para);
    }
  </script>
</body>
</html>

上述代码中，创建元素并将字符串分配给元素innerHTML后，使用appendChild方法将元素添加到文档中。

remove 方法

<!DOCTYPE html>
<html>
<body>
  <button onclick="remove()">Push me</button>
  <p id="someText">This is a paragraph.</p>
  <script>
    function remove() {
      let paragraph = document.getElementById("someText")
      paragraph.remove();
    }
  </script>
</body>
</html>

以上代码中包含一个按钮和一个段落。当点击按钮时，会调用一个名为 remove() 的 JavaScript 函数。这个函数通过 document.getElementById("someText") 来获取一个带有 id="someText" 的元素，然后使用 remove() 方法将该元素从文档中完全移除。也就是说，点击按钮后，这个段落将会从页面上删除。