2015-04-01 22:05:05 +02:00
|
|
|
# .cadoles-slide-title[API du DOM (2/5)]
|
2015-03-31 23:29:23 +02:00
|
|
|
|
|
|
|
|
**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>]
|
|
|
|
|
```
|
