文件命名為：querySelector.html，可在Chrome瀏覽器中預覽效果。

1

2

3

4 ? ?

5 ? ?

使用HTML5的JS選擇器操作頁面中的元素

6

7

8 ? ?

9 ? ? ? ?

10 ? ? ? ?

興趣愛好：

11 ? ? ? ?

12 ? ? ? ? 籃球

13 ? ? ? ? 唱歌

14 ? ? ? ? 游泳

15 ? ? ? ? 桌球

16 ? ? ? ?

17 ? ? ? ? 獲取興趣愛好

18 ? ?

19

20 ? ?

21 ? ? ? ? //監聽獲取按鈕的點擊事件

22 ? ? ? ? document.querySelector('button').addEventListener('click',function(e){

23 ? ? ? ? ? ? //按鈕默認事件

24 ? ? ? ? ? ? e.preventDefault();

25 ? ? ? ? ? ? //獲取所有選中的復選框

26 ? ? ? ? ? ? var checked = document.querySelectorAll('input:checked'),

27 ? ? ? ? ? ? results = [];//結果數組

28 ? ? ? ? ? ? //將元素列表轉化為數組

29 ? ? ? ? ? ? checked = Array.prototype.slice.call(checked);

30 ? ? ? ? ? ? //循環數組，獲取選中的值

31 ? ? ? ? ? ? checked.forEach(function(item){

32 ? ? ? ? ? ? ? ? var id = item.getAttribute('id'), //獲取復選框id

33 ? ? ? ? ? ? ? ? label = document.querySelector('label[for="'+ id +'"]'); //根據id獲取對應label元素

34 ? ? ? ? ? ? ? ? results.push(label.innerHTML); //將數值推入數組

35 ? ? ? ? ? ? });

36 ? ? ? ? ? ? document.querySelector('h2 > label').innerHTML = results.join(',');//設置顯示標簽內容

37 ? ? ? ? });

38 ? ?

39

40

示例中，第22、26、33、36行分別使用了元素選擇器、偽類選擇器、屬性選擇器和子元素選擇器。

總結

以上是生活随笔為你收集整理的html5 js选择器,使用HTML5的JS选择器操作页面中的元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。