javascript 中的 querySelector 與 querySelectorAll
- Susan Sarandon原創
- 2024-10-17 06:29:021007瀏覽
querySelector 與 querySelectorAll 都用於選擇和操作 DOM 元素，但它們有一些不同的行為
1.querySelector
傳回 DOM 中滿足 CSS 選擇器的第一個匹配元素。如果未找到符合項，則傳回 null。
<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
<script>
const link = document.querySelector("a")
console.log(link); // <a href="/html/">HTML</a>
</script>
</body>
</html>
在上面的程式碼範例中，我們可以看到在腳本標籤內我選擇了一個標籤，並且我們只獲得第一個匹配元素，而不是全部。
2.querySelectorAll
以 NodeList 的形式傳回所有符合的元素，NodeList 是元素的集合。如果未找到匹配項，則傳回一個空 NodeList。
<nav>
<!DOCTYPE html>
<html>
<body>
<nav class='nav'>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
<script>
const link = document.querySelectorAll("a")
console.log(link); // // [object NodeList] (4) [<a/>,<a/>,<a/>,<a/>]
</script>
</body>
</html>
在上面的程式碼範例中，我們可以看到在腳本標籤內我選擇了一個標籤，並且我們將所有符合的元素作為 NodeList 取得。
以上是javascript 中的 querySelector 與 querySelectorAll的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn