使用querySelector和querySelectorAll訪問DOM元素。它們接受任何CSS選擇器,因此您不再受選擇元素的限制id
介紹
jQuery等DOM過去,庫及其提供的其他功能極大地提高了人氣,這要歸功於一種簡便的選擇頁面元素的方法。
傳統上,瀏覽器僅提供一種選擇DOM元素的方式-通過其id
屬性,帶有getElementById()
,由document
目的。
選擇器API
自2013年以來選擇器API,DOM使您可以使用兩種更有用的方法:
document.querySelector()
document.querySelectorAll()
它們可以安全使用,正如caniuse.com告訴我們的,並且除了所有其他現代瀏覽器之外,它們甚至在IE9上也完全受支持,因此沒有理由避免使用它們,除非您需要支持IE8(具有部分支持)及以下版本。
它們接受任何CSS選擇器,因此您不再受選擇元素的限制id
。
document.querySelector()
返回單個元素,第一個找到document.querySelectorAll()
返回包裝在NodeList對像中的所有元素。
這些都是有效的選擇器:
document.querySelector('#test')
document.querySelector('.my-class')
document.querySelector('#test .my-class')
document.querySelector('a:hover')
從jQuery到DOM API的基本示例
以下是將流行的jQuery API轉換為本地DOM API調用的翻譯。
選擇依據id
$('#test')
document.querySelector('#test')
我們用querySelector
自從id
在頁面中是唯一的
選擇依據class
$('.test')
document.querySelectorAll('.test')
按標籤名稱選擇
$('div')
document.querySelectorAll('div')
jQuery到DOM API的更高級示例
選擇多個項目
$('div, span')
document.querySelectorAll('div, span')
按HTML屬性值選擇
$('[data-example="test"]')
document.querySelectorAll('[data-example="test"]')
通過CSS偽類選擇
$(':nth-child(4n)')
document.querySelectorAll(':nth-child(4n)')
選擇元素的後代
例如全部li
下的元素#test
:
$('#test li')
document.querySelectorAll('#test li')
免費下載我的JavaScript初學者手冊
更多瀏覽器教程:
- HTML5提供了一些有用的技巧
- 我如何使基於CMS的網站脫機工作
- 漸進式Web應用程序完整指南
- 提取API
- 推送API指南
- 頻道消息傳遞API
- 服務人員教程
- 緩存API指南
- 通知API指南
- 深入IndexedDB
- Selectors API:querySelector和querySelectorAll
- 通過延遲和異步有效地加載JavaScript
- 文檔對像模型(DOM)
- Web存儲API:本地存儲和會話存儲
- 了解HTTP Cookies的工作原理
- 歷史API
- WebP圖像格式
- XMLHttpRequest(XHR)
- 深入的SVG教程
- 什麼是數據網址
- 學習網絡平台的路線圖
- CORS,跨域資源共享
- 網絡工作者
- requestAnimationFrame()指南
- 什麼是Doctype
- 使用DevTools控制台和控制台API
- 語音合成API
- 如何在純JavaScript中等待DOM ready事件
- 如何將類添加到DOM元素
- 如何遍歷來自querySelectorAll的DOM元素
- 如何從DOM元素中刪除類
- 如何檢查DOM元素是否具有類
- 如何更改DOM節點值
- 如何將click事件添加到從querySelectorAll返回的DOM元素列表中
- WebRTC,實時Web API
- 如何在JavaScript中獲取元素的滾動位置
- 如何替換DOM元素
- 如何只接受輸入文件字段中的圖像
- 為什麼要使用瀏覽器的預覽版?
- 斑點對象
- 文件對象
- FileReader對象
- FileList對象
- ArrayBuffer
- ArrayBufferView
- URL對象
- 類型數組
- DataView對象
- BroadcastChannel API
- Streams API
- FormData對象
- 導航器對象
- 如何使用地理位置API
- 如何使用getUserMedia()
- 如何使用拖放API
- 如何在網頁上滾動
- 在JavaScript中處理表單
- 鍵盤事件
- 鼠標事件
- 觸摸事件
- 如何從DOM元素中刪除所有子級
- 如何使用原始Javascript創建HTML屬性
- 如何檢查是否使用JavaScript選中了複選框?
- 如何使用JavaScript複製到剪貼板
- 如何使用JavaScript禁用按鈕
- 如何在瀏覽器中使頁面可編輯
- 如何使用URLSearchParams在JavaScript中獲取查詢字符串值
- 如何一次刪除頁面上的所有CSS
- 如何使用insertAdjacentHTML
- Safari,退出前警告
- 如何使用JavaScript將圖像添加到DOM
- 如何重設表格
- 如何使用Google字體