Объект document в JavaScript. Методы и свойства объекта document. Часть 2

Дата публикации: 2016-11-24

Объект document в JavaScript. Методы и свойства объекта document

От автора: приветствую вас, друзья. В этой статье мы с вами продолжим знакомство с объектом document в JavaScript, а также с его методами, позволяющими выбирать элементы верстки в документе и манипулировать выбранными элементами.

Итак, в предыдущей статье мы с вами познакомились с двумя методами для выборки элементов документа: метод getElementById и getElementsByClassName. Первый из них позволяет выбрать нужный элемент по его идентификатору, второй же позволяет получить коллекцию (массив) элементов по указанному классу.

Однако, это далеко не все методы объекта document для выборки элементов. Следующий полезный метод — getElementsByTagName. Этот метод позволяет получить коллекцию элементов по их имени, т.е. по имени тега (div, p, input и т.п.). Давайте попробуем найти все параграфы в этом кусочке верстки:

<div class="container" id="container1">
    <h1 id="h1">Hello, world!</h1>
    <p class="yellow">Yellow 1</p>
    <p class="grey">Grey</p>
    <p class="yellow">Yellow 2</p>
</div>
<div class="container"  id="container2">
    <p class="green">Grey</p>
</div>

<h1 id="h1">Hello, world!</h1>

<p class="yellow">Yellow 1</p>

<p class="yellow">Yellow 2</p>

</div>

</div>

var p = document.getElementsByTagName('p');
console.log(p);

1 2	var p = document.getElementsByTagName('p'); console.log(p);

В результате все 4 параграфа попали в коллецию:

Объект document в JavaScript. Методы и свойства объекта document

А что, если нам нужны не все параграфы на странице, а только параграфы определенного блока? Не проблема. Метод getElementsByTagName может искать элементы не только во всем документе, но и в локальном его участке:

var p = document.getElementById('container1').getElementsByTagName('p');
console.log(p);

1 2	var p = document.getElementById('container1').getElementsByTagName('p'); console.log(p);

Объект document в JavaScript. Методы и свойства объекта document

В итоге мы получили только нужные элементы страницы. Также метод getElementsByTagName в качестве параметра может применить звездочку (*), это будет означать, что мы хотим получить все элементы, а не какой-то конкретный. Пример:

var p = document.getElementById('container1').getElementsByTagName('*');
console.log(p);

1 2	var p = document.getElementById('container1').getElementsByTagName('*'); console.log(p);

Объект document в JavaScript. Методы и свойства объекта document

Следующий полезный метод — querySelectorAll. Он возвращает все элементы по переданному селектору CSS. В качестве примера давайте выберем все параграфы с классом yellow внутри первого блока:

var p = document.getElementById('container1').querySelectorAll('p.yellow');
console.log(p);

1 2	var p = document.getElementById('container1').querySelectorAll('p.yellow'); console.log(p);

Объект document в JavaScript. Методы и свойства объекта document

Ну и еще один метод — querySelector. Его отличие от предыдущего в том, что querySelector возвращает лишь один, первый попавшийся элемент:

var p = document.getElementById('container1').querySelector('p.yellow');
console.log(p);

1 2	var p = document.getElementById('container1').querySelector('p.yellow'); console.log(p);

Объект document в JavaScript. Методы и свойства объекта document

И последний метод, с которым мы познакомимся, — метод closest(). Этот метод ищет ближайший родительский элемент по заданному селектору. Пример:

<div class="container" id="container1">
    <div class="row" id="row">
        <div class="col-md-12" id="col">
            <h1 id="h1">Hello, world!</h1>
            <p class="yellow">Yellow 1</p>
            <p class="grey">Grey</p>
            <p class="yellow">Yellow 2</p>
        </div>
    </div>
</div>

<h1 id="h1">Hello, world!</h1>

<p class="yellow">Yellow 1</p>

<p class="yellow">Yellow 2</p>

</div>

var elem = document.getElementById('container1').querySelector('h1');
console.log(elem.closest('div'));
console.log(elem.closest('#row'));
console.log(elem.closest('.container'));
console.log(elem.closest('h1'));

var elem = document.getElementById('container1').querySelector('h1');

console.log(elem.closest('div'));

console.log(elem.closest('#row'));

console.log(elem.closest('.container'));

console.log(elem.closest('h1'));

Объект document в JavaScript. Методы и свойства объекта document

Обратите внимание на последний вывод в консоль. Кроме родительского элемента, сам элемент также участвует в поиске, так что будьте аккуратны, поскольку вместо родительского элемента можно выбрать и сам элемент.

На этом у меня сегодня все. Если вы хотите больше узнать о JavaScript, тогда рекомендую обратить свое внимание на уроки по JavaScript и отдельный курс по языку JavaScript. Удачи!

Метки: JavaScript