getElementsByTagName（）获取某些元素

最新推荐文章于 2022-04-21 11:32:53 发布

_XinXinM_

最新推荐文章于 2022-04-21 11:32:53 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/binbinhxx/article/details/111875530

版权

使用getElementsByTagName（）方法可以返回带有指定标签名的对象集合

doucument.getElementsByTagName(“标签名”)；
注意：
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
2.得到元素对象是动态的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>你可以成为任何你想成为的人</li>
        <li>但凡辛苦都是礼物</li>
        <li>你继续差吧我不会理你的</li>
        <li>听闻少年二字应与平庸相斥</li>
        <li>努力是会上瘾的特别是尝到了甜味之后</li>
        <li>兵分两路 顶端相见</li>
    </ul>
    <script>
        // 返回的是获取过来元素对象的集合以伪数组的形式存储的
        var lis =document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>你可以成为任何你想成为的人</li>
        <li>但凡辛苦都是礼物</li>
        <li>你继续差吧我不会理你的</li>
        <li>听闻少年二字应与平庸相斥</li>
        <li>努力是会上瘾的特别是尝到了甜味之后</li>
        <li>兵分两路 顶端相见</li>
    </ul>
    <script>
        // 返回的是获取过来元素对象的集合以伪数组的形式存储的
        var lis =document.getElementsByTagName('li');
        // console.log(lis);
        // console.log(lis[0]);
        // 2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
        for(var i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>
</body>
</html>

在这里插入图片描述
document.getElementById(“id值”)；
+
element.getElementsByTagName(“标签名”);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>你可以成为任何你想成为的人</li>
        <li>但凡辛苦都是礼物</li>
        <li>你继续差吧我不会理你的</li>
        <li>听闻少年二字应与平庸相斥</li>
        <li>努力是会上瘾的特别是尝到了甜味之后</li>
        <li>兵分两路 顶端相见</li>
    </ul>
    <ul id = "ancient" >
        <li>我与春风皆过客 你携秋水揽星河</li>
        <li>天涯海角有穷时 只有相思无尽处</li>
        <li>寒灯纸上梨花雨凉 我等风雪又一年</li>
        <li>此情应是长相守 你若无心我便休</li>
        <li>情如风雪无常 却是一动即伤</li>
        <li>风追落叶叶追尘 彩云追月月自明</li>
    </ul>
    <script>
        // 返回的是获取过来元素对象的集合以伪数组的形式存储的
        var lis =document.getElementsByTagName('li');
        // console.log(lis);
        // console.log(lis[0]);
        // 2.我们想要依次打印里面的元素对象我们可以采取遍历的方式
        // for(var i = 0; i < lis.length; i++) {
        //     console.log(lis[i]);
        // }
        // 3.element.getElementsByTagName() 可以得到这个元素里面的某些标签
        var ancient = document.getElementById("ancient"); // 这个获取ancient元素
        var ancientLis = ancient.getElementsByTagName('li');
        // console.log(ancientLis);
        for(var i = 0; i < ancientLis.length; i++) {
            console.log(ancientLis[i]);
        }
    </script>
</body>
</html>