JavaScript中選擇器的示例分析-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)JavaScript中選擇器的示例分析的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機版的企業(yè)網(wǎng)站。實現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營銷需求！創(chuàng)新互聯(lián)具備承接各種類型的成都網(wǎng)站設(shè)計、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)項目的能力。經(jīng)過10余年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評。

undefined

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

.getElementById("id")id選擇器;
.getElementsByName("name")name選擇器;
.getElementsByTagName("tagname")tag標簽名選擇器；
.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標簽選擇器</p>
 <span></span>
 <span></span>
 <p>css中.class選擇器</p>
 <div class="div"></div>
 <div class="div"></div>
</body>
<script>
 document.getElementById("first").innerHTML="<h5>我是id選擇器效果</h5>";
 document.getElementsByName("first")[0].innerHTML="<h5>我是第一個name選擇器效果</h5>";
 document.getElementsByName("first")[1].innerHTML="<h5>我是第二個name選擇器效果</h5>";
 document.getElementsByTagName("span")[0].innerHTML="<h5>我是第一個tag選擇器效果</h5>";
 document.getElementsByTagName("span")[1].innerHTML="<h5>我是第二個tag選擇器效果</h5>";
 document.getElementsByClassName("div")[0].innerHTML="<h5>我是第一個.class選擇器效果</h5>";
 document.getElementsByClassName("div")[1].innerHTML="<h5>我是第二個.class選擇器效果</h5>";
</script>
</html>

運行截圖：


JavaScript中選擇器的示例分析

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

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

在html5產(chǎn)生后，就產(chǎn)生了另外兩種選擇器，用法與css選擇器類同
querySelector（）：根據(jù)選擇器規(guī)則返回第一個符合要求的元素（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;
	}
	h4{
		color: darkblue;
	}
</style>
</head>
<body>
	<h4>querySelector()根據(jù)選擇器規(guī)則返回第一個符合要求的元素 </h4>
	<p>通過id獲取單節(jié)點</p>
	<div id="second"></div>
	<p>通過.class獲取單節(jié)點</p>
	<div class="div"></div>
	<h4>querySelectorall()根據(jù)選擇器規(guī)則返回所有符合要求的元素 </h4>
	<div></div>
</body>
<script>
	document.querySelector("#second").innerHTML="<h5>我是通過id選擇效果</h5>";
	document.querySelector(".div").innerHTML="<h5>我是通過.class選擇效果</h5>";
	document.querySelectorAll("div")[2].innerHTML="<h5>我是通過tag選擇第三個的效果</h5>";
</script>
</html>

運行截圖：


JavaScript中選擇器的示例分析

感謝各位的閱讀！關(guān)于“JavaScript中選擇器的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

本文題目：JavaScript中選擇器的示例分析-創(chuàng)新互聯(lián)
鏈接分享：http://bm7419.com/article14/djhege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、品牌網(wǎng)站制作、動態(tài)網(wǎng)站、定制網(wǎng)站、網(wǎng)站設(shè)計公司、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)