DOM查询（二）

最新推荐文章于 2025-12-18 10:02:55 发布

原创最新推荐文章于 2025-12-18 10:02:55 发布 · 137 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #dom

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

60 篇文章

订阅专栏

这篇博客介绍了在JavaScript中如何通过DOM操作获取元素的子节点。主要讲解了getElementsByTagName()方法用于获取指定标签名的后代节点，childNodes属性获取所有子节点（包括文本节点），以及firstChild和lastChild属性分别获取第一个和最后一个子节点。示例代码展示了这些方法的实际应用，并对比了在不同浏览器中的行为差异。

获取元素的子节点

通过具体的元素节点调用

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>