JS：DOM获取页面元素

最新推荐文章于 2022-11-28 23:45:41 发布

红嘴-蓝鹊

最新推荐文章于 2022-11-28 23:45:41 发布

阅读量473

点赞数

分类专栏： JS基础文章标签： javascript webview 前端

本文链接：https://blog.csdn.net/weixin_48475463/article/details/122692870

版权

JS基础专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1. 通过id获取页面元素__document.getElementById

<body>
    <div id="box">
        <ul>
            <li class="box_items">李沁</li>
            <li class="box_items">迪丽热巴</li>
            <li class="box_items">李一桐</li>
            <li class="box_items">杨洋</li>
            <li class="box_items">胡歌</li>
            <li class="box_items">沈腾</li>
        </ul>
    </div>

    <script>
        // 1. 通过getElementById获取页面元素
        var element = document.getElementById("box");
        console.log(element); //
    </script>
</body>

2. 通过类名获取元素__document.getElementsByClassName

<body>
    <div id="box">
        <ul>
            <li class="box_item">李沁</li>
            <li class="box_item">迪丽热巴</li>
            <li class="box_item">李一桐</li>
            <li class="box_item">杨洋</li>
            <li class="box_item">胡歌</li>
            <li class="box_item">沈腾</li>
        </ul>
    </div>
    
    <!-- 2. 通过类名获取元素 -->
    <script>
        var lis = document.getElementsByClassName("box_item");
        console.log(lis);
    </script>

</body>

3. 通过标签获取元素__document.getElementsByTagName

<body>
    <div id="box">
        <ul>
            <li class="box_item">李沁</li>
            <li class="box_item">迪丽热巴</li>
            <li class="box_item">李一桐</li>
            <li class="box_item">杨洋</li>
            <li class="box_item">胡歌</li>
            <li class="box_item">沈腾</li>
        </ul>
    </div>

    <!-- 3. 通过标签获取元素 -->
    <script>
        var lis = document.getElementsByTagName("li");
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function(){
                console.log(window.confirm("真的好看！"));
            } 
        }
    </script>

</body>

4. 通过选择器获取元素（默认选中文档中的第一个符合条件的元素）__document.querySelector

<body>
    <div id="box">
        <ul>
            <li class="box_item">李沁</li>
            <li class="box_item">迪丽热巴</li>
            <li class="box_item">李一桐</li>
            <li class="box_item">杨洋</li>
            <li class="box_item">胡歌</li>
            <li class="box_item">沈腾</li>
        </ul>
    </div>

    <!-- 4. 通过选择器获取元素（默认选中文档中的第一个符合条件的元素） -->
    <script>
        var firstElement = document.querySelector("li.box_item");
        firstElement.onclick = function(){
            alert("我喜欢你");
        }
    </script>

</body>

5. 找出符合选择器的全部元素（伪数组）__document.querySelectorAll

<body>
    <div id="box">
        <ul>
            <li class="box_item">李沁</li>
            <li class="box_item">迪丽热巴</li>
            <li class="box_item">李一桐</li>
            <li class="box_item">杨洋</li>
            <li class="box_item">胡歌</li>
            <li class="box_item">沈腾</li>
        </ul>
    </div>

    <!-- 4. 通过选择器获取元素（默认选中文档中的第一个符合条件的元素） -->
    <script>
        var elements = document.querySelectorAll("li.box_item");
        for (let i = 0; i < elements.length; i++) {
            elements[i].onclick = function(){
                alert("你们真好看！");
            }
        }
    </script>

</body>

红嘴-蓝鹊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS：DOM获取页面元素

1. 通过id获取页面元素__document.getElementById<body> <div id="box"> <ul> <li class="box_items">李沁</li> <li class="box_items">迪丽热巴</li> <li class="box_items">李一桐</
复制链接

扫一扫