P1C2 JS web - Accédez aux éléments du DOM

index.html

<article>
  <p class="important">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<article>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <ul>
    <li>Elément 1</li>
    <li>Elément 2</li>
    <li>Elément 3</li>
  </ul>
  <p id="main-content">Ce contenu est spécial.</p>
  <ul class="important">
    <li>Elément 4</li>
    <li>Elément 5</li>
    <li>Elément 6</li>
  </ul>
</article>
<article>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <ul>
    <li>Elément 7</li>
    <li>Elément 8</li>
    <li>Elément 9</li>
  </ul>
  </p>
</article>
<p class="important">
  Il n'y a plus d'article
<ul>
  <li>Elément 10</li>
  <li>Elément 11</li>
  <li>Elément 12</li>
</ul>
</p>

p1c2-js-web-accedez-aux-elements-du-dom.markdown

P1C2 JS web - Accédez aux éléments du DOM

A Pen by khiter med achraf on CodePen.

License.

script.js

const listeEl = document.querySelector("article > ul.important > li")

console.log(listeEl.nextElementSibling);

const mainContent = document.getElementById('main-content');
console.log(mainContent) ;

const elt_important = document.getElementsByClassName ('important');
console.log(elt_important[2]) ;

const articles = document.getElementsByTagName('article');
console.log(articles[2]);

const eltLiImportant = document.querySelectorAll('article > ul.important > li') ; 
console.log(eltLiImportant[0]);
console.log(eltLiImportant[1]);
console.log(eltLiImportant[2]);

const firstParent = eltLiImportant[2].parentElement ; 
const secondParent = firstParent.parentElement ; 
const nextElt = secondParent.nextElementSibling ; 
const li7 = nextElt.querySelector('ul > li');
console.log(li7);

style.css

article {
  margin: auto;
  margin-bottom: 20px;
  width: 90%;
  border: 1px solid black;
  padding: 10px;
}

#main-content {
  font-weight: bold;
  color: red;
}

.important {
  font-style: italic;
}

manipulating the DOM using {
getElementById()
getElemntsByClassName()
getElemntsByTagName()
querySelector() .....

}