querySelector, querySelectorAll
Info
In diesem Beispiel geht es darum eine Stelle im Dokument, genauso auszuwählen, wie man es mit CSS macht. Die vielen Möglichkeiten eine bestimmte Stelle zu wählen, stehen einem mit dem querySelector und dem querySelectorAll auch in Javascript zur Verfügung.
Auf dieser Seite sind mehrere article Elemente und section Elemente. Darin befinden sich p-Absätze. Alle p-Absätze in den article Elementen werden angesprochen und bekommen eine Farbe die anderen p-Absätze nicht.
Desweiteren wird mit querySelector nur das erste Element angesprochen, in diesem Beispiel der erste Absatz im ersten section hat eine border
document.querySelector("section > p")
Article
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore ex consectetur perferendis. Officiis natus dignissimos, eveniet hic animi sunt consequuntur. Similique error odit praesentium officiis reiciendis consectetur et, facere aliquam.
Rerum laborum, impedit! Praesentium, corrupti. Inventore aperiam cum reiciendis quisquam, sequi temporibus ullam adipisci unde impedit illum natus dolorem architecto dolores iste nisi rem sint, fugiat quos est maxime laboriosam.
Laborum nisi dolor excepturi voluptate debitis voluptatum et eos eveniet explicabo unde, voluptates optio libero accusamus ipsa harum quo minus, delectus consectetur rerum molestiae nemo porro quod. Aut nam, assumenda!
Section
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quo, quia sunt dicta ad itaque eveniet tenetur nam! Sunt vitae sequi, iusto dicta ea eos accusantium harum tenetur nisi minima.
Voluptates ipsa voluptatum hic, voluptatibus totam rem harum. Reprehenderit, cumque, libero? Commodi rerum culpa minus ut, possimus, repellendus maiores totam, explicabo excepturi adipisci placeat, beatae est mollitia! Expedita reiciendis, ratione?
Quaerat nisi laudantium, doloremque debitis amet facere vel? Eum dolorum excepturi sit modi quasi, aliquam, aliquid doloribus harum. Perferendis sapiente quisquam ad obcaecati odio ea! Magni, inventore repudiandae eos voluptas.
Article
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi qui ab, vero maxime quaerat tempore saepe odio quae necessitatibus assumenda, consectetur doloribus incidunt hic nam? Quia natus architecto, odit vero.
Eveniet earum, inventore? Voluptates praesentium sed nostrum facilis explicabo illum sint assumenda iure repudiandae debitis delectus, omnis dicta nihil in ipsa ea velit sequi magni perferendis commodi exercitationem amet ratione.
Eum, beatae, aperiam. Magnam maxime perferendis laudantium dolorem nobis rerum! Eligendi doloribus nostrum vitae, distinctio optio! Hic illo mollitia aperiam suscipit similique fuga consectetur id, sapiente optio inventore necessitatibus. Enim!