HTML DOM getElementsByTagName() 方法

什么是 getElementsByTagName() 方法

getElementsByTagName() 方法是 DOM 中的一个常用方法，它可以根据标签名称获取文档中所有指定标签的元素，并将它们以一个 HTMLCollection 的形式返回。HTMLCollection 是一个类数组对象，它类似于数组，但并不是数组，它只包含元素节点（Element Node）。

如何使用 getElementsByTagName() 方法

要使用 getElementsByTagName() 方法，我们首先需要获取到需要操作的元素，可以通过 document 对象来获取整个文档，也可以通过其他元素的引用来获取其子元素。然后调用该元素的 getElementsByTagName() 方法并传入标签名称作为参数即可。

示例代码

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>getElementsByTagName() 方法示例</title>
</head>
<body>
    <div>
        <h1>这是一个标题</h1>
        <p>这是一个段落</p>
    </div>
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>
    </ul>

    <script>
        // 获取文档中所有的 <li> 元素
        var liElements = document.getElementsByTagName('li');
        
        // 遍历获取到的元素集合并输出文本内容
        for (var i = 0; i < liElements.length; i++) {
            console.log(liElements[i].textContent);
        }
    </script>
</body>
</html>

在上面的示例代码中，我们通过 document.getElementsByTagName('li') 获取到了文档中所有的 <li> 元素，并使用 for 循环遍历输出了每个 <li> 元素的文本内容。

注意事项

• getElementsByTagName() 方法返回的是一个 HTMLCollection 类数组对象，可以通过下标访问其中的元素。
• getElementsByTagName() 方法会获取到文档中所有指定标签的元素，包括嵌套在其他元素中的。
• 如果要获取到指定元素的子元素中的标签，可以先获取到父元素，再调用其 getElementsByTagName() 方法。

通过本文的介绍，相信大家对 HTML DOM 中的 getElementsByTagName() 方法有了更深入的了解。希望这篇文章对你有所帮助，能够在日常的前端开发工作中更加熟练地使用这个方法。