javascript的選擇器有哪些及怎么用

今天小編給大家分享一下javascript的選擇器有哪些及怎么用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

在JavaScript中，選擇器是用于獲取HTML頁(yè)面元素的方法，可以將頁(yè)面元素保存到一個(gè)對(duì)象中，對(duì)這個(gè)對(duì)象的屬性值進(jìn)行相應(yīng)的操作，例如“getElementById()”、“getElementsByName()”等。

本教程操作環(huán)境：windows10系統(tǒng)、javascript1.8.5版、Dell G3電腦。

javascript選擇器是什么意思

JS選擇器主要用來(lái)獲取HTML頁(yè)面中的元素，將頁(yè)面中的元素保存到一個(gè)對(duì)象中，然后就可以對(duì)這些對(duì)象的屬性值進(jìn)行相應(yīng)操作，以實(shí)現(xiàn)一些動(dòng)態(tài)效果，以達(dá)到頁(yè)面的生動(dòng)，易用。需要注意的一點(diǎn)是操作的一定是對(duì)象，直接將元素當(dāng)做對(duì)象使用是不行的。

JS選擇器是將對(duì)象對(duì)應(yīng)的元素的屬性直接進(jìn)行操作，所以其改變的style的值是直接改變行間樣式，優(yōu)先級(jí)遠(yuǎn)高于CSS樣式，所以使用時(shí)應(yīng)注意與已經(jīng)完成的CSS樣式的取舍。

js中原生的選擇器主要有以下四種

1. document.getElementById()

2. document.getElementsByClassName()

3. document.getElementsByName()

4. document.getElementsByTagName()

接下來(lái)我會(huì)簡(jiǎn)單介紹幾種選擇器的基本用法

1.document.getElementById()
Id選擇器
通過(guò)Id屬性來(lái)獲取對(duì)象
HTML部分

	<p id="p1">這是一個(gè)p標(biāo)簽</p>

JS部分

	var d1 = document.getElementById("p1")

如圖為獲取到的內(nèi)容:

這樣就可以從HTML中獲取到一個(gè)Element對(duì)象，并且可以對(duì)其進(jìn)行操作。

2.document.getElementsByClassName()
ClassName選擇器
通過(guò)ClassName屬性獲取對(duì)象
HTML部分

	<p class="c1">這是一個(gè)p標(biāo)簽</p>
    <p class="c1">這是一個(gè)p標(biāo)簽</p>
    <a class="c1">這是一個(gè)a標(biāo)簽</a>
    <span class="c1">這是一個(gè)span標(biāo)簽</span>

JS部分

	var c1 = document.getElementsByClassName("c1")

如圖為獲取到的內(nèi)容:

       類名選擇器獲取到的是HTMLCollection對(duì)象，它是一個(gè)類似于數(shù)組的對(duì)象，如果需要選擇具體的某一個(gè)Element對(duì)象，則需要做類似于取數(shù)組元素的操作，如下(以取第一項(xiàng)為例):

 	var c1 =  document.getElementsByClassName("p1")[0]

這樣就可以獲取到其中具體的某一個(gè)Element對(duì)象，如圖:

這樣就可以對(duì)此Element對(duì)象進(jìn)行具體操作

3.document.getElementsByTagName()
TagName選擇器
通過(guò)元素名稱來(lái)獲取對(duì)象
HTML部分

	<ul>
        <li>0</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

JS部分

	var li = document.getElementsByTagName("li")

如圖為獲取到的內(nèi)容:

       TagName選擇器獲取到的內(nèi)容與ClassName選擇器一樣，是HTMLCollection對(duì)象，所以，如果需要選擇具體的某一個(gè)Element對(duì)象，也需要做類似于取數(shù)組元素的操作，如下(以取第一項(xiàng)為例):

	var li = document.getElementsByTagName("li")[0]

這樣就可以獲取到其中具體的某一個(gè)Element對(duì)象，如圖:

4.document.getElementsByName()
Name選擇器
通過(guò)Name屬性來(lái)獲取對(duì)象
HTML部分

	<form action="" name="xx">
        <input type="radio" name="xx" value="1">1
        <input type="radio" name="xx" value="2">2
        <input type="radio" name="xx" value="3">3
    </form>

JS部分

	 var form = document.getElementsByName('xx')

如圖為獲取到的內(nèi)容:

        Name選擇器主要用于form標(biāo)簽等需要name屬性的標(biāo)簽的獲取，獲取到的是NodeList對(duì)象，此類對(duì)象與HTMLCollection對(duì)象相似，所要獲取的具體對(duì)象操作也類似于數(shù)組，如下:

	var form = document.getElementsByName("xx")[0]

下標(biāo)為0時(shí)取第一項(xiàng)

	var form = document.getElementsByName('xx')[1]

下標(biāo)為1時(shí)取第二項(xiàng)

以上就是“javascript的選擇器有哪些及怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。