语法
getElementsByTagName()
方法的语法如下:
document.getElementsByTagName(tagName)
其中,tagName
是要获取的元素的标签名称,可以是任何有效的 HTML 标签,比如div
、p
、a
等。
返回值
getElementsByTagName()
方法返回一个类数组对象,包含了所有指定标签名称的元素。如果没有找到匹配的元素,返回一个空的类数组对象。
示例
下面是一个简单的示例,演示了如何使用getElementsByTagName()
方法获取页面中的所有<p>
元素,并改变它们的文本颜色为红色:
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------------- ---------- ------- ------ ------------ ------------ ------------ -------- --- ---------- - ----------------------------------- --- ---- - - -- - - ------------------ ---- - ------------------------- - ------ - --------- ------- -------
在这个示例中,我们首先使用getElementsByTagName('p')
方法获取了页面中所有的<p>
元素,并将其保存在paragraphs
变量中。然后,我们遍历这个类数组对象,将每个段萼的文本颜色改为红色。
注意事项
getElementsByTagName()
方法返回的是一个动态的类数组对象,即使在调用方法后页面中新添加了符合条件的元素,它也会包含这些新元素。- 由于
getElementsByTagName()
方法返回的是类数组对象,如果需要对返回的元素集合进行数组操作,可以将其转换为真正的数组,比如使用Array.from()
方法或Array.prototype.slice.call()
方法。
通过本文的介绍,相信您已经了解了getElementsByTagName()
方法的用法及示例。在实际开发中,结合其他 DOM 操作方法,您可以实现更加丰富和复杂的页面交互效果。祝您在 Web 前端开发的道路上越走越远!