Простое объяснение для JavaScript DOM !! В эту статью я включил несколько методов dom, CSS dom, события, нодлисты, HTML-коллекции и так далее. Это все темы для продвинутых пользователей JavaScript.

DOM — это сокращение от Document Object Module. Это интерфейс, который позволяет программам получать доступ к содержимому документа и обновлять его на лету. DOM является стандартом консорциума World Wide Web (W3C). W3C определяет три формы DOM: Core, XML и HTML. Базовая модель DOM используется для всех типов документов. XML DOM относится к документам XML, тогда как HTML DOM относится к документам HTML.

В этой статье мы узнаем о HTML DOM. Я рассмотрел все основные предпосылки, уделив особое внимание новичкам в теме.

HTML DOM — это программный интерфейс для HTML, который позволяет получать доступ к документам HTML и управлять ими. JavaScript DOM может изменять содержимое элементов и атрибутов HTML, а также может изменять стиль CSS. Мы можем создать новый HTML-элемент, а также удалить некоторые существующие элементы и атрибуты с помощью JavaScript DOM.

HTML DOM также позволяет нам работать со списками узлов, которые мы рассмотрим более подробно позже.

МЕТОД ДОМА

Методы Dom — это действия, которые вы можете выполнять над каждым элементом HTML. Методы DOM позволяют нам получать доступ и изменять любой элемент HTML.

getElementById: это способ доступа к HTML-компонентам с указанным идентификатором.

<!DOCTYPE html>
<html>
<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">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h2>Let's Learn Javascript DOM</h2>
<p id="example"></p>
<script>
document.getElementById("example").innerHTML = "DOM is an W3C Standard";
</script>
</body>
</html>

Приведенный здесь код просто демонстрирует функцию Dom.
У нас есть идентификатор с именем «example», и мы использовали метод getElementById в тегах скрипта для его получения. .
InnerHTML – это свойство, которое можно использовать для изменения любых атрибутов или содержимого данного элемента.

ЭЛЕМЕНТЫ ДОМА

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

Мы уже обсуждали доступ к элементам Id с помощью getElementById("id_name").

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

getElementByClassName: это метод для доступа к элементам с указанным именем класса.

<!DOCTYPE html>
<html>
<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">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h2>Let's Learn Javascript DOM</h2>
<p class="cname">
 dom with class name !!
</p>
<p class="cname">
Let's learn dom with class name !!
</p>
<p id="example"></p>
<script>
var x = document.getElementsByClassName("cname");
document.getElementById("example").innerHTML = "This is " + x[0].innerHTML;
</script>
</body>
</html>

Здесь у нас есть идентификатор, а также класс. Мы можем получить доступ к классу с помощью getElementsByClassName («…..»).

Следует различать методы доступа по идентификатору и классу. Поскольку имена идентификаторов всегда уникальны, мы можем получить доступ только к одному элементу с этим именем идентификатора. Однако у нас может быть много классов с одним и тем же именем и доступ к множеству элементов с одним и тем же именем класса.

getElementsByTagName: это способ доступа к элементам с именами тегов. Теги включают ‹a› , ‹h1›, ‹p› и так далее.

<!DOCTYPE html>
<html>
<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">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<h2>Let's Learn Javascript DOM</h2>
<p>
DOM with tag Name  !!
</p>
<p id="example"></p>
<script>
var x = document.getElementsByTagName("p");
document.getElementById("example").innerHTML = "This is " + x[0].innerHTML ;
</script>
</body>
</html>

Здесь мы использовали метод getElementsByTagName() и получили доступ к элементу тега p.

Результат показан ниже:

querySelector() и querySelectorall(): это два метода получения доступа к указанному селектору CSS.
querySelectorвозвращает первый элемент предоставленного выбора CSS. , тогда как 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> JS Query Selector</h1>
<h2 class="hclass">QUery selector</h2>
<p class="pclass"> query selector returns first element </p>
<p id="myid"> It is p id</p>
<p id="myid"> This is second id </p>
<script>
//Element selector
var a=document.querySelector("p");
console.log(a);
</script>
</body>
</html>

