formations/javascript/base/api-dom-2.md

1.0 KiB

.cadoles-slide-title[API du DOM (2/5)]

Sélection des éléments du DOM

<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>
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>]