dom语句中,两个获取标签语句的区别

document.querySelector('css选择器')获取一个标签

作用：可以获取第一个指定的 html 标签 对于js来说 就是一个 DOM对象  如果获取不到 得到 null

document.querySelectorAll('css选择器')获取多个标签

作用：可以获取 多个 html标签

返回值：获取成功是一个有数组元素的数组(伪数组,不能用.pop()的方法增加数据).获取失败:空数组

注意点：获取成功后 不能直接操作 想要 访问对应的 dom 对象 需要通过下标的方式来访问

注意,标红的字体是比较容易混淆的一点

<div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

const start = document.querySelector('.start')
const end = document.querySelector('.end')
const btn = document.querySelectorAll('button')

这一个大盒子包含两个按钮标签,此时我想让两个按钮都禁用,有两种方法,

第一种,分别注册两个按钮标签,然后分别让这两个标签的dom对象的属性值 disabled = true

<div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

const start = document.querySelector('.start')
const end = document.querySelector('.end')
const btn = document.querySelectorAll('button')

start.disabled = true
end.disabled = true

第二种,要复杂一点,因为两个标签名都是button,直接注册对象const btn = document.querySelectorAll('button')这样我们就得到了一个包含两个button标签的伪数组.

注意,我们这里要操作这个伪数组时,不能直接使用btn.disabled = true 这个写法来操作

因为此时你的btn值表示一个伪数组,你并没有获取它里面的每一个值,必须要先遍历数组,才能使用操作里面的每一个值,如图

<div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

const start = document.querySelector('.start')
const end = document.querySelector('.end')
const btn = document.querySelectorAll('button')

for(let j = 0;j<btn.length;j++){
                 btn[j].disabled = true
             }