2.获取DOM元素-Toy模板网

这篇具有很好参考价值的文章主要介绍了2.获取DOM元素。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

获取DOM元素就是利用JS选择页面中的标签元素

2.1 根据CSS选择器来获取DOM元素(重点)

2.1.1选择匹配的第一个元素

语法:

document.querySelector( 'css选择器' )

参数:
包含一个或多个有效的CSS选择器字符串
返回值:
CSS选择器匹配的第一个元素，一个HTMLElement对象。
如果没有匹配到，则返回null。

2.1.2选择匹配的多个元素

语法:

document.querySelectorAll( 'css选择器' )

参数:
包含一个或多个有效的CSS选择器字符串
返回值:
CSS选择器匹配的 NodeList 对象集合

【示例】

<body>
    <div class="box">abc</div>
    <div class="box">123</div>
    <p id="nav">导航栏</p>
    <ul>
        <li>1</li>
        <li>2</li>
    </ul>
    <script>
        // 1.获取 div 匹配的第一个元素
        const box = document.querySelector('div')
        // const box = document.querySelector('.box')
        console.dir(box)
        // 2.获取 p
        const nav = document.querySelector('p')
		// const nav = document.querySelector('#nav')
        console.dir(nav)
        // 3.获取第一个 li
        const li = document.querySelector('ul li:first-child')
        console.dir(li)
        // 4.获取所有的 li
        const lis = document.querySelectorAll('ul li')
        console.dir(lis)
    </script>
</body>

2.获取DOM元素,前端——JavaScript,javascript,前端

2.1.3伪数组

querySelectorAll() 得到的是一个伪数组
➢有长度、有索引号的数组
➢但是没有pop() push() 等数组方法
想要得到里面的每一个对象，需要遍历 (for) 的方式获得。
哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，只是里面只有一个元素而已

遍历打印所有的小li ：
【示例代码】

<body>
    <ul class="nav">
        <li>我的首页</li>
        <li>产品信息</li>
        <li>联系方式</li>
    </ul>
    <script>
        // 方法1
        const lis = document.querySelectorAll('.nav li')
        for (let i = 0; i < lis.length; i++) {
            console.dir(lis[i])
        }
        // 方法2
        // for (let i = 1; i <= 3; i++) {
        //     const li = document.querySelector(`ul li:nth-child(${i})`)
        //     console.dir(li)
        // }
    </script>
</body>

2.获取DOM元素,前端——JavaScript,javascript,前端
注意：
（1）获取一个DOM元素用querySelector()，能直接操作修改
（2）获取多个DOM元素用querySelectorAll()，不能直接操作修改，只能通过遍历的方式给里面的元素做修改文章来源地址https://www.toymoban.com/news/detail-611219.html

2.2 其他获取DOM元素方法(了解)

//根据id获取一个元素
document.getElementById( 'nav' )
//根据 标签 获取一类元素 获取页面所有div
document.getElementsByTagName( 'div' )
//根据 类名 获取元素 获取页面所有类名为w的
document.getElementsByClassName( 'w' )

到了这里，关于2.获取DOM元素的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！