dom查询方法01

最新推荐文章于 2023-08-28 16:37:32 发布

CV键都碎了

最新推荐文章于 2023-08-28 16:37:32 发布

阅读量63

点赞数

分类专栏： JavaScript 文章标签： dom js

本文链接：https://blog.csdn.net/sinat_33940108/article/details/116119213

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

getElementsByTagName() , 返回当前节点的指定标签的后代节点。
childNodes ，表示当前节点的所有子节点。
firstChild ，表示当前节点的第一个子节点。
lastChild，表示当前节点的最后一个子节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "total">
        <div class = "inner">
            <p>你最喜欢哪个城市</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>杭州</li>
                <li>吉林</li>
                <li>上海</li>
            </ul>
            <br>
            <br>

            <p>你的手机操作系统是什么</p>
            <ul id="phone"><li>IOS</li><li>android</li></ul>
        </div>
    </div>
    <button id = "btn04">查找city下所有li节点</button>
    <button id = "btn05">查找city下所有子节点</button>
    <button id = "btn06">返回phone下面的第一个子节点</button>

    <script>
        var btn04 = document.getElementById("btn04");
        btn04.onclick = function(){
            var city = document.getElementById("city"); //docuemnt在整个页面查找
            
            //查找city下所有li节点
            var lis = city.getElementsByTagName("li"); //getelementbytagname在city下面找
            // alert(lis.length);

            for(var i = 0; i<=lis.length;i++){
                alert(lis[i].innerHTML);
            }
        }

        var btn05 = document.getElementById("btn05");
        btn05.onclick = function(){
            var city = document.getElementById("city"); //docuemnt在整个页面查找
            //返回city所有子节点
            var cns = city.childNodes; //会获取包括文本节点在内的所有子节点
            // alert(cns.length);

            //children属性可以获得当前元素的所有子元素（标签）
            var cns2 = city.children;
            alert(cns2.length);
        }

		//返回第一个子节点
        var btn06 = document.getElementById("btn06");
        btn06.onclick = function(){
            var phone = document.getElementById("phone");
            var fir = phone.firstChild;
            alert(fir.innerHTML);
        }
    </script>
</body>
</html>

CV键都碎了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom查询方法01

getElementsByTagName() , 返回当前节点的指定标签的后代节点。childNodes ，表示当前节点的所有子节点。firstChild ，表示当前节点的第一个子节点。lastChild，表示当前节点的最后一个子节点。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl.
复制链接

扫一扫