说明
类似css选择器,进行查找:
#id:根据id查找.class:根据样式名查找标签名:根据标签名查找input[name='sex']:根据 标签名、name 查找input[name='sex']:checked:根据 标签名、name、属性查找
document.querySelector()
返回一个dom对象,即使根据选择器找到多个 dom对象,也只返回第一个
例子
获取选中的性别
原理:选择input标签,且 name是sex,且勾选的dom对象
html:
性别: <input type="radio" name="sex" value="0" /> 女
<input type="radio" name="sex" value="1" /> 男<br>
JavaScript:
var sexDom = document.querySelector("input[name='sex']:checked")
console.log("sexDom:",sexDom)
if(sexDom!=null){
console.log("性别:",sexDom.value)
}
document.querySelectorAll()
返回NodeList集合(相当于数组),根据选择器找到所有 dom对象,并放入该集合中
例子
选中爱好
原理:选择input标签,且name是hobby,且勾选的dom对象,返回的是 NodeList 集合,相当于数组
html:
爱好: <input type="checkbox" name="hobby" value="wzry" />王者荣耀
<input type="checkbox" name="hobby" value="cj" />吃鸡
<input type="checkbox" name="hobby" value="dy" />抖音<br>
javascript:
// 选择input标签,且name是hobby,且勾选的dom对象,返回的是数组
var hobbyDom = document.querySelectorAll("input[name='hobby']:checked")
console.log("hobbyDom:",hobbyDom)
for( var item of hobbyDom){
console.log("爱好:",item.value)
}
返回 NodeList集合,集合里面是 4个input dom对象