03-获取DOM元素

最新推荐文章于 2024-07-12 20:49:16 发布

Strohhut

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量16

点赞数

分类专栏：黑马程序员APIs（1）文章标签： html javascript 前端

本文链接：https://blog.csdn.net/Strohht/article/details/130664484

版权

黑马程序员APIs（1）专栏收录该内容

17 篇文章 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>Document</title>
</head>
<body>
    <div class="box">123</div>
    <div class="box">abc</div>
    <p id="nav">导航栏</p>
    <ul>
        <li>测试1</li>
        <li>测试2</li>
        <li>测试3</li>
    </ul>
    <script>
        // 1.获取匹配的【第一个】元素
        // const box = document.querySelector('div')
        // const box = document.querySelector('.box')
        const nav = document.querySelector('#nav')
        console.log(nav)
        //修改元素，修改字体颜色为红色
        nav.style.color = 'red'
        // 2.获取第一个小ulli
        const li = document.querySelector('ul li:first-child')
        console.log(li)
        // 3.选择所有的小li（querySelectorAll）
        const lis = document.querySelectorAll('ul li')
        console.log(lis)

        // ·想得到里面每个对象（for），通过遍历的方式获得·
        for(let i = 0;i < lis.length;i++){
            console.log(lis[i])
        }
        // 只有一个元素，通过querySelectorAll()过来的也是一个伪数组，里面只有一个元素
        const p = document.querySelectorAll('#nav')
        console.log(p)
    </script>
</body>
</html>