快捷導(dǎo)航

了解JavaScript中的選擇器

更新時(shí)間：2019年05月24日 15:25:34 作者：燃情雪

這篇文章主要介紹了JavaScript中的選擇器，下面和小編一起了看看吧

在html5之前只有下面四種選擇器

.getElementById("id")id選擇器;
.getElementsByName("name")name選擇器;
.getElementsByTagName("tagname")tag標(biāo)簽名選擇器；
.getElementsByClassName(".classname").class名選擇器

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript選擇器</title>
<style>
 
 .div{
  border: 2px solid red;
 }

 p{
  color: red;
 }

</style>
</head>
<body>
 <p>id選擇器</p>
 <div id="first"></div>
 <p>name選擇器</p>
 <div name="first"></div>
 <div name="first"></div>
 <p>tag標(biāo)簽選擇器</p>
 <span></span>
 <span></span>
 <p>css中.class選擇器</p>
 <div class="div"></div>
 <div class="div"></div>
</body>
<script>
 document.getElementById("first").innerHTML="<h4>我是id選擇器效果</h4>";
 document.getElementsByName("first")[0].innerHTML="<h4>我是第一個(gè)name選擇器效果</h4>";
 document.getElementsByName("first")[1].innerHTML="<h4>我是第二個(gè)name選擇器效果</h4>";
 document.getElementsByTagName("span")[0].innerHTML="<h4>我是第一個(gè)tag選擇器效果</h4>";
 document.getElementsByTagName("span")[1].innerHTML="<h4>我是第二個(gè)tag選擇器效果</h4>";
 document.getElementsByClassName("div")[0].innerHTML="<h4>我是第一個(gè).class選擇器效果</h4>";
 document.getElementsByClassName("div")[1].innerHTML="<h4>我是第二個(gè).class選擇器效果</h4>";
</script>
</html>

運(yùn)行截圖：

從結(jié)果可以看出各個(gè)返回值類型

.getElementById("id")id選擇器-----node單節(jié)點(diǎn)型（第一個(gè)id【具有唯一性】相同元素）
.getElementsByName("name")name選擇器----nodelist類數(shù)組型
.getElementsByTagName("tagname")tag標(biāo)簽名選擇器----nodelist類數(shù)組型
.getElementsByClassName(".classname").class名選擇器—nodelist類數(shù)組型

在html5產(chǎn)生后，就產(chǎn)生了另外兩種選擇器，用法與css選擇器類同
querySelector（）：根據(jù)選擇器規(guī)則返回第一個(gè)符合要求的元素（node）
querySelectorAll（）：根據(jù)選擇器規(guī)則返回所有符合要求的元素（nodelist）

示例代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript選擇器</title>
<style>
	.div{
		border: 2px solid red;
	}
	p{
		color: red;
	}
	h3{
		color: darkblue;
	}
</style>
</head>
<body>
	<h3>querySelector()根據(jù)選擇器規(guī)則返回第一個(gè)符合要求的元素 </h3>
	<p>通過id獲取單節(jié)點(diǎn)</p>
	<div id="second"></div>
	<p>通過.class獲取單節(jié)點(diǎn)</p>
	<div class="div"></div>
	<h3>querySelectorall()根據(jù)選擇器規(guī)則返回所有符合要求的元素 </h3>
	<div></div>
</body>
<script>
	document.querySelector("#second").innerHTML="<h4>我是通過id選擇效果</h4>";
	document.querySelector(".div").innerHTML="<h4>我是通過.class選擇效果</h4>";
	document.querySelectorAll("div")[2].innerHTML="<h4>我是通過tag選擇第三個(gè)的效果</h4>";
</script>
</html>

運(yùn)行截圖：