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

創(chuàng)新互聯(lián)基于成都重慶香港及美國等地區(qū)分布式IDC機房數(shù)據中心構建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)服務器托管報價，主機托管價格性價比高，為金融證券行業(yè)內江機房主機托管，ai人工智能服務器托管提供bgp線路100M獨享，G口帶寬及機柜租用的專業(yè)成都idc公司。

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

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

javascript選擇器是什么意思

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

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

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

1. document.getElementById()

2. document.getElementsByClassName()

3. document.getElementsByName()

4. document.getElementsByTagName()

接下來我會簡單介紹幾種選擇器的基本用法

1.document.getElementById()
Id選擇器
通過Id屬性來獲取對象
HTML部分

	這是一個p標簽

JS部分

	var d1 = document.getElementById("p1")

如圖為獲取到的內容:

這樣就可以從HTML中獲取到一個Element對象，并且可以對其進行操作。

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

	這是一個p標簽

    這是一個p標簽

    這是一個a標簽
    這是一個span標簽

JS部分

	var c1 = document.getElementsByClassName("c1")

如圖為獲取到的內容:

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

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

這樣就可以獲取到其中具體的某一個Element對象，如圖:

這樣就可以對此Element對象進行具體操作

3.document.getElementsByTagName()
TagName選擇器
通過元素名稱來獲取對象
HTML部分

	

        
0
        
1
        
2
        
3
        
4
    

JS部分

	var li = document.getElementsByTagName("li")

如圖為獲取到的內容:

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

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

這樣就可以獲取到其中具體的某一個Element對象，如圖:

4.document.getElementsByName()
Name選擇器
通過Name屬性來獲取對象
HTML部分

	
        1
        2
        3
    

JS部分

	 var form = document.getElementsByName('xx')

如圖為獲取到的內容:

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

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

下標為0時取第一項

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

下標為1時取第二項

以上就是“javascript的選擇器有哪些及怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。