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

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

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

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中選擇器的示例分析

從結果可以看出各個返回值類型

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

在html5產生后，就產生了另外兩種選擇器，用法與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中選擇器的示例分析

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

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

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

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

猜你還喜歡下面的內容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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