HTML DOM getElementsByTagName() 方法

在 web 前端开发中，操作 DOM（Document Object Model）是非常重要的一个技能。DOM 是将网页文档表示为一个树形结构的方式，通过操作 DOM，我们可以实现页面元素的动态添加、删除、修改等操作。在这篇文章中，我们将重点介绍 HTML DOM 中的 getElementsByTagName() 方法，该方法可以通过标签名称获取页面中的元素集合。

什么是 getElementsByTagName() 方法

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

如何使用 getElementsByTagName() 方法

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

示例代码

--------- -----
------
------
    ----------------------------- ------------
-------
------
    -----
        ---------------
        -------------
    ------
    ----
        -------------
        -------------
    -----

    --------
        -- -------- ---- --
        --- ---------- - ------------------------------------
        
        -- -----------------
        --- ---- - - -- - - ------------------ ---- -
            ---------------------------------------
        -
    ---------
-------
-------

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

注意事项

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

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