HTML DOM 方法

在web前端开发中，HTML DOM（文档对象模型）是用来操作HTML文档的一种标准方法。通过使用HTML DOM方法，开发者可以轻松地访问、修改、添加和删除HTML元素。

getElementById()

getElementById() 方法用于根据元素的 id 属性获取指定的元素。例如，如果我们有一个id为“myElement”的元素，我们可以使用以下代码获取该元素：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>getElementById()方法示例</title>
</head>
<body>
    <div id="myElement">这是一个示例元素</div>

    <script>
        var element = document.getElementById("myElement");
        console.log(element);
    </script>
</body>
</html>

在上面的示例中，我们首先在HTML中定义了一个id为“myElement”的div元素，然后使用getElementById()方法获取该元素并将其存储在变量element中。最后，我们通过console.log()方法将该元素输出到控制台。

getElementsByTagName()

getElementsByTagName() 方法用于根据元素的标签名获取一组元素。例如，如果我们想获取所有的<p>元素，可以使用以下代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>getElementsByTagName()方法示例</title>
</head>
<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>

    <script>
        var paragraphs = document.getElementsByTagName("p");
        console.log(paragraphs);
    </script>
</body>
</html>

在上面的示例中，我们使用getElementsByTagName()方法获取所有的<p>元素，并将它们存储在变量paragraphs中。最后，我们通过console.log()方法将这些元素输出到控制台。

querySelector()

querySelector() 方法用于根据CSS选择器获取匹配的第一个元素。例如，如果我们想获取id为“myElement”的元素，可以使用以下代码：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>querySelector()方法示例</title>
</head>
<body>
    <div id="myElement">这是一个示例元素</div>

    <script>
        var element = document.querySelector("#myElement");
        console.log(element);
    </script>
</body>
</html>

在上面的示例中，我们使用querySelector()方法根据CSS选择器#myElement获取id为“myElement”的元素，并将其存储在变量element中。最后，我们通过console.log()方法将该元素输出到控制台。