说明

根据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']") )