Введение
JavaScript — это важный язык программирования, который позволяет разработчикам создавать динамические и интерактивные веб-страницы. DOM (объектная модель документа) — ключевая функция JavaScript, позволяющая разработчикам эффективно манипулировать веб-страницами и взаимодействовать с ними.
В этом сообщении блога мы рассмотрим различные аспекты манипулирования DOM, такие как выбор и изменение элементов в документе, создание и удаление элементов, управление стилями элементов и обработка событий.
Что такое ДОМ?
Объектная модель документа (DOM) — это интерфейс программирования, который позволяет нам выбирать и изменять элементы, создавать и удалять элементы и управлять стилями элементов в документе.
DOM представляет структуру HTML-документа в виде древовидной структуры. Документ является корнем дерева и содержит один дочерний узел, который является элементом <html>. Внутри элемента <html> есть два дочерних элемента: элементы <head> и <body>. Элементы <head> и <body> содержат своих дочерних элементов.
Выбор элементов в документе
DOM предоставляет следующие методы для выбора элементов.
getElementById()выбирает элемент по его уникальному идентификатору.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p id="paragraph">This is paragraph.</p>
</body>
</html>
Вот код JavaScript:
const paragraph = document.getElementById("paragraph");
console.log(paragraph);
Вывод будет таким, как показано ниже:
getElementsByClassName()выбирает элементы по имени их класса.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 class="text">This is heading.</h1>
<p class="text">This is paragraph.</p>
</body>
</html>
Вот код JavaScript:
const text = document.getElementsByClassName("text");
console.log(text);
Вывод будет таким, как показано ниже:
getElementsByTagName()выбирает элементы по имени их тега.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<p>This is paragraph.</p>
</body>
</html>
Вот код JavaScript:
const paragraph = document.getElementsByTagName("p");
console.log(paragraph);
Вывод будет таким, как показано ниже:
querySelector()выбирает первый элемент, соответствующий указанному селектору CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<header>
<h1 class="heading1">This is first heading.</h1>
<h2 id="heading2">This is second heading.</h2>
</header>
</body>
</html>
Вот код JavaScript:
const header = document.querySelector("header");
const heading1 = document.querySelector(".heading1");
const heading2 = document.querySelector("#heading2");
console.log(header);
console.log(heading1);
console.log(heading2);
Вывод будет таким, как показано ниже:
querySelectorAll()выбирает все элементы, соответствующие указанному селектору CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 class="text">This is first heading.</h1>
<h2 class="text">This is second heading.</h2>
</body>
</html>
Вот код JavaScript:
const text = document.querySelectorAll(".text");
console.log(text);
Вывод будет таким, как показано ниже:
Изменение атрибутов выбранных элементов
DOM предоставляет следующие методы для изменения атрибутов выбранных элементов.
getAttribute()возвращает значение указанного атрибута.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 class="heading">This is heading.</h1>
<img src="image.jpg" >
</body>
</html>
Код JavaScript:
const heading = document.querySelector(".heading")
const img = document.querySelector("img");
const className = heading.getAttribute("class");
const imgSrc = img.getAttribute("src");
console.log(className);
console.log(imgSrc);
Выход:
hasAttribute()возвращает истину или ложь.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>This is heading.</h1>
<img src="image.jpg" >
</body>
</html>
Код JavaScript:
const heading = document.querySelector("h1")
const img = document.querySelector("img");
const className = heading.hasAttribute("class");
const imgSrc = img.hasAttribute("src");
console.log(className);
console.log(imgSrc);
Выход:
setAttribute()устанавливает значение указанного атрибута.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="image.jpg" >
</body>
</html>
Код JavaScript:
const img = document.querySelector("img");
//syntax for setAttribute:
//setAttribute(name,value);
const imgAlt = img.setAttribute("alt","picture");
const altText = img.getAttribute("alt");
console.log(altText);
Выход:
removeAttribute()удаляет указанный атрибут.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img src="image.jpg" alt="picture">
</body>
</html>
Код JavaScript:
const img = document.querySelector("img");
const removeAlt = img.removeAttribute("alt");
const altText = img.getAttribute("alt");
console.log(altText);
Выход:
Изменение классов выбранных элементов
DOM предоставляет следующие методы для изменения классов выбранных элементов.
classList.add()добавляет класс.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>Div</div> <!-- No class present here -->
</body>
</html>
Код JavaScript:
const div = document.querySelector("div");
div.classList.add("active"); //Adds 'active' class
console.log(div);
Выход:
classList.toggle()включает или выключает класс.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>Div</div>
</body>
</html>
Код JavaScript:
const div = document.querySelector("div");
console.log(div);
Выход:
classList.contains()проверяет, существует ли значение класса.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div>Div</div>
</body>
</html>
Код JavaScript:
const div = document.querySelector("div");
const containClass = div.classList.contains("active");
console.log(containClass);
Выход:
classList.replace()заменить существующее значение класса новым значением класса.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="active">Div</div>
</body>
</html>
Код JavaScript:
const div = document.querySelector("div");
const replaceClass = div.classList.replace("active","hidden");
console.log(div);
Выход:
classList.remove()удалить значение класса.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="active box">Div</div> <!-- two classes present here -->
</body>
</html>
Код JavaScript:
const div = document.querySelector("div");
const removeClass = div.classList.remove("box"); //removes the 'box' class
console.log(div);
Выход:
Добавление новых элементов
Вот основная структура HTML-документа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
createElement()method создает новый элемент, указанный именем тега.
const newElement = document.createElement('div');
Метод appendChild() добавляет в документ только что созданный элемент.
const newElement = document.createElement('div');
document.body.appendChild(newElement);
Свойство innerHTML устанавливает HTML-содержимое элемента.
const newElement = document.createElement('div');
document.body.appendChild(newElement);
newElement.innerHTML = '<h1>This is newly created div heading.</h1>';
Давайте создадим еще один элемент в документе.
const newElement2 = document.createElement('p');
Теперь добавьте этот элемент в div перед созданием.
newElement.appendChild(newElement2);
Свойство textContent используется для добавления текста к элементу.
newElement2.textContent = 'This is second created element.';
Собираем все вместе:
const newElement = document.createElement('div');
document.body.appendChild(newElement);
newElement.innerHTML = '<h1>This is newly created div heading.</h1>';
const newElement2 = document.createElement('p');
newElement.appendChild(newElement2);
newElement2.textContent = 'This is second created element.';
Это будет вывод:
Удаление элементов
Вот основная структура HTML-документа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<div>
<h2>This is heading inside div.</h2>
<p>This is paragraph inside div.</p>
</div>
</body>
</html>
Метод remove() полностью удаляет элемент из DOM.
const element = document.querySelector("h2");
element.remove();
Метод removeChild() удаляет дочерний элемент из его родительского элемента.
const parentElement = document.querySelector("div");
const childElement = document.querySelector("p");
parentElement.removeChild(childElement);
Управление стилями элементов
Вы можете изменить стиль любого элемента, используя свойство style.
Вот основная структура HTML-документа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
<button>Click me!</button>
</body>
</html>
Код JavaScript:
const heading = document.querySelector("h1");
heading.style.color = "red"; //This will change the color from black to red.
Выход:
Код JavaScript:
const button = document.querySelector("button");
button.style.backgroundColor = "green";
button.style.color = "white";
Выход:
Точно так же вы можете изменить другие стили элементов, используя свойство стиля.
При изменении стиля элементов с помощью DOM всегда помните, что имена свойств следует использовать в верхнем регистре. Например, вместо «размер шрифта» используйте «размер шрифта», а вместо «цвет фона» используйте «цвет фона».
Обработка событий
Вот основная структура HTML-документа.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button class="button">Click me!</button>
</body>
</html>
Получите кнопку методом querySelector() (вы можете использовать любой метод на ваш выбор).
const button = document.querySelector(".button");
Метод addEventListener() используется для присоединения функции обработчика событий к элементу HTML.
Метод addEventListener() принимает тип события и функцию.
const button = document.querySelector(".button");
button.addEventListener("click", () => {
alert("I'm clicked!");
});
Вот еще один пример:
const button = document.querySelector(".button");
button.addEventListener("mouseover", () => {
button.style.color = "red"; //This will change the color of the text on mouse over
});
Заключение
Объектная модель документа (DOM) — ключевая функция JavaScript, позволяющая разработчикам эффективно манипулировать веб-страницами и взаимодействовать с ними. Манипулирование DOM имеет различные аспекты, такие как выбор и изменение элементов в документе, создание и удаление элементов, управление стилями элементов и обработка событий.
Вы можете выбрать элементы, используя методы getElementById(), getElementsByClassName(), getElementsByTagName(), querySelector() и querySelectorAll().
Для изменения атрибутов выбранных элементов вы можете использовать методы getAttribute(), hasAttribute(), setAttribute() и removeAttribute().
Чтобы изменить классы выбранных элементов, вы можете использовать методы classList.add(), classList.toggle(), classList.contains(), classList.replace() и classList.remove().
Вы можете создавать новые элементы с помощью метода createElement() и добавлять их в документ с помощью метода appendChild().
Чтобы удалить элементы, вы можете использовать метод remove() и метод removeChild().
Чтобы изменить стиль любого элемента, используйте свойство style.
Вы можете обрабатывать события, используя метод addEventListener().
Продолжайте кодировать!!
Чтобы получить больше контента, подобного этому, нажмите здесь!
