JavaScript - DOM: методы для поиска узлов

На этом уроке мы рассмотрим методы объекта document, которые предназначены для поиска узла или коллекции узлов во всём документе. А также методы объекта node (узла), которые выполняют аналогичные действия, но уже среди своих дочерних узлов.

На предыдущем уроке мы рассмотрели свойства, с помощью которых мы можем перемещаться по дереву и находить нужные нам узлы. Но, поиск узлов с помощью их свойств занятие очень трудное и не эффективное. Поэтому чтобы найти узлы в дереве, веб-разработчики обычно используют специально предназначенные для этого методы объекта document или узла (node).

Метод getElementById(elementID) возвращает элемент в документе, имеющий указанный идентификатор (id="elementID"), в виде объекта Node (узла). Если элемента с указанным идентификатором не существует, то данный метод возвращает значение null.

В соответствии стандартом у Вас в документе не может быть несколько элементов с одинаковым значением атрибута id, т.е. значение идентификатора должны быть уникальным в пределах одного документа. Тем не менее, если у Вас в документе существуют несколько элементов с указанным id, то метод getElementById() вернёт первый найденный элемент.

document.getElementById(elementID)

Данный метод имеет один обязательный параметр (elementID), представляющий собой строку, содержащую значение атрибута id элемента, который Вы хотите получить.

JavaScript - метод getElementById()

Например, изменить цвет текста элемента, имеющего id="nameArticie".

<html>
  <head></head>
  <body>
    <h1 id="nameArticle">Название статьи</h1>
    <ul class="list">
      <li>1 пункт</li>
      <li>2 пункт</li>
      <li>3 пункт</li>
    </ul>
    <script>
      //Получить элемент (узел), имеющий id="nameArticle"
      var nameArticle = document.getElementById("nameArticle");
      //изменить цвет текста элемента
      nameArticle.style.color = "blue";
    </script>
  </body>
</html>

Метод getElementsByClassName(className) возвращает все найденные элементы в документе (для document) или среди дочерних узлов (для node), имеющих указанное имя класса (class="className"), в виде объекта NodeList (коллекции узлов). Другими словами данный метод возвращает объект NodeList, представляющий собой коллекцию элементов (узлов), имеющих указанное в параметре этого метода имя класса.

Элементы (узлы) добавляются в коллекцию в том порядке, в котором они встречаются в дереве. Получение определённого узла в коллекции осуществляется по индексу. Отсчёт элементов (узлов) в коллекции начинается с 0.

Для получения количество найденных узлов Вы необходимо использовать свойство length объекта NodeList. А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:

var elementsList = document.getElementsByClassName("list");
for (var i=0; i<elementsList.length; i++) {
 //elementsList[i] - i узел в коллекции NodeList
}
document.getElementByClassName(className);
node(узел).getElementByClassName(className);

Данный метод имеет один обязательный параметр (className), представляющий собой строку, содержащую название класса элементов, которые Вы хотите получить. Если вы хотите получить элементы, имеющие несколько указанных классов, то их необходимо в параметре данного метода разделить с помощью пробела. Например, получить коллекцию узлов, имеющих классы classl и class2:

document.getElementsByClassName("classl class2");

JavaScript - метод getElementsByClassName()

Например, изменить цвет фона элементов, имеющих класс list:

<html>
  <head></head>
  <body>
    <h1 id="nameArticle">Название статьи</h1>
    <ul class="list">
      <li>1 пункт</li>
      <li>2 пункт</li>
      <li>3 пункт</li>
    </ul>
    <ul class="list">
      <li>1 пункт</li>
      <li>2 пункт</li>
    </ul>
    <script>
      //Получить коллекцию элементов, имеющих класс list
      var elementsList = document.getElementsByClassName("list");
      //перебрать все элементы в коллекции
      for (var i=0; i<elementsList.length; i++) {
        //изменить цвет фона элемента
        elementsList[i].style.backgroundColor = "yellow";
      }
    </script>
  </body>
</html>

Например, получить коллекцию элементов (узлов), имеющих класс list. Далее получить 2 узел в этой коллекции, т.е. узел имеющий индекс 1. После этого изменить цвет фона полученного узла.

//Получить коллекцию элементов, имеющих класс list
var elementsList = document.getElementsByClassName("list");
//Получить 2 узел в коллекции
var secondList = elementsList[1];
//Изменить цвет фона элемента
secondList.style.backgroundColor = "red";  

Метод getElementsByTagName(tagname) возвращает все найденные элементы в документе (для document) или среди дочерних узлов (для node), имеющих указанный тег, в виде объекта NodeList (коллекции узлов). Получение определённого узла в коллекции осуществляется по индексу. Отсчёт элементов (узлов) в коллекции начинается с 0.

document.getElementsByTagName(tagname);
node(узел).getElementsByTagName(tagname);

Данный метод имеет один обязательный параметр (tagname), представляющий собой строку, содержащую имя тега, которое указывается прописными буквами. Если в качестве параметра указать строку, содержащую звёздочку ("*"), то мы получим все элементы в документе (для объекта document) или все дочерние элементы узла (для объекта node).

