HTML DOM - 元素

在 HTML 文档中，每一个标签都是一个元素（element），元素可以包含文本、属性和其他元素。在 HTML DOM 中，每一个元素都是一个对象，我们可以通过 JavaScript 来操作这些元素对象。

获取元素

要操作一个元素，首先需要获取到这个元素。我们可以使用 document.getElementById() 方法来获取具有特定 id 的元素，也可以使用 document.getElementsByClassName() 方法来获取具有特定类名的元素，还可以使用 document.getElementsByTagName() 方法来获取具有特定标签名的元素。

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>获取元素示例</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>
    <p class="myClass">这是一个段落元素</p>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>

    <script>
        var divElement = document.getElementById("myDiv");
        var pElements = document.getElementsByClassName("myClass");
        var liElements = document.getElementsByTagName("li");

        console.log(divElement);
        console.log(pElements);
        console.log(liElements);
    </script>
</body>
</html>

操作元素

一旦获取到了元素，我们就可以对其进行操作。可以修改元素的文本内容、样式、属性等。常见的操作方法包括：

• innerHTML：获取或设置元素的 HTML 内容
• style：设置元素的样式
• setAttribute()：设置元素的属性
• appendChild()：向元素添加子元素
• removeChild()：移除元素的子元素

示例代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>操作元素示例</title>
</head>
<body>
    <div id="myDiv">这是一个div元素</div>

    <script>
        var divElement = document.getElementById("myDiv");
        divElement.innerHTML = "这是修改后的内容";
        divElement.style.color = "red";
        divElement.setAttribute("class", "newClass");

        var newElement = document.createElement("p");
        var textNode = document.createTextNode("这是一个新的段落元素");
        newElement.appendChild(textNode);
        divElement.appendChild(newElement);

        divElement.removeChild(newElement);
    </script>
</body>
</html>

通过以上示例，我们可以看到如何获取元素并对其进行操作。在实际开发中，我们常常需要通过 JavaScript 动态地修改页面中的元素，使页面具有更好的交互性和用户体验。