JavaСкрипт DOM урок с пример

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

⚡ Умно обобщение

JavaDOM и събития на скриптовете дават на скриптовете пълен контрол върху уеб страница, позволявайки на кода да чете, променя, добавя или премахва всеки елемент, който браузърът е рендирал, след което да реагира незабавно, когато посетителят кликне, въведе текст или превърти.

  • 🌳 Видове възли: Възлите за елементи, текст, атрибут и коментар играят отделна роля в DOM дървото.
  • 🔍 Избиране на елементи: getElementById, querySelector и querySelectorAll локализират точните възли, с които скриптът трябва да работи.
  • ️ Актуализиране на съдържанието: innerHTML, textContent и setAttribute пренаписват това, което посетителят всъщност вижда на екрана.
  • 🧩 Възли на сградата: createElement и appendChild вмъкват чисто нови елементи без презареждане на страницата.
  • 🗑️ Премахване на възли: removeChild и remove премахват нежеланите елементи от живото дърво.
  • 🖱️ Обработка на събития: addEventListener прикачва манипулатори за кликване, натискане на клавиша и изпращане към всеки елемент.
  • 🔄 Делегация на събитието: Един родителски слушател плюс event.target управлява кликванията за много дъщерни елементи едновременно.
  • 🤖 Отстраняване на грешки с помощта на изкуствен интелект: Асистенти за кодиране с изкуствен интелект помагат tracпроблеми с „балончетата“ и предлагане на модели на делегиране за сложни потребителски интерфейси.
Прочетете повече

В какво е DOM JavaСценарий?

JavaСкриптът може да достъпва всички елементи в уеб страница, използвайки Document Object Model (DOM). Всъщност, уеб браузърът създава DOM на уеб страницата, когато тя се зареди. DOM моделът се създава като дърво от обекти, подобно на това:

DOM в JavaСценарий

Всеки HTML елемент на страницата става възел в това дърво. Браузърите групират DOM възлите в няколко основни типа: възлите на елементите представляват тагове като <p> or <div>, текстовите възли съдържат видимите думи в етикета, а атрибутните възли съхраняват стойности като id or classи коментарните възли запазват <!-- --> маркировка. Най-горният възел винаги е document обект, а всеки друг елемент е негов наследник.

Използвайки DOM, JavaСценарий може да изпълнява множество задачи. Може да създава нови елементи и атрибути, да променя съществуващи елементи и атрибути и дори да премахва съществуващи елементи и атрибути. JavaСкриптът може също да реагира на съществуващи събития и да създава нови събития на страницата. Разделите по-долу разглеждат избирането на елементи, модифицирането им и настройването на обработчици на събития с практични, изпълними примери.

Полезно е да се помни, че DOM не е същото като HTML изходния файл. HTML кодът, който браузърът изтегля, е статичен текст, но DOM, който изгражда от този текст, е жив, динамичен обектен модел. Всяка промяна JavaСкриптът, който се изпраща към DOM, се показва на екрана веднага, без оригиналният HTML файл да бъде докосван.

Как да изберете DOM елементи в JavaСценарий

Преди JavaСкриптът може да промени всичко на страницата, първо трябва да избере целевия възел. DOM предоставя няколко метода за селектиране, всеки от които е подходящ за различни ситуации:

  • getElementById(): връща единствения елемент, който съответства на дадено id атрибут.
  • getElementsByClassName(): връща активна HTMLCollection на всеки елемент, който носи даден клас.
  • getElementsByTagName(): връща активна HTMLCollection на всеки елемент с дадено име на таг, например p or li.
  • querySelector(): връща първия елемент, който съответства на произволен CSS селектор.
  • querySelectorAll(): връща статичен NodeList на всеки елемент, който съответства на CSS селектор.

Таблицата по-долу сравнява четирите най-често използвани метода за подбор, за да можете да изберете правилния за работата.

Начин на доставка Връщане Най-добре се използва, когато
getElementById Единичен елемент Знаете точния, уникален идентификатор на целта.
getElementsByClassName Колекция от HTML на живо Трябва всеки елемент да споделя едно име на клас.
querySelector Единичен елемент (първо съвпадение) Искате да използвате произволен CSS селектор, не само id или class.
querySelectorAll Статичен списък с възли Трябва да прегледате всяко съвпадение с forEach.

