Rumah >hujung hadapan web >tutorial js >querySelector vs querySelectorAll dalam javascript

querySelector vs querySelectorAll dalam javascript

Susan Sarandonasal: 2024-10-17 06:29:021032semak imbas

querySelector vs querySelectorAll in javascript

querySelector vs querySelectorAll both are used select and manupulate DOM elements but they have some different behavior

1.querySelector
Returns the first matching element in the DOM that satisfies the CSS selector. If no match is found, it returns 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>

in the above code example we can see inside script tag i have selected a tag and we are getting only first one matching element not all.

2.querySelectorAll
Returns all matching elements as a NodeList, which is a collection of elements. If no match is found, it returns an empty 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>

in the above code example we can see inside script tag i have selected a tag and we are getting all matching elements as a NodeList.

Atas ialah kandungan terperinci querySelector vs querySelectorAll dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css NULL if select Collection dom

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript kaedah .then / .when.Artikel seterusnya：JavaScript kaedah .then / .when.

Artikel berkaitan

Lihat lagi