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