querySelector и querySelectorAll приемат всеки валиден CSS селектор, което ги прави най-гъвкавият избор за съвременен код. Опитайте фрагмента по-долу в страница, която съдържа елемент с id="title" и няколко елемента с class="item":

const heading = document.getElementById("title");
const itemsByClass = document.getElementsByClassName("item");
const firstItem = document.querySelector(".item");
const allItems = document.querySelectorAll(".item");
console.log(heading.textContent, itemsByClass.length, allItems.length);

getElementById и getElementsByClassName остават по-бързи за прости търсения, докато querySelector и querySelectorAll са предпочитани, когато логиката за избор се нуждае от силата на пълния CSS синтаксис, като например селектори на атрибути или наследници.

СВЪРЗАНИ СТАТИИ

Как да променяте, създавате и премахвате DOM елементи

След като даден елемент е избран, JavaСкриптът може да чете или пренаписва съдържанието, атрибутите и дори съществуването му в дървото. Използвайки DOM, JavaСкриптът може да създава нови елементи и атрибути, да променя съществуващи елементи и атрибути и да премахва изцяло съществуващи елементи и атрибути.

Промяна на съдържанието с getElementById и innerHTML

  1. getElementById: За достъп до елементи и атрибути, чийто идентификатор е зададен.
  2. innerHTML: За достъп до съдържанието на елемент.

Опитайте сами този пример:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1 id="one">Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p>This is the technology section.</p>
<script type="text/javascript">
var text = document.getElementById("one").innerHTML;
alert("The first heading is " + text);
</script>
</body>
</html>

Предупредителният прозорец потвърждава, че getElementById е локализирал заглавието и innerHTML е върнал текста, съхранен в него.

Прочетете всеки параграф с getElementsByTagName

getElementsByTagName: За достъп до елементи и атрибути чрез име на етикет. Този метод ще върне an масив от всички елементи с едно и също име на етикет.

Опитайте сами този пример:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is the welcome message.</p>
<h2>Technology</h2>
<p id="second">This is the technology section.</p>
<script type="text/javascript">
var paragraphs = document.getElementsByTagName("p");
alert("Content in the second paragraph is " + paragraphs[1].innerHTML);
document.getElementById("second").innerHTML = "The orginal message is changed.";
</script>
</body>
</html>

Тъй като getElementsByTagName връща активна колекция, paragraphs[1] се отнася до втория параграф в документа и актуализирането на innerHTML незабавно презаписва текста му на екрана.

Създаване и премахване на елементи с createElement и removeChild

Освен че променя това, което вече е на страницата, DOM ви позволява да добавяте чисто нови елементи или да премахвате съществуващи:

  • създаване наЕлемент(): изгражда нов елементен възел в паметта.
  • appendChild(): прикачва възел като последен наследник на родителски елемент.
  • setAttribute(): добавя или актуализира атрибут, като например class or href, върху елемент.
  • премахниДете(): премахва посочен дъщерен възел от неговия родител.

Примерът по-долу създава нов елемент от списък, дава му текст и клас, добавя го към съществуващ списък и след това премахва първия елемент от същия този списък:

const list = document.getElementById("myList");
const newItem = document.createElement("li");
newItem.textContent = "Freshly added item";
newItem.setAttribute("class", "highlight");
list.appendChild(newItem);
list.removeChild(list.firstElementChild);

Само createElement() не показва нищо, тъй като възелът все още се намира само в паметта. Той се появява само след като appendChild() или подобен метод като prepend() го прикачи някъде във видимото дърво. Съвременните браузъри поддържат и по-кратък метод node.remove(), който изтрива елемент директно, без да е необходима препратка към неговия родител, за разлика от по-стария синтаксис parent.removeChild(node).

Как да се справяме със събитията в JavaСценарий

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

Прикачете манипулатор с onclick или addEventListener

Първият, по-стар подход, присвоява функция директно на свойството on-event на елемента:

document.getElementById(id).onclick=function()
{
lines of code to be executed
}

ИЛИ, използвайки модерния и по-гъвкав метод addEventListener():

document.getElementById(id).addEventListener("click", functionname)

