W3Docs

Тема

Русский

Освоение манипуляций с DOM в JavaScript ​

JavaScript DOM (Document Object Model) манипуляции — это фундаментальный навык для веб-разработчиков. Он позволяет динамически изменять содержимое и структуру веб-страницы. В этом подробном руководстве мы рассмотрим различные техники и методы манипуляции с DOM с помощью JavaScript. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это руководство предоставит вам ценные знания и примеры для совершенствования ваших навыков.

Изменение содержимого и атрибутов элементов ​

Манипуляции с содержимым и атрибутами элементов DOM являются ключевым аспектом динамической веб-разработки. Изменяя содержимое, мы можем обновлять текст или HTML внутри элемента. Изменяя атрибуты, мы можем модифицировать свойства, такие как class, id или src. JavaScript предоставляет мощные методы для выполнения этих задач, позволяя создавать отзывчивые и интерактивные веб-приложения. Давайте рассмотрим, как эффективно использовать innerHTML, textContent, setAttribute и getAttribute.

Изменение содержимого элемента ​

Мы можем изменить содержимое элемента с помощью свойств innerHTML или textContent.

innerHTML vs textContent ​

innerHTML позволяет устанавливать или получать HTML-содержимое элемента, включая любые HTML-теги.

html
<!DOCTYPE html>
<html>
<head>
    <title>innerHTML vs textContent</title>
    <style>
        .content-container {
            margin: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .html-content {
            color: red;
        }
    </style>
</head>
<body>
    <div class="content-container">
        <p id="content">Original paragraph content.</p>
        <button id="change-innerHTML">Change using innerHTML</button>
        <button id="change-textContent">Change using textContent</button>
    </div>

    <script>
        const content = document.getElementById('content');
        const innerHTMLButton = document.getElementById('change-innerHTML');
        const textContentButton = document.getElementById('change-textContent');

        innerHTMLButton.addEventListener('click', () => {
            content.innerHTML = 'New content with <strong class="html-content">HTML</strong> tags.';
        });

        textContentButton.addEventListener('click', () => {
            content.textContent = 'Updated paragraph content without HTML tags.';
        });
    </script>
</body>
</html>
Try it Yourself »

Пояснение:

  • innerHTML позволяет устанавливать или получать HTML-содержимое элемента, включая любые HTML-теги. В примере нажатие кнопки «Change using innerHTML» заменит содержимое абзаца новым содержимым, включающим HTML-теги, что изменит внешний вид текста.
  • textContent устанавливает или получает текстовое содержимое элемента без разбора HTML-тегов. Нажатие кнопки «Change using textContent» заменит содержимое абзаца обычным текстом, игнорируя любые HTML-теги.

INFO

Используйте textContent при вставке контента, созданного пользователем, чтобы избежать рисков безопасности, таких как XSS (межсайтовый скриптинг).

Изменение атрибутов элемента ​

Мы можем изменять атрибуты элемента с помощью метода setAttribute и получать их с помощью метода getAttribute. Эти методы полезны для динамического изменения элементов на основе взаимодействия с пользователем или других событий.

html
<!DOCTYPE html>
<html>
<head>
    <title>setAttribute and getAttribute</title>
</head>
<body>
    <div id="container" class="initial-class">Container content</div>
    <button id="change-attribute">Change Attribute</button>
    <button id="get-attribute">Get Attribute</button>

    <script>
        const container = document.getElementById('container');
        const changeAttributeButton = document.getElementById('change-attribute');
        const getAttributeButton = document.getElementById('get-attribute');

        changeAttributeButton.addEventListener('click', () => {
            container.setAttribute('class', 'new-class');
            alert('Class attribute changed to "new-class"');
        });

        getAttributeButton.addEventListener('click', () => {
            const className = container.getAttribute('class');
            alert(`Current class attribute: ${className}`);
        });
    </script>
</body>
</html>
Try it Yourself »

Пояснение:

  • setAttribute('attributeName', 'value'): Этот метод позволяет установить новое значение для указанного атрибута элемента. В примере нажатие кнопки «Change Attribute» изменяет атрибут class у <div> с «initial-class» на «new-class».
  • getAttribute('attributeName'): Этот метод возвращает текущее значение указанного атрибута. Нажатие кнопки «Get Attribute» показывает всплывающее окно с текущим значением атрибута class у <div>.

INFO

Всегда используйте setAttribute и getAttribute для пользовательских и динамически генерируемых атрибутов. Для манипуляций с классами рекомендуется использовать classList.add(), classList.remove() и classList.toggle() для более чистого и безопасного синтаксиса.

javascript
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');

Добавление и удаление элементов ​

Мы можем добавлять новые элементы в DOM или удалять существующие.

Добавление элементов ​

Чтобы добавить новые элементы в DOM, сначала создаем их с помощью метода createElement, затем добавляем их к существующему элементу с помощью appendChild или вставляем в определенную позицию с помощью insertBefore.

createElement(), appendChild(), insertBefore() ​

html
<!DOCTYPE html>
<html>
<head>
    <title>Adding Elements</title>
</head>
<body>
    <div id="task-list">
        <h2>Task List</h2>
        <ul id="tasks">
            <li>Initial task</li>
        </ul>
        <input type="text" id="new-task" placeholder="New task">
        <button id="add-task">Add Task</button>
        <button id="insert-before">Insert Before First Task</button>
    </div>

    <script>
        const taskList = document.getElementById('tasks');
        const newTaskInput = document.getElementById('new-task');
        const addTaskButton = document.getElementById('add-task');
        const insertBeforeButton = document.getElementById('insert-before');

        addTaskButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                taskList.appendChild(newTask);
                newTaskInput.value = '';
            }
        });

        insertBeforeButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                const firstTask = taskList.firstElementChild;
                taskList.insertBefore(newTask, firstTask);
            }
        });
    </script>
