使用 Javascript 通过 DOM 操作 HTML 元素

您可能很熟悉，HTML 和 CSS 并非真正意义上的“编程”语言。HTML 是一种“标记”语言，用于创建和显示网页元素。CSS 是一种“样式表”语言，用于编写规则来规定上述元素的样式和外观。尽管 CSS 允许借助伪类进行一些伪编程，但它仍然不被视为编程语言。此外，CSS 在运行时操作元素的功能有限。

这就是 JavaScript 的用武之地。它最初是为 Web 浏览器开发的编程语言，使我们能够在运行时观察和操作 HTML 和 CSS 代码。Web 浏览器通过提供一个“宿主环境”来运行 JavaScript 命令，从而与 JavaScript 进行交互。这个宿主环境提供了某些对象和附加函数，使我们能够在运行时访问浏览器的附加功能和 HTML 页面的元素。

“窗口”对象

在浏览器的根目录下，我们有一个 window 对象。window 对象是 JavaScript 中的一个全局对象，它提供了控制浏览器窗口的方法。以下是一些示例，以便您更好地理解。

    console.log(window.innerHeight); // This returns the height of the 
    // content area of the browser window

    function doSomething() {
        // some action
    }

    window.doSomething(); // Since window is a global object, we can use 
    // it to call functions with global scope too

窗口对象进一步分为三个部分，即DOM、BOM和JavaScript 对象。在本文中，我们将进一步了解 DOM 的工作原理。

DOM（文档对象模型）

DOM 本质上是网页中所有可访问和操作对象的容器。将网页中的所有 HTML 元素视为嵌套对象的集合，而 DOM 就是这些对象的根对象。在代码中，使用关键字可以访问 DOM。document因此，我们可以<body>通过调用来访问 HTML 页面的标签document.body。

    document.body; // This is the object corresponding to the <body> tag

现在假设您希望访问页面中的其他元素，例如一个<p>元素。在此之前，我们需要先了解网页中的元素是如何映射到 DOM 中对应的对象的。我们以一个简单的页面为例

    <!DOCTYPE HTML>
    <html>
      <head>
        <title>This is the title</title>
      </head>
      <body>
        <p id="paragraph-1" class="class-1">This is a paragraph.</p>
        <ul>This is a list
          <li class="class-1">Item 1</li>
          <li>Item 2</li>
          <li class="class-1">Item 3</li>
        </ul>

      </body>
    </html>

DOM 将上述页面中的每个 HTML 元素视为一个节点。节点共有 12 种不同的类型。不过，我们目前只讨论其中的 4 种。

document：根节点，位于 DOM 的最顶部。
元素节点：页面中HMTL标签对应的节点。
文本节点：包含标签内部文本内容的节点。
注释：代码之间的注释。虽然它们在页面上不可见，但仍可以通过 DOM 访问。

在上面的代码中，<html>标签是一个元素节点。DOM 在组织节点时遵循树形结构。因此，<head>和<body>标签都是元素节点，被视为<html>标签的子节点。

在 Javascript 中选择这些标签的节点非常简单，因为有相同的内置函数

    document.documentElement; // Points to the node of the <html> tag
    document.head; // Points to the node of the <head> tag
    document.body; // Points to the node of the <body> tag

如果我们希望选择任何其他节点，例如标签<p>，DOM 为我们提供了额外的搜索方法

document.getElementById

此方法允许我们选择网页中包含特定 id 属性的元素。

    document.getElementById("paragraph-1"); // This points to the HTML 
    // element with id as paragraph-1

document.querySelector

此方法允许我们选择与给定 CSS 选择器匹配的第一个元素

    document.querySelector("li"); // This will return the node of the 
    // first <li> tag

document.querySelectorAll

此方法允许我们选择与给定 CSS 选择器匹配的所有元素

    document.querySelectorAll("li.class-1"); // This will return the     
    // collection of nodes of all <li> tags with the class class-1

document.getElementsByTagName

此方法允许我们选择特定标签的所有元素

    document.getElementsByTagName("li"); // This will return the 
    // collection of nodes of all <li> tags

document.getElementsByClassName

此方法允许我们选择具有给定类的所有元素

    document.getElementsByClassName("class-1"); // This will return the 
    // collection of nodes of all elements with the class class-1

操作元素

现在我们已经了解了一些在 DOM 中选择元素的基本方法，让我们再看几个如何修改这些元素的示例。假设我们有一个这样的页面

    <!DOCTYPE HTML>
    <html>
      <head>
        <title>This is the title</title>
      </head>
      <body>
        <p id="paragraph-1">This is a paragraph.</p>

    </body>
    </html>

更改元素的内容

假设我们想更改第一段的文本，可以使用 innerHTML 属性来实现，如下所示

    document.getElementById("paragraph-1").innerHTML = "This is an edited 
    // paragraph."

您还可以在 innerHTML 的值中添加其他标签，浏览器会将它们渲染为 HTML 文本。例如，如果您希望更改段落文本并将其加粗，我们可以这样做

    document.getElementById("paragraph-1").innerHTML = "<b>This is an 
    // edited paragraph.</b>"

更改元素的样式

为了改变元素的样式，我们使用 style 属性。例如，为了给段落设置一个简单的边框，我们可以这样写

    document.getElementById("paragraph-1").style.border = "1px solid red";

在本文中，我们对 DOM 的工作原理以及如何使用它来操作 HTML 元素有了基本的了解。在接下来的几周里，我将发布更多深入探讨 JavaScript 工作原理的文章。祝您编程愉快！

这篇文章最初发表在 Medium上。

鏂囩珷鏉ユ簮锛�https://dev.to/kabir4691/using-javascript-to-manipulate-html-elements-via-the-dom-31bm