JavaScript getElementByTagName的使用

getElementByTagName是JavaScript中获取网页元素标签名的方法，它可以选取指定标签名的所有元素对象并以数组的形式返回。

语法

document.getElementsByTagName(tagname);

参数说明：

tagname：要查找的元素标签名。可以是字符串，也可以是通配符*，表示选取网页上所有的元素标签。

返回值

getElementsByTagName方法返回一个HTMLCollection对象，包含了指定标签名的所有元素对象。HTMLCollection对象类似于数组，可以通过编号（从0开始）来访问其中的元素对象。如果没有找到任何元素对象，则返回一个空的HTMLCollection对象。

示例说明

以下是两个使用getElementsByTagName方法的示例。

示例1：选取所有的段落元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取页面元素对象</title>
    <script>
        window.onload = function() {
            var p = document.getElementsByTagName("p");
            console.log(p); // 输出选取的元素对象数组
        }
    </script>
</head>
<body>
    <p>这是一个段落</p>
    <p>这是另外一个段落</p>
    <div>
        <p>这是嵌套的段落</p>
    </div>
</body>
</html>

这个示例代码会选取页面上所有的<p>标签，包括嵌套在<div>标签中的元素。选取的结果会作为一个数组对象存储在变量p中，并通过控制台打印输出。

示例2：选取所有的图片元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取页面元素对象</title>
    <script>
        window.onload = function() {
            var images = document.getElementsByTagName("img");
            for (var i = 0; i < images.length; i++) {
                console.log(images[i].src); // 输出每个图片元素的src属性
            }
        }
    </script>
</head>
<body>
    <img src="http://example.com/image1.jpg">
    <img src="http://example.com/image2.jpg">
    <img src="http://example.com/image3.jpg">
</body>
</html>

这个示例代码会选取页面上所有的<img>标签，并遍历数组中每个图片元素，输出每个图片元素的src属性值。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript getElementByTagName的使用 - Python技术站