JavaScript: Изменение документа
JavaScript позволяет динамически изменять HTML-документы, повышая их интерактивность и функциональность. В этой статье мы подробно рассмотрим основные методы и приёмы модификации документа с помощью JavaScript, приводя подробные примеры кода для освоения этого важного навыка.
Понимание манипуляций с DOM
Создание элементов
Одна из фундаментальных операций при работе с DOM — создание новых элементов. Это выполняется с помощью метода document.createElement(tag). Вот как можно создать новый элемент div:
<body></body>
<script>
let div = document.createElement('div');
div.innerHTML = "Hello, world!";
document.body.appendChild(div);
</script>Добавление текста в элементы
Чтобы добавить текст в элемент, используется метод document.createTextNode(text). Он особенно полезен, когда нужно добавить текст, который не должен интерпретироваться как HTML:
<body>
<div id="container"></div>
</body>
<script>
const div = document.getElementById("container");
let textNode = document.createTextNode('Here is some text');
div.appendChild(textNode);
</script>Изменение элементов
Изменение атрибутов
Чтобы изменить атрибут элемента, можно использовать element.setAttribute(name, value). Этот метод позволяет задать значение атрибута для указанного элемента.
<body>
<div id="firstID"></div>
<div>new id is: <span id="result"></span></div>
</body>
<script>
const div = document.getElementById("firstID");
const result = document.getElementById("result");
div.setAttribute("id", "newDiv");
result.innerHTML = div.id;
</script>Расширенные манипуляции
Клонирование элементов
Вы можете создать копию элемента, используя метод element.cloneNode(deep). Установка параметра deep в значение true клонирует элемент вместе со всеми его дочерними элементами.
<body>
<div id="mydiv">one div here, or two divs if cloned! <span>And here is a span inside the div!</span></div>
</body>
<script>
const div = document.getElementById("mydiv");
const clone = div.cloneNode(true);
document.body.appendChild(clone);
</script>Удаление элементов
Чтобы удалить элемент из DOM, можно использовать element.remove().
<body>
<div>It's the only thing you see, as the next div is removed!</div>
<div id="mydiv">you don't see me if I'm removed!</div>
</body>
<script>
const div = document.getElementById("mydiv");
div.remove();
</script>Практический пример: Создание списка задач
Давайте применим эти концепции для создания простого списка задач с помощью JavaScript:
<body></body>
<script>
// Creating the list container
let list = document.createElement('ul');
document.body.appendChild(list);
// Adding items to the list
function addItem(text) {
let item = document.createElement('li');
item.textContent = text;
list.appendChild(item);
}
addItem('Learn JavaScript');
addItem('Build a to-do list');
</script>Заключение
Освоение модификации документа в JavaScript открывает безграничные возможности для создания динамичных и интерактивных веб-приложений. Описанные здесь методы — лишь начало того, чего можно достичь с помощью манипуляций с DOM. Практикуйте эти приёмы, экспериментируйте с новыми идеями и продолжайте изучать мощные возможности JavaScript.
Практика
Какой метод можно использовать в JavaScript для изменения атрибута элемента?