Меню
Спросить
JS

Работа с DOM. Выборка

13 ноября 2017
Работа с DOM. Выборка

Всем привет! Сегодня начнем изучение таких методов в JavaScript как getElementById, getElementsByClassName, getElementsByName и getElementByTagName. Они ваши спутники в мире JavaScript. С их помощью вы сможете выбирать html-элементы и дальше с ними работать, изменять их содержимое, менять внешний вид совершать перемещения, удаление и тд. В следующих частях мы будем учится делать все это, а пока научимся обращаться к элементам.
Начнем с того, что определимся - что такое DOM?
У каждого из нас есть семейное древо, в котором есть предки и их потомки.

Семейное дерево

HTML документ тоже можно представить в виде дерева элементов или дерево DOM.

DOM дерево

С помощью JavaScript мы можем перемещаться по этому дереву DOM, можем обратиться к какому-либо элементу и изменить его, прочитать или удалить. Для того чтобы обратиться к html объекту существует несколько методов.
В качестве примера буду использовать данный html документ.

  1. <!document html>
  2. <html>
  3.     <head>
  4.         <script src="script.js" async></script>
  5.     </head>
  6.     <body>
  7.         <ul class="nav">
  8.             <li id="gl">Главная</li>
  9.             <li id="nw">Новости</li>
  10.             <li id="vh">Вход</li>
  11.             <li id="rg">Регистрация</li>
  12.         </ul>
  13.         <div name="block">as</div>
  14.     </body>
  15. </html>

Откроем файл с JS кодом и объявим переменную el

  1. var
  2. el;

Она будет содержать в себе html-объект. И так, для того, чтобы обратиться к какому либо элементу DOM дерева для начала нужно обратится к самому DOMу или к самому документу html. Для этого используем команду document. Давайте обратимся к документу и выведем этот объект в консоль. Объект будет хранится в переменной.

  1. var
  2. el = document;

  3. console.log(el);

В итоге в консоли мы видим весь наш html-документ.

document

Так мы обратились к документу, теперь давайте обратимся к какому-нибудь его дочернему элементу, например к маркированному списку UL. К нему можно обратится с помощью двух методов getElementsByClassName и getElementsByTagName, пока используем первый.

Метод getElementsByClassName

Данный метод позволяет обратиться к элементу через его класс, в данном случае маркированный список UL имеет класс nav. После того как мы обратились к документу через точку пишем метод getElementsByClassName и в круглых скобках указываем класс элемента к которому обращаемся, в моем случае это класс nav. И так же выводим все в консоль.

  1. var
  2. el = document.getElementsByClassName('nav');

  3. console.log(el);

Как итог в консоли мы видим объект, который содержит в себе всю информацию о данном элементе с классом nav. Поехали к следующему методу.

Метод getElementById

Метод getElementById позволяет обратиться к элементу через его идентификатор, который естественно должен быть уникален. Обратимся к пункту LI с идентификатором nw и выведем в консоль.

  1. var
  2. el = document.getElementById('nw');

  3. console.log(el);

Как видим в консоли появился именно тот элемент к которому мы обратились.

Метод getElementsByTagName

С помощью данного метода мы можем обратиться к элементам через наименование тега. Для примера обратимся к тегу body.

  1. var
  2. el = document.getElementsByTagName('body');

  3. console.log(el);

Все работает, супер. Кстати, чтобы обратиться к body или head необязательно использовать данный метод, достаточно просто написать body или head.

  1. var
  2. el = document.body;

  3. console.log(el);

Как результат мы тоже обратимся к тому же тегу.

Метод getElementsByName

Метод getElementsByName позволяет обратится к элементу через его атрибут name, удобно использовать например при работе с формами. Обратимся к тегу div с атрибутом name, который равен значению block.

  1. var
  2. el = document.getElementsByName('block');

  3. console.log(el);

Аааатлично.

Заключение

На сегодня все, создайте свой документ и попробуйте обратится к элементам используя разные методы, дабы постичь неведомую силу. Всем спасибо, пока =)

Следующая статьяПредыдущая статья