add: file (#27924)
This commit is contained in:
committed by
The Coding Aviator
parent
e023e9d603
commit
b6e6d28f25
43
guide/english/javascript/html-dom-queryselectorall/index.md
Normal file
43
guide/english/javascript/html-dom-queryselectorall/index.md
Normal file
@ -0,0 +1,43 @@
|
||||
---
|
||||
title: HTML DOM querySelectorAll
|
||||
---
|
||||
|
||||
The Document method `querySelectorAll()` returns a static (not live) `NodeList` representing a list of the document's elements that match the specified group of selectors.
|
||||
|
||||
**HTML content:**
|
||||
|
||||
```html
|
||||
<div class="class-example">first div</div>
|
||||
<div class="class-example">second div</div>
|
||||
<a>element-example</a>
|
||||
<a>another-element-example</a>
|
||||
```
|
||||
|
||||
**JavaScript content:**
|
||||
|
||||
```javascript
|
||||
document.querySelectorAll(".class-example"); // Returns all of the elements with class `class-example`
|
||||
document.querySelectorAll("a"); // Returns all `a` element
|
||||
```
|
||||
|
||||
**Note**
|
||||
`querySelectorAll()` behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.
|
||||
|
||||
Consider this HTML, with its three nested `<div>` blocks.
|
||||
```html
|
||||
<div class="outer">
|
||||
<div class="select">
|
||||
<div class="inner">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
```javascript
|
||||
var select = document.querySelector('.select');
|
||||
var inner = select.querySelectorAll('.outer .inner');
|
||||
inner.length; // 1, not 0!
|
||||
```
|
||||
|
||||
#### More Information:
|
||||
|
||||
<a href='https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll' target='_blank' rel='nofollow'>MDN - document.querySelectorAll()</a>
|
Reference in New Issue
Block a user