了解JavaScript中的选择器

在html5之前只有下面四种选择器

.getElementById("id")id选择器;
.getElementsByName("name")name选择器;
.getElementsByTagName("tagname")tag标签名选择器；
.getElementsByClassName(".classname").class名选择器

示例代码：

 
 .div{
  border: 2px solid red;
 }

 p{
  color: red;
 }




 
id选择器

 
 
name选择器

 
 
 
tag标签选择器

 
 
 
css中.class选择器

 
 

运行截图：

从结果可以看出各个返回值类型

.getElementById("id")id选择器-----node单节点型（第一个id【具有唯一性】相同元素）
.getElementsByName("name")name选择器----nodelist类数组型
.getElementsByTagName("tagname")tag标签名选择器----nodelist类数组型
.getElementsByClassName(".classname").class名选择器—nodelist类数组型

在html5产生后，就产生了另外两种选择器，用法与css选择器类同
querySelector（）：根据选择器规则返回第一个符合要求的元素（node）
querySelectorAll（）：根据选择器规则返回所有符合要求的元素（nodelist）

示例代码：

	.div{
		border: 2px solid red;
	}
	p{
		color: red;
	}
	h3{
		color: darkblue;
	}



	querySelector()根据选择器规则返回第一个符合要求的元素 
	
通过id获取单节点
	
	
通过.class获取单节点
	
	querySelectorall()根据选择器规则返回所有符合要求的元素 
	

运行截图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。