Опубликовано Оставить комментарий

querySelectorAll — выборка JavaScript-коллекций

querySelectorAll - метод document для выбора коллекций
querySelectorAll — метод document для выбора коллекций

getElementsByTagName не единственный метод объекта document, для выборки HTML-коллекций из дерева DOM. querySelector() и querySelectorAll() — удобные методы выборки по селектору (очень похожи на выборку элементов через jQuery). Подробное описание метода в документации Мозиллы.

querySelectorAll

Метод принимает селектор в формате CSS-селектора (строчный параметр) и возвращает коллекцию HTML-элементов, подходящих под селектор.

Пример работы document.querySelectorAll() от (@htmllabru) на CodePen.

/* document.querySelectorAll(''); */
var arrP = document.querySelectorAll('p.some');
for( let i = 0; i < arrP.length; i++){
  arrP[i]["style"].background = "#ffc"
}

HTML-разметка для примера работы метода:

<h1>Текст</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam blanditiis, accusamus earum esse quasi, reprehenderit. Rerum aperiam corporis debitis tempore vitae fugiat praesentium vero accusamus eum, maiores tempora possimus incidunt ex architecto quos, dolorem, asperiores excepturi enim quas id sequi? Hic recusandae quia cum eos assumenda, dolore ratione ipsam molestias?</p>
<p class="some" >Non molestias ea enim voluptate sapiente, in voluptatum eius qui, ducimus error libero. Aut tenetur doloremque temporibus veritatis? Velit quis mollitia, delectus illo id sint? Suscipit libero atque id saepe reiciendis repellendus hic omnis voluptatem eius nemo aspernatur, ab odit distinctio vitae, voluptate error ipsam deleniti sunt eligendi. Itaque, magni.</p>
<p  class="some" >Perspiciatis modi, nobis repudiandae iste. In quam, maxime, numquam quo id blanditiis, ipsa quisquam accusantium minus quaerat deserunt corporis nesciunt voluptatum consequuntur illum ratione illo qui dignissimos explicabo et possimus? Quod et obcaecati, ullam illo cumque facilis at voluptas neque debitis ducimus, nesciunt aspernatur quae harum quo minima! Aliquam, cum.</p>
<p>Id in obcaecati optio ullam sint modi eligendi aliquid, laudantium aliquam neque dolorum porro beatae omnis quis perferendis incidunt sequi ipsa nemo officia fugiat. Impedit dolor provident fugiat, a, voluptates, magni natus perspiciatis magnam aut earum cumque. Provident optio neque, eaque ab placeat laborum mollitia incidunt earum, possimus hic dolorum?</p>

Добавить комментарий