Здесь вы можете наблюдать за кодом. У нас есть классы h2 и p, а также тег p с элементом id.

Мы выбрали элемент через querySelector.

var a=document.querySelector("p");
console.log(a);

document.querySelector("p"); проходит через документ HTML и ищет указанный селектор, т.е. в данном случае: p и возвращает первое значение.

Вы можете увидеть вывод в консоли.

var b = document.querySelector("#myid");
console.log(b);
 // this will return us :
<p id="myid"> It is p id</p> in our console as ouput.

Из предыдущего кода видно, что у нас есть два селектора #myid, но он возвращает только первый элемент и его контекст.

Но в случае с querySelectorAll сценарий другой. Он возвращает все элементы указанному селектору.

//queryselectorall code
var b = document.querySelectorAll("#myid");
console.log(b);
The output is shown below :

Итак, это самые основные методы, которые мы должны изучить в HTML DOM.

С помощью этих методов HTML DOM позволяет JavaScript изменять содержимое элементов HTML.

  • Изменение содержимого 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>
<h2>JS can change html content .  </h2>
<p id="id1">This is our first text !!</p>
<script>
document.getElementById("id1").innerHTML="Our new Text";
</script>
</body>
</html>

Глядя на этот код, мы видим тег p с идентификатором «id1» и содержимым «Это наш первый текст!!» Мы использовали метод DOM для получения элемента с идентификатором «id1», затем Javascript изменил его содержимое на « Наш новый текст».

И этот новый текст будет отображаться на нашей странице в качестве вывода.

Точно так же мы можем изменить любое содержимое HTML с помощью имени тега, имени класса или имени идентификатора.

Как было сказано ранее, HTML DOM также позволяет JavaScript изменять стиль CSS.

При изменении стиля CSS нам сначала нужно получить доступ к элементу, а затем добавить к ним желаемое свойство стиля.

  • Изменение стиля элементов HTML:

У нас есть простой синтаксис для этого:

document.getElementById(“..”).style.property = новый стиль

<!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>Changing the styling features</h1>
<p id="id0">This is zero id</p>
<p id="id1">This is one id</p>
<script>
document.getElementById("id1").style.color = "blue";
document.getElementById("id0").style.color = "red";
</script>
</body>
</html>

Его вывод показан ниже.

СОБЫТИЯ ДОМА

DOM позволяет JavaScript реагировать на события 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 onclick="time()"> Click for time :</button>
<p id="id"></p>
<script>
function time(){
document.getElementById("id").innerHTML=Date();
}
</script>
</body>
</html>

Итак, здесь у нас есть кнопка с названием «Нажмите для времени:»

Когда мы нажимали кнопку, мы использовали атрибут события «onclick», который давал нам инструкцию присоединить функцию time() как событие.

Когда кнопка нажата, функция запускается, и все, что мы пишем в функции, выполняется. В этом примере мы отображали дату.

Подобно событиям onclick(), существует множество других атрибутов событий.