Для получения количество найденных узлов, содержащихся в коллекции, необходимо использовать свойство length объекта NodeList. А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:

var elementsList = document.getElementsByTagName("LI");
for (var i=0; i<elementsList.length; i++) {
 //elementsList[i] - i узел в коллекции NodeList
}

JavaScript - метод getElementsByTagName()

Например, изменить цвет фона элементов LI:

<html>
  <head></head>
  <body>
    <h1 id="nameArticle">Название статьи</h1>
    <ul class="list">
      <li>1 пункт</li>
      <li>2 пункт</li>
      <li>3 пункт</li>
    </ul>
    <script>
      //Получить коллекцию элементов LI
      var elementsList = document.getElementsByTagName("LI");
      //перебрать все элементы в коллекции
      for (var i=0; i<elementsList.length; i++) {
        //изменить цвет фона элемента
        elementsList[i].style.backgroundColor = "pink";
      }
    </script>
  </body>
</html>

Например, получить коллекцию элементов UL. Далее получить 1 узел в этой коллекции, т.е. узел имеющий индекс 0. После этого получить коллекцию дочерних узлов LI для этого узла. И в заключение изменить размер шрифта каждого элемента в этой коллекции.

//Получить коллекцию элементов UL
var elementsUL = document.getElementsByTagName("UL");
//Получить 1 узел в этой коллекции
var elementUL = elementsUL[0]; 
//Получить коллекцию Дочерних элементов LI узла elementUL
var elementsLI = elementUL.getElementsByTagName("LI");
//перебрать все элементы в коллекции
for (var i=0; i<elementsLI.length; i++) {
  //изменить цвет фона элемента
  elementsLI[i].style.fontSize = "30px";
}

Метод getElementsByName(name) возвращает все найденные элементы в документе, имеющих указанное имя (значение атрибута name), в виде объекта NodeList (коллекции узлов).

Элементы (узлы) добавляются в коллекцию в том порядке, в котором они встречаются в дереве. Получение определённого узла в коллекции осуществляется по индексу. Отсчёт элементов (узлов) в коллекции начинается с 0.

Для получения количество найденных узлов необходимо использовать свойство length объекта NodeList. А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:

var elementsList = document.getElementsByName("phone");
for (var i=0; i<elementsList.length; i++) {
 //elementsList[i] - i узел в коллекции NodeList
}
Примечание: В HTML5 атрибут name признан устаревшим, и он был заменён для большинства элементов атрибутом id.
document.getElementsByName(name)

Данный метод имеет один обязательный параметр (name), представляющий собой строку, содержащую значение атрибута name.

JavaScript - метод getElementsByName()

Например, изменить цвет фона элементов, имеющих атрибут name со значением phone (name="phone"):

<html>
  <head></head>
  <body>
    Phone:
    <input type="text" name="phone">
    Another phone:
    <input type="text" name="phone">
    <p>...</p>
    <p>...</p>
    <script>
      //Получить коллекцию элементов, имеющих атрибут name со значением phone
      var elementsList = document.getElementsByName("phone");
      //перебрать все элементы в коллекции
      for (var i=0; i<elementsList.length; i++) {
        //изменить цвет фона элемента
        elementsList[i].style.backgroundColor = "pink";
      }
    </script>
  </body>
</html>

Метод querySelector() возвращает первый найденный элемент в документе (для document) или среди дочерних узлов (для node), который соответствует CSS селектору, указанному в качестве параметра данного метода. Если ни один элемент не соответствует CSS селектору, то данный метод возвращает null.

document.querySelector(cssSelector)
node.querySelector(cssSelector)

Данный метод имеет один обязательный параметр (cssSelector), представляющий собой строку, содержащую CSS селектор, в соответствии с которым выбирается элемент.

JavaScript - метод querySelector()

Например, изменить цвет текста первого найденного элемента, соответствующего селектору #main p:

<html>
  <head></head>
  <body>
    <div id="main">
      <h1>...</h1>
      <p>...</p>
      <h2>...</h2>
      <p>...</p>
    </div>
    <div id="sidebar">
      <p>...</p>
      <p>...</p>
    </div>
    <script>
      //Получить первый найденный элемент, соответствующий селектору #main p
      var elementP = document.querySelector("#main p");
      //изменить цвет текста элемента
      elementP.style.color = "blue";
    </script>
  </body>
</html>

Например, получить коллекцию элементов DIV в документе. Далее получить 1 узел в этой коллекции, т.е. узел имеющий индекс 0. Для этого узла найти среди его дочерних узлов первый элемент, который соответсвуют CSS селектору h1+p. После этого изменить размер шрифта этого элемента.

//Получить коллекцию элементов DIV
var elementsDIV = document.getElementsByTagName("DIV");
//Получить 1 узел в этой коллекции
var elementDIV = elementsDIV[0]; 
//Получить узел p, расположенный сразу же после узла h1 
//Поиск узла производить среди дочерних узлов узла, который хранится в переменной elementDIV
var elementP = elementDIV.querySelector("h1+p");
//изменить размер шрифта элемента
elementP.style.fontSize = "30px";

