DOM查询（二）

最新推荐文章于 2024-06-28 18:10:28 发布

周白卿

最新推荐文章于 2024-06-28 18:10:28 发布

阅读量82

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端 dom

本文链接：https://blog.csdn.net/qq_51088023/article/details/125815830

版权

JavaScript学习笔记专栏收录该内容

60 篇文章 1 订阅

订阅专栏

获取元素的子节点

通过具体的元素节点调用

getElementsByTagName()：方法，返回当前节点的指定标签名后代节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var shuzi = document.getElementById("shuzi");
            //获取id为shuzi的ul节点
            var lis = shuzi.getElementsByTagName("li");
            //获取shuzi节点下的所有li节点
            alert(lis.length);       
            //打印lis的长度
            for(var i=0;i<lis.length;i++){
                alert(lis[i].innerHTML);
            }
            //遍历lis，获取li中的内容
        };
    </script>
</head>
<body>
    <ul id="shuzi">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

childNodes：属性，表示当前节点的所有子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var shuzi = document.getElementById("shuzi");
            //获取id为shuzi的ul节点
            var lis = shuzi.childNodes;
            //获取shuzi节点下的所有子节点
            //childNodes属性会获取包括文本节点在内的所有节点
            alert(lis.length); 
            //根据DOM标准，标签间的空白也会被当成文本节点       
            //打印lis的长度，7
            //注意，在IE8及以下的浏览器中，不会将空白文本当成子节点
            //所以该属性在IE8中会返回3个子元素而其他浏览器是7个
            var lis2 = shuzi.chilsren;
            //children属性可以获取当前元素的所有子元素
            alert(lis2.length);
            //打印lis2的长度，3
        };
    </script>
</head>
<body>
    <ul id="shuzi">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

fristChild：属性，表示当前节点的第一个子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var shuzi = document.getElementById("shuzi");
            //获取id为shuzi的ul节点
            var fir = shuzi.firstChild;
            //返回id为shuzi的ul节点下的第一个子节点,包括空白文本节点
            //也可以是：var fir = shuzi.childNodes[0]
            alert(fir.innerHTML); 
            //打印fir，undefined
            var fir2 = shuzi.firstElementChild;
            //返回id为shuzi的ul节点下的第一个子元素
            //firstElementChild不支持IE8及以下的浏览器
            //如果需要兼容，尽量不使用它
            alert(fir2.innerHTML);
        };
    </script>
</head>
<body>
    <ul id="shuzi">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>

lastChild：属性，表示当前节点的最后一个子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var shuzi = document.getElementById("shuzi");
            //获取id为shuzi的ul节点
            var fir = shuzi.lastChild;
            //返回id为shuzi的ul节点下的最后一个子节点,包括空白文本节点
            alert(fir.innerHTML); 
            //打印fir，undefined
        };
    </script>
</head>
<body>
    <ul id="shuzi">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</body>
</html>