</body>
</html>
Try it Yourself »

Пояснение:

  • createElement('tagName'): Этот метод создает новый элемент, указанный в tagName. Например, document.createElement('li') создает новый элемент <li>.
  • appendChild(newElement): Этот метод добавляет новый дочерний элемент к указанному родительскому элементу. В примере нажатие кнопки «Add Task» создает новый элемент списка (<li>) и добавляет его в список задач (<ul>).
  • insertBefore(newElement, referenceElement): Этот метод вставляет новый элемент перед указанным элементом-ссылкой в том же родительском элементе. Нажатие кнопки «Insert Before First Task» создает новый элемент списка (<li>) и вставляет его перед первой задачей в списке.

note

Для прямой вставки HTML-строк рассмотрите использование insertAdjacentHTML(). Для замены существующего элемента element.replaceWith(newElement) является современной альтернативой комбинации remove() и appendChild().

Удаление элементов ​

Чтобы удалить элемент, мы можем использовать современный метод element.remove().

html
<!DOCTYPE html>
<html>
<head>
    <title>Removing Elements</title>
</head>
<body>
    <div id="container">
        <p id="paragraph">This is a paragraph.</p>
        <button id="remove-paragraph">Remove Paragraph</button>
    </div>

    <script>
        const container = document.getElementById('container');
        const paragraph = document.getElementById('paragraph');
        const removeParagraphButton = document.getElementById('remove-paragraph');

        removeParagraphButton.addEventListener('click', () => {
            paragraph.remove();
        });
    </script>
</body>
</html>
Try it Yourself »

Пояснение:

  • element.remove(): Этот современный метод напрямую удаляет указанный элемент из DOM. В примере нажатие кнопки «Remove Paragraph» удаляет элемент <p> со страницы.

INFO

Использование element.remove() является рекомендуемым подходом для динамических изменений контента, таких как удаление товаров из корзины, поскольку оно обеспечивает более чистый синтаксис по сравнению с устаревшим методом removeChild.

Пример: Динамический список задач ​

Давайте создадим простое приложение со списком задач, чтобы продемонстрировать вышеописанные концепции.

html
<!DOCTYPE html>
<html>
<head>
    <title>To-Do List</title>
</head>
<body>
    <div id="todo-list">
        <h2>My To-Do List</h2>
        <ul id="tasks">
            <li>Learn JavaScript</li>
        </ul>
        <input type="text" id="new-task" placeholder="New task">
        <button id="add-task">Add Task</button>
    </div>

    <script>
        const taskList = document.getElementById('tasks');
        const newTaskInput = document.getElementById('new-task');
        const addTaskButton = document.getElementById('add-task');

        addTaskButton.addEventListener('click', () => {
            const newTaskText = newTaskInput.value;
            if (newTaskText.trim()) {
                const newTask = document.createElement('li');
                newTask.textContent = newTaskText;
                taskList.appendChild(newTask);
                newTaskInput.value = '';
            }
        });

        taskList.addEventListener('click', (event) => {
            if (event.target.tagName === 'LI') {
                event.target.remove();
            }
        });
    </script>
</body>
</html>
Try it Yourself »

Пояснение:

  • createElement создает новый элемент списка для задачи.
  • appendChild добавляет новую задачу в список задач.
  • element.remove() удаляет задачу из списка задач при клике.

note

(Примечание: Логика добавления задач следует тому же шаблону, что и в разделе «Добавление элементов».)

INFO

При работе с большими объемами данных рассмотрите использование библиотек виртуального DOM, таких как React, для оптимизации производительности и более эффективного управления обновлениями.

Заключение ​

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

Практика ​

Какой из следующих методов можно использовать для изменения содержимого элемента DOM?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.