Метод querySelectorAll() возвращает все найденные элементы в документе (для document) или среди дочерних узлов (для node), которые соответствуют CSS селектору, указанному в качестве параметра данного метода, в виде объекта NodeList (коллекции узлов). Обращение к узлам в коллекции осуществляется по индексу. Отсчёт элементов (узлов) в коллекции начинается с 0.

Для получения количество найденных узлов необходимо использовать свойство length объекта NodeList. А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:

var elementsList = document.querySelectorAll("#main p");
for (var i=0; i<elementsList.length; i++) {
 //elementsList[i] - i узел в коллекции NodeList
}
document.querySelectorAll(cssSelector);
node(узел).querySelectorAll(cssSelector);

Данный метод имеет один обязательный параметр (cssSelector), представляющий собой строку, содержащую CSS селектор, в соответствии с которым выбираются элементы. Для указания нескольких селекторов в параметре этого метода, их необходимо разделить между собой через запятую.

JavaScript - метод querySelectorAll()

Например, изменить цвет текста элементов, соответствующих селектору #main p:

<html>
  <head></head>
  <body>
    <div id="main">
      <h1>...</h1>
      <p>...</p>
      <h2>...</h2>
      <p>...</p>
    </div>
    <div id="sidebar">
      <p>...</p>
      <p>...</p>
    </div>
    <script>
      //Получить коллекцию элементов, соответствующих селектору #main p
      var elementsList = document.querySelectorAll("#main p");
      //перебрать все элементы в коллекции
      for (var i=0; i<elementsList.length; i++) {
        //изменить цвет текста элемента
        elementsList[i].style.color = "blue";
      }
    </script>
  </body>
</html>

Например, получить дочерний узел, имеющий атрибут id со значением sidebar. Изменить цвет фона дочерних элементов p узла, полученного на предыдущем шаге:

//получить элемент (узел), имеющий id="sidebar"
var sidebar = document.getElementById("sidebar");
//получить коллекцию узлов, соответствующих селектору "p"
var elementsListP = sidebar.querySelectorAll("p");
//перебрать все элементы в коллекции
for (var i=0; i<elementsListP.length; i++) {
  //изменить цвет фона элемента
  elementsListP[i].style.backgroundColor = "green";
}

Написать код на языке JavaScript используя методы getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector(), querySelectorAll() для следующих заданий:

  1. Получить все элементы p, расположенные в блоке main;
  2. Получить блок aside, расположенный в контейнере div;
  3. Получить блок footer, расположенный в контейнере body.
<html>
  <head></head>
  <body>
    <div class="container">
      <header></header>
      <div class="row">
        <main class="col-xs-8">
         <h1></h1>
         <p></p>
         <h2></h2>
         <p></p>
         <h2></h2>
         <p></p>         
        </main>
        <aside class="col-xs-4">
          <div></div>
          <div></div>
        </aside>
      </div>
    </div>
    <footer></footer>
  </body>
</html>
Каждое задание выполнить как можно большим числом различных способов.


   JavaScript и jQuery 0    3651 0

Комментарии (5)

  1. Денис # 0
    Благодарю за информацию!

    Навела на мысль, что поиск соседних элементов у родителя можно сделать ещё проще. И самое приятное, что работает!

    Долгое время не занимался темой, порядком подзабыл некоторые детали, тут прямо как раз то, что нужно.
    1. Карим Азиев # 0
      Добрый день. А где можно сверить решения задач?
      1. Александр Мальцев # 0
        Данные задачи наиболее просто решаются с помощью методов querySelector() и querySelectorAll(). Кроме этого вы можете замерять время, которые уходит на выполнение кода. Чем меньше потребуется время на выполнение кода, тем он получится более быстродействующим. Количество миллисекунд данные методы выводят в консоль браузера.
        1 задача (0.154ms — зависит от браузера):
        console.time('timer1');
        document.querySelectorAll('main p');
        console.timeEnd('timer1'); 
        
        2 задача (0.053ms — зависит от браузера):
        console.time('timer2');
        document.querySelector('div>aside');
        console.timeEnd('timer2')
        
        3 задача (0.053ms — зависит от браузера):
        console.time('timer3');
        document.querySelector('body>footer');
        console.timeEnd('timer3'); 
        
        Например, 1 вариант можно ещё решить так:
        console.time('timer4');
        document.getElementsByTagName('main')[0].getElementsByTagName('p');
        console.timeEnd('timer4');
        
        Но он выполняется намного дольше (0.709ms) чем 1 вариант на том же устройстве.
      2. Карим Азиев # 0
        Спасибо, но я не конкретно об этой задаче, а вообще) Думал, есть где то песочница с ответами. В основном, задания несложные, но иногда бывает, что хочется сверить решение.
        1. Александр Мальцев # 0
          Песочницы с ответами нет. Если есть какие-то непонятные моменты при решении задач или просто хотите поделиться ответами, то можете воспользоваться комментариями.

        Вы должны авторизоваться, чтобы оставлять комментарии.