Document.querySelector教程 · ZetCode 中文系列教程

# `Document.querySelector`教程 > 標題： [http://zetcode.com/javascript/queryselector/](http://zetcode.com/javascript/queryselector/) `Document.querySelector`教程顯示了如何使用`querySelector`選擇 JavaScript 中的 HTML 元素。 ## `Document.querySelector` `Document`的`querySelector()`方法返回文檔中與指定選擇器或一組選擇器匹配的第一個元素。如果找不到匹配項，則返回`null`。 `querySelectorAll()`返回一個靜態`NodeList`，代表與指定選擇器組匹配的文檔元素列表。 ## `Document.querySelector`示例下面的示例演示`querySelector()`和`querySelectorAll()`方法的用法。 `index.html` ```js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document.querySelector</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/button.min.css"> <style> body { margin: 3em } .selected { background-color: #eee } .container { display: grid; grid-template-columns: 100px 100px 100px 100px 100px; grid-template-rows: 50px; grid-column-gap:5px; margin-bottom: 1em; } div>div { border: 1px solid #ccc; } </style> </head> <body> <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <button id="first" type="submit" class="ui grey button">First</button> <button id="all" type="submit" class="ui brown button">All</button> <button id="clear" type="submit" class="ui brown button">Clear</button> <script src="main.js"></script> </body> </html> ``` 在文檔中，我們顯示五個帶邊框的`div`元素。我們有三個按鈕。每個按鈕都會更改`div`的外觀。 ```js <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/components/button.min.css"> ``` 我們使用語義 UI 設置文檔樣式。 ```js .selected { background-color: #eee } ``` 所選的`div`具有灰色背景色。 ```js .container { display: grid; grid-template-columns: 100px 100px 100px 100px 100px; grid-template-rows: 50px; grid-column-gap:5px; margin-bottom: 1em; } ``` 使用 CSS 網格布局系統將`div`一行顯示。 ```js div>div { border: 1px solid #ccc; } ``` 容器`div`中的`div`具有灰色邊框。 ```js <div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> ``` 父容器`div`中有五個`div`。 ```js <button id="first" type="submit" class="ui grey button">First</button> <button id="all" type="submit" class="ui brown button">All</button> <button id="clear" type="submit" class="ui brown button">Clear</button> ``` 我們在文檔中有三個按鈕。第一個按鈕更改第一個內部`div`的背景顏色。全部按鈕更改所有內部`div`。并且“清除”按鈕清除`div`的背景。這些按鈕具有語義 UI 樣式。 ```js <script src="main.js"></script> ``` JavaScript 代碼位于`main.js`文件中。 `main.js` ```js document.getElementById("first").onclick = (e) => { let tag = document.querySelector(".container div:first-child"); tag.className = "selected"; }; document.getElementById("all").onclick = (e) => { let tags = document.querySelectorAll(".container div"); tags.forEach( tag => { tag.className = "selected"; }); }; document.getElementById("clear").onclick = (e) => { let tags = document.querySelectorAll(".container div"); tags.forEach( tag => { tag.classList.remove("selected"); }); }; ``` 在`main.js`文件中，我們實現了按鈕的功能。 ```js document.getElementById("first").onclick = (e) => { ``` 單擊監聽器將添加到具有`onclick`屬性的按鈕。用`getElementById()`選擇按鈕。 ```js let tag = document.querySelector(".container div:first-child"); ``` 使用`querySelector()`方法，我們在容器`div`中選擇了第一個內部`div`。 ```js tag.className = "selected"; ``` 我們將`selected`類添加到所選標簽。 ```js let tags = document.querySelectorAll(".container div"); ``` 使用`querySelectorAll()`，我們選擇所有內部`div`。 ```js tags.forEach( tag => { tag.className = "selected"; }); ``` 在`forEach()`循環中，我們遍歷列表并將類附加到每個元素。 ![Selecting elements with Document.querySelector](https://img.kancloud.cn/1b/5e/1b5ea830319902b0e668610b1a835b07_647x282.jpg) 圖：使用`Document.querySelector`選擇元素在屏幕截圖中，我們可以看到第一個`div`的背景色已更改。在本教程中，我們使用了`querySelector()`和`querySelectorAll()`方法。您可能也對以下相關教程感興趣： [JavaScript Lodash 教程](/javascript/lodash/)， [`Document.all`教程](/javascript/documentall/)， [JSON 服務器教程](/javascript/jsonserver/)，[從 URL 中讀取 JSON JavaScript](/articles/javascriptjsonurl/) ， [JavaScript 貪食蛇教程](/javascript/snake/)， [JQuery 教程](/web/jquery/)， [jQuery 自動完成教程](/articles/jqueryautocomplete/)或[使用 jQuery `DatePicker`](/articles/jquerydatepicker/) 。