DOM və veb-səhifə elementləri

Sənədin obyekt ağacı

DOM HTML-in brauzerdəki obyekt təqdimatıdır. Element və mətn düyünləri ağacda əlaqəlidir. document.querySelector CSS selektoruna uyğun ilk elementi, tapmadıqda null qaytarır. Kodu sənəd hazır olanda işə sal: ayrıca skriptdə defer istifadə edə bilərsən.

<ul id="products"></ul>
<script>
  const list = document.querySelector('#products');
  if (list) {
    const item = document.createElement('li');
    item.textContent = 'Yeni məhsul';
    list.append(item);
    // item.remove(); // əlavə edilmiş elementi silər
  }
</script>

Nümunə

Yaratmaq və dəyişmək

createElement hələ sənədə daxil olmayan element yaradır. append, prepend, before və after onu lazımi yerə əlavə edir. remove sənəddən çıxarır. textContent mətni mətn kimi yazır; innerHTML isə HTML emal edir və etibarsız istifadəçi məzmunu ilə təhlükəlidir.

Element seçilməyibsə onun xassəsini dəyişməyə çalışma. DOM-un dəyişməsi ilkin HTML faylını diskdə dəyişmir; cari sənəd vəziyyətini yeniləyir. Məlumatı hansı massivdən göstərdiyini ayrıca saxla ki, interfeys ilə məlumat məntiqi qarışmasın.

Əlavə qeydlər və mənbələr

DOM sənədi əlaqəli obyektlər ağacı kimi təqdim edir. querySelector ilə element seç, createElement ilə yenisini yarat, mətnini textContent ilə ver, sənədə əlavə et və remove ilə sil.

Niyə vacibdir?

DOM HTML sənədinin proqramlaşdırma vasitəsilə işləyə bildiyin təqdimatıdır.

Əvvəlki biliklər

JavaScript əsasları

Bu mövzuda

DOM ağacı və document
querySelector və createElement
Element əlavə etmək və silmək

Mövzuya baxış

Hadisədən dəyişiklik yarat

Hadisə brauzerdə baş verən bir hərəkətdir: klik, yazı daxil etmək və ya formanın göndərilməsi. Dinləyici funksiyanı addEventListener ilə bağla.

const form = document.querySelector('form');
const input = document.querySelector('input');
const result = document.querySelector('#result');
form.addEventListener('submit', event => {
  event.preventDefault();
  result.textContent = input.value.trim();
});

Nümunə

Bu nümunədə elementlərin HTML-də mövcud olduğu fərz edilir. Skripti defer ilə yüklə və ya sənədin sonuna yerləşdir. İstifadəçinin yazdığını innerHTML ilə göstərmək əvəzinə mətn üçün textContent seç.

Kolleksiyalar və DOM ağacı

querySelector uyğun ilk elementi və ya null, querySelectorAll isə statik NodeList qaytarır. children element övladlarının canlı HTMLCollection toplusudur. parentElement, nextElementSibling və firstElementChild ilə ağacda hərəkət edərkən elementin olmamasını da nəzərə al.

const list = document.querySelector('#tasks');
if (list) {
  const item = document.createElement('li');
  item.textContent = 'JavaScript təkrarı';
  list.append(item);
  list.querySelectorAll('li').forEach(element => {
    element.classList.add('task');
  });
}

Nümunə

Formadan dəyər almaq

Mətn, seçim və textarea dəyəri üçün value, checkbox üçün checked oxu. label sahəni adlandırır; placeholder onu əvəz etmir. name atributu FormData daxilində açarı müəyyən edir.

const signup = document.querySelector('#signup');
if (signup instanceof HTMLFormElement) {
  signup.addEventListener('submit', event => {
    event.preventDefault();
    const data = new FormData(signup);
    console.log(data.get('email'));
  });
}

Nümunə

input yazı dəyişdikcə, change isə dəyişiklik təsdiqləndikdə baş verir; focus və blur fokusun giriş-çıxışıdır. Qlobal dinləyici əlavə edəndə eyni funksiya istinadını saxla ki, lazım olduqda removeEventListener ilə silə biləsən. Forma validasiyasının brauzer hissəsi server yoxlamasını əvəz etmir.

Mövzu üzrə praktika

Tapşırıq siyahısı yarat: yeni tapşırıq əlavə etmək, tamamlanmış işarələmək və silmək mümkün olsun.

Boş tapşırıq qəbul edilmir, Enter ilə əlavə etmək olur və istifadəçi mətni HTML kimi icra edilmir.

Mövzunun yoxlama siyahısı

querySelector ilə element seç
addEventListener ilə hadisəni dinlə
Formanın submit hadisəsini idarə et
Mətni textContent ilə təhlükəsiz göstər
NodeList, HTMLCollection və ağac üzrə naviqasiya
createElement, append, remove və classList
value, checked, name və FormData
Dinləyicini removeEventListener ilə təmizləmək

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Elementin mətnini dəyiş

Girişi dəyiş və elementin textContent nəticəsini gör.

Element

Yeni mətn

Hədəf: Yeni mətnə Yeni məhsul yaz.

Salam

<p>Salam</p>

Özün sına

Məhsullar massivindən li elementləri yarat və ul-a əlavə et. İstifadəçinin daxil etdiyi mətni HTML kimi icra etmədən göstər.

Nəticəni necə yoxlayım?

Siyahı elementləri yaradılır, əlavə və silmə işləyir; istifadəçi mətni HTML kimi icra edilmir.

Gözlənilən nəticə

İki li elementi görünür.
İkinci sətirdə img teqi mətn kimi qalır; şəkil və hadisə işlədilmir.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

createElement və textContent istifadəçi mətnini HTML kimi icra etmir.

index.html

<ul id="products"></ul>
<script type="module" src="main.js"></script>

main.js

const products = [{ title: 'Kitab' }, { title: '<img src=x onerror=alert(1)>' }];
const list = document.querySelector('#products');
for (const product of products) {
  const item = document.createElement('li');
  item.textContent = product.title;
  list.append(item);
}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.