ホームページ > 記事 > ウェブフロントエンド > JavaScriptのquerySelectorとquerySelectorAll
JavaScriptのquerySelectorとquerySelectorAll
- Susan Sarandonオリジナル
- 2024-10-17 06:29:021007ブラウズ
querySelector と querySelectorAll はどちらも DOM 要素の選択と操作に使用されますが、動作がいくつか異なります
1.querySelector
CSS セレクターを満たす、DOM 内の最初に一致する要素を返します。一致するものが見つからない場合は、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>
上記のコード例では、タグを選択したスクリプト タグ内で、一致する要素がすべてではなく最初の 1 つだけを取得していることがわかります。
2.querySelectorAll
一致するすべての要素を要素のコレクションである 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 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。