addEventListener() обикновено е предпочитан, защото ви позволява да прикачите повече от един манипулатор към едно и също събитие на един и същ елемент и приема опционален трети аргумент, който контролира заснемането, разгледано по-късно в този раздел. Той също така се свързва с removeEventListener(), който отделя манипулатор, когато той вече не е необходим, нещо, което свойството onclick не може да направи самостоятелно.

HTML поддържа и трети стил: вграден манипулатор, написан директно върху етикета, например <button onclick="clicked()">Click Me</button>Вградените обработчици смесват маркиране с логика и бързо стават трудни за поддръжка, така че повечето JavaРазработчиците на скриптове ги запазват за бързи демонстрации и разчитат на addEventListener() за реални приложения.

Опитайте: Пример за цялостно събитие за кликване

Опитайте сами този пример:

<html>
<head>
<title>DOM!!!</title>
</head>
<body>
<input type="button" id="btnClick" value="Click Me!!" />
<script type="text/javascript">
document.getElementById("btnClick").addEventListener("click", clicked);
function clicked()
{
alert("You clicked me!!!");
}
</script>
</body>
</html>

Щракването върху бутона задейства функцията clicked(), която задейства JavaПрозорец за предупреждение на скрипта, потвърждаващ успешното изпълнение на обработчика на събития.

Обектът на събитието

Всеки обработчик на събития автоматично получава обект на събитие като първи аргумент. Този обект съдържа полезни подробности за случилото се, включително event.target (точният елемент, от който е възникнало действието), event.type (името на събитието, например „click“) и методи като event.preventDefault(), който спира поведението по подразбиране на браузъра, като например следване на връзка или изпращане на формуляр.

document.getElementById("btnClick").addEventListener("click", function(event) {
console.log("Clicked element: " + event.target.id);
});

Още две свойства допълват обекта на събитието: event.currentTarget винаги се отнася до елемента, към който е прикачен слушателят, дори ако event.target докладва вложено дете, а event.stopPropagation() спира събитие, преди то да продължи да се „баблира“ или записва. Заедно с preventDefault(), тези инструменти дават на обработчика прецизен контрол върху това, което се случва след това.

събитие Bubblинг, улавяне и делегиране

Когато събитие се задейства върху вложен елемент, то не спира дотук. В бълбукане Фазата, събитието се движи нагоре от целевия елемент през всеки предшественик, чак до документа. В заснемане фаза, която се изпълнява първа и е с опция за включване, събитието вместо това се движи надолу от документа към целта, преди да започне балонченето. Пас {capture: true} като трети аргумент на addEventListener() за слушане по време на фазата на заснемане.

Делегиране на събитие използва предимството на „бабълинг“: вместо да прикачвате отделен слушател към всеки дъщерен елемент, прикачвате един слушател към споделен родителски елемент и проверявате event.target, за да определите кой дъщерен елемент го е задействал. Това използва по-малко памет и автоматично обхваща елементите, добавени към страницата по-късно.

const list = document.getElementById("myList");
list.addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    alert("You clicked " + event.target.textContent);
  }
});

Делегирането, заедно с „бабълинг“ и „заснемане“, ви дава прецизен контрол върху това как DOM и събитията в JavaСкриптът реагира, когато страницата стане по-интерактивна.

Въпроси и Отговори

Не. HTML е статичната маркировка, която браузърът анализира, докато DOM е живо дърво от обекти в паметта, което JavaСкриптът може да чете и да се променя след зареждане на страницата.

Предпочитайте addEventListener(). Той позволява множество обработчици на едно събитие, поддържа фазата на заснемане и не презаписва обработчик, който вече е прикачен чрез onclick.

Bubbling пренася събитие от целевия елемент нагоре към документа. Заснемането се изпълнява първо и се движи в обратната посока, от документа надолу към целта.

Да. Асистенти като Копилот на GitHub мога tracзащо манипулаторът никога не се задейства, открийте липсващи извиквания на event.stopPropagation() и предложете модели на делегиране за динамични списъци.

Да. Инструменти като ChatGPT и GitHub Copilot може да създава фрагменти createElement, querySelector и addEventListener от описание на разбираем език, въпреки че резултатът все още се нуждае от тестване.

Обобщете тази публикация с: