«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Продолжается тема "Навигация по веб-странице". В прошлой статье были рассмотрены основные методы для получения доступа к узлам DOM-дерева.

Здесь будут рассмотрены аналогичные методы - которые позволяют получить доступ именно к элементам страницы. О DOM-элементах и DOM-узлах читайте здесь.

Для работы будет использоваться тестовая html-страница - та, с которой проводилась работа в прошлой статье. Что удобно, так как мы наглядно увидим различия в работе методов для получения доступа к узлам и к элементам веб-страницы.

HTML-код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div class="wrapper">
        <div class="first">
            <button></button>
            <button id="current"></button>
            <button></button>
        </div>
        <div class="second">
            <ul>
                <li>1</li>
                <li>2</li>
                <li data-current="3">3</li>
                
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
        <div class="third"></div>
    </div>
    <!-- renernh -->
    <script src="script.js"></script>
</body>
</html>	

Результат в Браузере



Свойства nextElementSibling и previousElementSibling

Свойства nextElementSibling и previousElementSibling - это аналоги методов nextSibling и previousSibling, которые позволяют получить доступ к следующему и предыдущему элементу находящемуся в этом же родителе.

Если такого элемента нет - возвращается null.

JavaScript-код

'use strict';

console.log(document.querySelector('[data-current="3"]').nextElementSibling);

console.log(document.querySelector('[data-current="3"]').previousElementSibling);

Результат в консоли

<li>4</li>

<li>2</li>

Результат в Браузере

В аналогичном примере №5 из прошлой заметки мы получили узлы. Сейчас мы получили элементы страницы.

Метод parentElement

Аналогом метода parentNode из примера Пример №4.1 прошлой статьи является метод parentElement, который возвращает родительский элемент.

JavaScript-код

'use strict';

console.log(document.querySelector('#current').parentElement);

Результат в Браузере

Хотя здесь мы видим тот же результат, что и в примере №4.1 прошлой статьи. Но при этом мы точно знаем, что получили именно элемент страницы.

Методы firstElementChild и lastElementChild

У методов firstChild и lastChild так же есть аналоги - это методы firstElementChild и lastElementChild.

Вернемся к примеру №3 из прошлой статьи.

JavaScript-код

'use strict';

console.log(document.body.firstElementChild);

console.log(document.body.lastElementChild);

Результат в Браузере

Результат в консоли

<div class="wrapper">...</div>
<script src="script.js"></script>

В консоли мы видим первый и последний дочерние элементы страницы. В то время, как в примере №3 из прошлой статьи (при использовании метода firstChild) мы увидели первый текстовый узел (перенос строки).

Метод childNodes - Нет аналогов?

Мы увидели, что у всех методов, рассмотренных в прошлой статье есть аналоги - кроме метода childNodes. Но иногда, для метода childNodes аналог создается вручную. Как это сделать?

Учитывая, что метод childNodes возвращает псевдомассив и, используя метод перебора for of, мы получаем возможность перебрать все дочерние элементы и избавиться от текстовых узлов - здесь нам помогут операторы break и continue, которые позволяют прервать цикл.

Пример №1 - Метод перебора for of

JavaScript-код

'use strict';

for(let node of document.body.childNodes){
    console.log(node);
}

Результат в Браузере

Результат в консоли

#text
div.wrapper
#text
#comment
#text
script

В этом примере, используя метод перебора for of, мы перебрали массив, который вернул метод childNodes - см. Пример №2 из прошлой статьи.

Теперь следует избавиться от текстовых узлов. Как это сделать?

Если взглянуть на свойства любого из узлов, и обратить внимание на свойство nodeName (имя узла), то мы увидим, что для текстовых узлов это свойство имеет значение "#text".

#text
assignedSlot: null
.
.
.
nodeName: "#text"
nodeType: 3
.
.
.

Свойством nodeName следует воспользоваться, чтобы исключить текстовые узлы.

Пример №2 - Избавляемся от текстовых узлов

JavaScript-код

for(let node of document.body.childNodes){
    if(node.nodeName == '#text'){
        continue;
    }
    console.log(node);
}

Результат в Браузере

Результат в консоли

div.wrapper
#comment
script

В примере было составлено условие, при котором вывод текстовых узлов исключается. То есть благодаря оператору continue цикл прерывается, если свойство nodeName текущего узла имеет значение "#text".

Итак, здесь были рассмотрены методы JS, которые позволяют получить доступ к элементам страницы.



Читайте также...

Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 4
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432
Популярные заметки
Последние заметки