<!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>
<style>
.head{
margin-left: 30px;
padding: 20px;
font-size: 20px;
background-color: aquamarine;
</style>
<button class="head" onmouseover="hov(this)" onmouseout="hovout(this)">THIS IS BUTTON</button>
<p id="id"></p>
<script>
function hov(text){
text.innerHTML = "Mouse over done"
}
function hovout(obj){
obj.innerHTML = "Mouse out done"
}
</script>
</body>
</html>

Когда мы наводим указатель мыши на кнопку, onmouseover() изменяет содержимое, а когда мы отводим указатель мыши от кнопки, onmouseout() изменяет содержимое.

В Javascript событие работает так.

Существует также прослушиватель событий DOM:

addEventListener(), который связывает событие с определенными элементами.

Давайте посмотрим на синтаксис метода прослушивания событий.

элемент.addEventListener(событие, функция, useCapture);

событие может быть похожим на щелчок или наведение мыши.

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

useCapture писать необязательно. Это логическое значение, указывающее, следует ли использовать воспроизводство или захват.

Логическое значение может быть только истинным или ложным. В этой ситуации значение по умолчанию равно false, что указывает на всплывающую передачу событий, а другое значение — true, что указывает на захват событий. Это будет показано на более позднем этапе.

давайте посмотрим пример присоединения события с помощью addEventListener();

<!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>
<style>
.head{
margin-left: 30px;
padding: 20px;
font-size: 20px;
background-color: aquamarine;
}
</style>
<button class="head" id="button">Click me</button>
<script>
document.getElementById("button").addEventListener("mouseover",function() {
document.write("This is event listener");
alert("Add event listener");
console.log("This is console section");
})
</script>
</body>
</html>

У нас есть два аргумента для addEventListener.
Один указывает тип события, например, наведение курсора мыши, как описано выше.
Функция, которую мы написали дальше, будет действовать, как ожидается, когда произойдет событие.
Следующее является результатом: первое изображение показывает операцию оповещения, выполняемую после нажатия кнопки.

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

Захват событий и пузырьковое отображение событий

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

<!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>
<style>
.head{
margin-left: 30px;
padding: 20px;
font-size: 20px;
background-color: aquamarine;
}
</style>
<div id="first">
<h3>bubble</h3>
<button class="head" id="button">Click me</button>
</div>
<div id="second">
<h3>capture</h3><button class="head" id="button2 ">Click me </button>
</div>
<script>
document.getElementById("first").addEventListener("click",
function() {
alert("outer element event got executed at the end!");
}, false);
document.getElementById("button").addEventListener("click",
function() {
alert("inner element event got executed first!");
}, false);
document.getElementById("second").addEventListener("click", function() {
alert("outer element event got executed first!");
}, true);
document.getElementById("button2").addEventListener("click", function() {
alert("inner element event got executed at the end!");
}, true);
</script>
</body>
</html>

В данном случае у нас есть два div с тегами h1 и button внутри них.

Первый div предназначен для всплытия, а второй — для захвата. Мы поместили наш js-код в теги script и использовали метод dom и метод addEventListener с функцией.

Функция имеет событие щелчка и использует логическое значение, чтобы указать, какое событие должно произойти и когда. См. код со значением false; это для всплытия, и когда вы нажимаете кнопку, сначала происходит событие внутреннего элемента, а затем событие внешнего элемента. Прямо противоположное относится к коду с истинным значением, относящимся к захвату.

Мы можем удалить обработчик событий с помощью removeEventListener().

УЗЛЫ HTML DOM

HTML DOM позволяет нам перемещаться между узлами в дереве. Как видно на изображении, например: дерево узловвыше, все на HTML-странице является узлом.
Корневой узел — это верхний узел, а корневой узел не имеет родителей. Здесь ‹html› — это корневой узел с двумя дочерними узлами: ‹head› и ‹body›. Первым дочерним элементом HTML является заголовок, а последним дочерним элементом HTML является тело.

‹head› имеет один дочерний элемент: ‹title›, который, в свою очередь, имеет один дочерний узел: textnode.

У ‹body› есть два дочерних элемента: ‹a› и ‹h1›. У обоих есть дочерний текстовый узел.

С HTML-домом мы можем получить доступ ко всем узлам в дереве с помощью JavaScript. Мы можем добавлять новые узлы или изменять и удалять существующие узлы.

Создать новый узел (новый элемент HTML)

Итак, здесь мы добавляем новый узел в html, но перед этим нам нужно сначала создать узел элемента, а затем добавить его к существующему элементу с помощью appendChild().

<!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>Add new html element node </h1>
<section id="id1">
<h3 id="h1">This is heading id </h3>
<p id="p1">This is paragraph id </p>
</section>
<script>
const first = document.createElement("p");
const text = document.createTextNode("So we added this ");
first.appendChild(text);
const exist = document.getElementById("id1");
exist.appendChild(first);
</script>
</body>
</html>

У нас есть один заголовок и тег p в этом разделе с текстом. Мы хотели бы добавить новый узел элемента в раздел сейчас. Для этого мы сначала создали элемент «p» с помощью функции createElement() и присвоили ему переменную с именем « первый.”

const first = document.createElement("p");

Далее мы хотим добавить текст к этому элементу.

const text = document.createTextNode("So we added this ");

Мы использовали createTextNode() для создания текстового узла, затем добавили к нему некоторый текст и сохранили его в переменной с помощью const.

Теперь нам нужно добавить к текстовому узлу элемент p.

first.appendChild(text);

Наконец, мы добавим элемент p к уже существующему элементу ‹section›. Для этого мы сначала получим идентификатор существующего элемента, а затем добавим к нему новый элемент.

const exist = document.getElementById("id1");
exist.appendChild(first);

Давайте посмотрим на его вывод:

Вы можете видеть, что новый узел элемента, который мы добавили, отображается как последний дочерний элемент. Если вы не хотите быть последним, мы можем использовать метод insertBefore() вместо appendChild(). Мы можем использовать метод insertBefore() при добавлении новых элементов к существующему.

Следуйте указанному коду:

<!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>Add new html element node </h1>
<section id="id1">
<h3 id="h1">This is heading id </h3>
<p id="p1">This is paragraph id </p>
</section>
<script>
const first = document.createElement("p");
const text = document.createTextNode("So we added this ");
first.appendChild(text);
const exist = document.getElementById("id1");
const newelement = document.getElementById("h1");
exist.insertBefore(first,newelement);
</script>
</body>
</html>

Удалить существующий элемент

При необходимости мы также можем удалить существующую часть. Просто определите элемент, который необходимо удалить, присвойте ему имя переменной, а затем вызовите метод 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>
<h1>REMOVE  html element node </h1>
<section id="id1">
<h3 id="h1">This is heading id </h3>
<p id="p1">This is paragraph id </p>
</section>
<script>
const element = document.getElementById("h1");
element.remove();
</script>
</body>
</html>

Здесь мы удалили узел элемента h3.

Заменить узел элемента HTML

Чтобы заменить элемент html, мы используем replaceChild().

<!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>REPLACE html element node </h1>
<section id="id1">
<h3 id="h1">This is heading id </h3>
<p id="p1">This is paragraph id </p>
</section>
<script>
const root = document.getElementById("id1");
const child = document.getElementById("p1");
const element = document.createElement("p");
const text = document.createTextNode("this is thee text replaced");
element.appendChild(text);
root.replaceChild(element,child);
</script>
</body>
</html>

Мы выбрали элемент узла для замены и присвоили его переменной «элемент», а также создали текстовый узел и присоединили его к «элементу».
Наконец, используя replaceChild, выберите родительский узел целевого узла, который вы желание заменить.

Список узлов HTML DOM

Список узлов — это набор узлов из html-документа. Мы можем вернуть объект списка узлов, используя querySelectorAll().

Доступ к элементам из NodeList

<!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 style="text-align: center;">NodeList</h1>
<p>Collection of NODES</p>
<p>Hello World</p>
<script>
var myNodeList = document.querySelectorAll("p");
var x = myNodeList[0];
console.log(x);
console.log(myNodeList.length);
</script>
</body>
</html>

К элементам списка узлов можно получить доступ по номеру индекса. Индекс обычно начинается с 0.

Итак, для доступа к первому элементу мы написали myNodeList[0]. И если нам нужно получить доступ ко второму элементу, мы можем написать myNodeList[1].

Мы также можем узнать длину NodeList с помощью метода myNodeList.length.

Вывод кода, который мы проиллюстрировали выше, таков:

ОБЪЕКТ КОЛЛЕКЦИИ HTML

Он очень похож на NodeList. Объект коллекции HTML представляет собой список элементов HTML. К нему также можно получить доступ по номеру индекса, как мы это делаем в NodeList, а также у нас есть свойство длины, которое определяет номер элемента.

<!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 style="text-align: center;">HTML COLLECTION List</h1>
<p>Collection of html elements</p>
<p>Hello World</p>
<script>
var htmllist = document.querySelectorAll("p");
var x = htmllist[1];
console.log(x);
console.log(htmllist.length);
</script>
</body>
</html>

Вы можете увидеть вывод ниже:

Итак, вот некоторые продвинутые темы JavaScript, которые необходимо освоить.