JavaScript:document.querySelector和document.querySelectorAll

说明

根据css选择器进行查找

document.querySelector()

返回一个dom对象,即使根据选择器找到多个 dom对象,也只返回第一个

例子

html:

爱好:
<input type="checkbox" name="hobby" value="wzry"> 王者荣耀
<input type="checkbox" name="hobby" value="ys" > 原神
<input type="checkbox" name="hobby" value="dy" > 抖音
<input type="checkbox" name="hobby" value="bb" > 篮球

JavaScript:

console.log(document.querySelector("input"))

只返回第一个 input dom对象

document.querySelectorAll()

返回NodeList集合(相当于数组),根据选择器找到所有 dom对象,并放入该集合中

例子

html:

爱好:
<input type="checkbox" name="hobby" value="wzry"> 王者荣耀
<input type="checkbox" name="hobby" value="ys" > 原神
<input type="checkbox" name="hobby" value="dy" > 抖音
<input type="checkbox" name="hobby" value="bb" > 篮球

JavaScript:

console.log(document.querySelectorAll("input"))

返回 NodeList集合,集合里面是 4个input dom对象

案例

根据属性值进行查找

html:

爱好:
<input type="checkbox" name="hobby" value="wzry"> 王者荣耀
<input type="checkbox" name="hobby" value="ys" > 原神
<input type="checkbox" name="hobby" value="dy" > 抖音
<input type="checkbox" name="hobby" value="bb" > 篮球

javascript:

console.log( document.querySelector("input[value='ys']") )

原文出处:https://malaoshi.top/show_1IX3zdlyhZAG.html