52-(DOM)查询子节点

最新推荐文章于 2024-09-09 09:35:48 发布

七色的天空

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量92

点赞数

分类专栏： 04_JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/q506174602/article/details/132586957

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!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>查询子节点</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li id="item">3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        var ul = document.getElementsByTagName('ul')[0];
        console.dir(ul);
        // console.log(ul.firstChild); // 不实用
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);


        //window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
        //为什么使用 window.onload()?
        //因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。
        window.onload = function () {
            var box = document.getElementsByClassName('box')[0];
            console.log(box);
        }
    </script>

    <div class="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>

</html>

上述运行结果：

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

下面是不使用window.onload()的例子：

<!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>查询子节点</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li id="item">3</li>
        <li>4</li>
        <li>5</li>
    </ul>

    <script>
        var ul = document.getElementsByTagName('ul')[0];
        console.dir(ul);
        console.log(ul.firstElementChild);
        console.log(ul.lastElementChild);


        var box = document.getElementsByClassName('box')[0];
        console.log(box);
        
    </script>

    <div class="box">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>

</html>

上述运行结果：