一般常用的原生选择器有：
id选择器:document.getElementById("test")
name选择器:document.getElementsByName("test")
节点选择器:document.getElementsByTagName("p")
class选择器:document.getElementsByClassName("test")
这次要详细说的是 document.querySelector() ， 开挂般的存在， jQuery的完美替代版本。
接收一个字符串参数， 返回返文档中与指定选择器或选择器组匹配的第一个 HTMLElement 对象。 如果找不到匹配项，则返回 null 。
3.返回带有foo或者bar样式类的首个元素
4.返回id为‘my-element’的 p 元素
6.其他选择方式可自行排列组合
document.querySelector() 的用法虽然与jQuery里的$()选择器类似,但有些细微区别:
<!doctype html><html>
<head>
<title>new document </title>
</head>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onload = function(){
var obj = document.getElementById('obj')
// 添加选项
for(var i=0i<5i++){
var opt = new Option('显示文本' + i,'选项值' + i)
obj.add(opt,undefined)
}
// 删除选项
obj.remove(4)//移除第五项
// 设置被选中项
obj.selectedIndex = 2// 选中第三项
obj.value = '选项值1'// 选中值为选项值1的那一项
// 获取下拉框的值
alert(obj.value)
alert(obj.options[obj.selectedIndex].value)
alert(obj.options[obj.selectedIndex].text)
// 清空下拉列表
obj.options.length = 0
}
//-->
</SCRIPT>
<body>
<select id="obj"></select>
</body>
</html>
nth-child选择器是css选择器，即匹配属于其父元素的第 N 个子元素，不论元素的类型。例如选第2个p元素就直接$(p:nth-child(2) ):eq() 选择器选取带有指定 index 值的元素。
index 值从 0 开始，所有第一个元素的 index 值是 0（不是 1）。例如选第2个p是$(p):eq(1)，而不是2。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）