5 обязательных методов работы с DOM в JavaScript 🔀

Я гордый сторонник ванильного JavaScript — я считаю, что это лучший способ достичь исключительного понимания самого популярного языка программирования в мире 🌍.

Если вы занимаетесь веб-разработкой, то часть вашего мастерства в JavaScript заключается в знании некоторых удобных методов DOM — вот 5 методов, которые вы, вероятно, не знали 🤫

1. closest()

Начнем с моего любимого метода DOM, closest(). Он вызывается на дочернем элементе и будет перемещаться вверх по дереву DOM, пока не найдет предка, который соответствует заданному селектору.

/*
    Example HTML 👇
    ------------------------------------------------
    <ul>
        <li>
            <strong class="myStrong">Nested</strong>
        </li>
        <li>Another list item ...</li>
    </ul>
*/

const myStrong = document.getElementById("myStrong");
const containingList = myStrong.closest("ul");

// containingList == <ul>
Вход в полноэкранный режим Выход из полноэкранного режима

Один из лучших случаев использования этого метода — когда вы подключились к слушателю событий, но не знаете, где вы находитесь в дереве DOM, и вам нужно найти родительский элемент ⬆️.

2. append()

Пришло время перестать использовать appendChild().

Метод append() позволяет добавлять несколько элементов одновременно — и это не только элементы. Вы также можете одновременно добавлять текст.

/*
    Example HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Apple</li>
        <li>Banana</li>
        <li>Carrot</li>
    </ul>
*/

const myList = document.getElementById("myList");
const pearListItem = document.createElement("li");
const lettuceListItem = document.createElement("li");

pearListItem.textContent = "Pear";
lettuceListItem.textContent = "Lettuce";

myList.append(pearListItem, lettuceListItem);
Вход в полноэкранный режим Выход из полноэкранного режима

Также обратите внимание — метод append является частью семейства удобных методов манипуляции DOM ➕.

3. insertAdjacentHTML()

Еще один из моих любимых методов — insertAdjacentHTML() — он похож на innerHTML тем, что позволяет добавлять HTML напрямую, но этот метод работает на относительной основе.

Вы передаете HTML, который хотите добавить, и позицию, куда его добавить, которая является относительной по отношению к элементу, на котором вы его вызываете.

Доступны следующие позиции:

/*
    Example HTML 👇
    ------------------------------------------------
    <button id="submitBtn">
        <span>Submit Form</span>
    </button>
*/

const submitBtn = document.getElementById("submitBtn");
const iconHtml = "<span class="icon">tick</span>";

submitBtn.insertAdjacentHTML("afterbegin", iconHtml);

/*
    Updated "submitBtn":
    <button id="submitBtn">
        <span class="icon">tick</span>
        <span>Submit Form</span>
    </button>
*/
Войти в полноэкранный режим Выход из полноэкранного режима

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

4. matches()

Если вы всегда используете слушатели событий, вам понравится эта функция.

Метод matches() вернет true, если элемент, для которого вы его вызываете, соответствует заданному селектору запроса 😎

/*
    Example HTML 👇
    ------------------------------------------------
    <button id="myButton">Click Me</button>
*/

const myButton = document.getElementById("myButton");

myButton.addEventListener("click", () => {
    if (myButton.matches(".has-errors")) {
        alert("You have errors!");
    }
});
Вход в полноэкранный режим Выйти из полноэкранного режима

Полезно, если вы находитесь внутри слушателя событий.

5. replaceWith()

Если вы оказались в ситуации, когда вам нужно обновить DOM новыми данными из бэкенда, этот метод может оказаться идеальным.

Метод replaceWith() позволяет вам заменить элемент одним или несколькими другими — точно так же, как и метод append(), рассмотренный ранее.

/*
    Example HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Red</li>
        <li class="purple">Purple</li>
    </ul>
*/

const purpleLi = document.querySelector(".purple");
const greenLi = document.createElement("li");
const blueLi = document.createElement("li");

greenLi.textContent = "Green";
blueLi.textContent = "Blue";

purpleLi.replaceWith(greenLi, blueLi);

/*
    Result HTML 👇
    ------------------------------------------------
    <ul id="myList">
        <li>Red</li>
        <li>Green</li>
        <li>Blue</li>
    </ul>
*/
Вход в полноэкранный режим Выход из полноэкранного режима

Краткий курс JavaScript DOM

Вы можете найти полный курс по JavaScript DOM, в котором рассматриваются некоторые темы, затронутые в этом посте, по ссылке ниже 👇.
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1

Приятного просмотра! 😎

Оцените статью
devanswers.ru
Добавить комментарий