Hujjatni o'zgartirish

DOM ni o’zgartirish “jonli” sahifalar yaratishning kalitidir.

Bu yerda yangi elementlarni “tezkorlik bilan” yaratish va mavjud sahifa kontentini o’zgartirish usullarini ko’rib chiqamiz.

Misol: xabar ko’rsatish

Bir misol bilan ko’rsatib beraylik. Biz sahifaga alertdan ko’ra chiroyliroq ko’rinadigan xabar qo’shamiz.

Qanday ko’rinishi:

<style>
.alert {
  padding: 15px;
  border: 1px solid #d6e9c6;
  border-radius: 4px;
  color: #3c763d;
  background-color: #dff0d8;
}
</style>

<div class="alert">
  <strong>Salom!</strong> Siz muhim xabarni o'qidingiz.
</div>

Bu HTML misoli edi. Endi xuddi shunday div ni JavaScript bilan yaratamiz (uslublar HTML/CSS da allaqachon mavjud deb faraz qilib).

Element yaratish

DOM tugunlarini yaratish uchun ikkita usul mavjud:

document.createElement(tag)

Berilgan teg bilan yangi element tugunini yaratadi:

let div = document.createElement('div');

document.createTextNode(text)

Berilgan matn bilan yangi matn tugunini yaratadi:

let textNode = document.createTextNode('Mana men shu yerdaman');