35 lines
1.0 KiB
Markdown
35 lines
1.0 KiB
Markdown
|
# .cadoles-slide-title[API du DOM (2/4)]
|
||
|
|
|
||
|
|
**Sélection des éléments du DOM**
|
||
|
|
```html
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="my-container">
|
||
|
|
<ul class="my-list first-list">
|
||
|
|
<li>Item 1</li>
|
||
|
|
<li>Item 2</li>
|
||
|
|
<li>Item 3</li>
|
||
|
|
</ul>
|
||
|
|
<ul class="my-list second-list">
|
||
|
|
<li>Item 1</li>
|
||
|
|
<li>Item 2</li>
|
||
|
|
<li>Item 3</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
```
|
||
|
|
```js
|
||
|
|
document.head // -> <head>...</head>
|
||
|
|
document.body // -> <body>...</body>
|
||
|
|
document.body.children // -> [<div id="my-container">...</div>]
|
||
|
|
document.body.parentElement // -> <html>...</html>
|
||
|
|
|
||
|
|
document.getElementById('my-container'); // -> <div id="my-container-1">...</div>
|
||
|
|
document.querySelector('.my-list') // -> <ul class="my-list first-list">...</ul>
|
||
|
|
document.querySelectorAll('.my-list')
|
||
|
|
// -> [<ul class="my-list first-list">...</ul>, <ul class="my-list second-list">...</ul>]
|
||
|
|
```
|