Назария

Элементҳои саҳифа

DOM чист

Вақте ки браузер саҳифаро мекушояд, вай HTML-ро мехонад ва аз он дарахти объектҳо месозад — DOM (Document Object Model, «модели объектии ҳуҷҷат»). Ҳар як тег ба объекти элемент табдил меёбад: вай матн, атрибутҳо, синфҳо ва фарзандон дорад. JavaScript метавонад ҳар элементи ин дарахтро ёбад ва иваз кунад — браузер саҳифаро дарҳол аз нав мекашад.

<body>
  <h1 id="title">Мағоза</h1>
  <ul class="menu">
    <li>Асосӣ</li>
    <li>Каталог</li>
  </ul>
</body>

Барои чунин HTML дарахт чунин аст: body → h1 ва ul, дар ul — ду li. Даромад ба дарахт — объекти глобалии document.

Дар ин курс код бевосита дар саҳифаи тарафи рост иҷро мешавад: дар масъала аллакай HTML ҳаст, JavaScript-и шумо ба он мисли файли script.js дар сайти ҳақиқӣ пайваст аст. «Иҷро кардан»-ро пахш кунед — саҳифаро дар равзанаи «Натиҷа» мебинед, ва ҳар чизе ки console.log чоп мекунад, дар қисми хуруҷ пайдо мешавад.

Ёфтани элемент: querySelector

document.querySelector(селектор) аввалин элементеро, ки ба селектори CSS мувофиқ аст, бармегардонад, ё агар чунин набошад — null. Селекторҳо ҳамон тавре ки дар CSS:

document.querySelector("#title");      // аз рӯи id
document.querySelector(".menu");       // аз рӯи синф
document.querySelector("li");          // аз рӯи тег — аввалин li дар саҳифа
document.querySelector(".menu li");    // li дар дохили .menu
document.querySelector("input[type=email]"); // аз рӯи атрибут

Усули кӯҳна ҳам ҳаст — document.getElementById("title") (бе панҷара). Ҳамон қадар зуд кор мекунад, вале querySelector универсалӣ аст, бинобар ин минбаъд онро истифода мебарем.

Агар элемент набошад, null бармегардад, ва кӯшиши иваз кардани матни он бо хатои TypeError: Cannot set properties of null меафтад. Агар чунин хаторо дидед — селекторро санҷед.

Ёфтани ҳама: querySelectorAll

document.querySelectorAll(селектор) ҳамаи элементҳои мувофиқро бармегардонад — коллексияи NodeList. Онро бо даври for…of гузаштан, дарозиашро бо .length фаҳмидан ё бо [...list] ба массив табдил додан мумкин аст, то map ва filter-ро истифода баред:

const items = document.querySelectorAll(".menu li");
console.log(items.length);  // 2

for (const li of items) {
  console.log(li.textContent);
}

const names = [...items].map((li) => li.textContent);
console.log(names);

Хуруҷ:

2
Асосӣ
Каталог
["Асосӣ","Каталог"]

Ҷустуҷӯ на танҳо дар тамоми ҳуҷҷат, балки дар дохили элементи ёфташуда ҳам мумкин аст: menu.querySelectorAll("li") танҳо дар байни наслҳои menu ҷустуҷӯ мекунад.

Матни элемент: textContent

Хосияти textContent — тамоми матни дохили элемент (бе тегҳо). Онро хондан ва навиштан мумкин аст:

const title = document.querySelector("#title");
console.log(title.textContent);   // Мағоза
title.textContent = "Мағозаи бозичаҳо";

Матн аз DOM — ҳамеша сатр аст. Агар дар он адад бошад ва ҳисоб кардан лозим ояд, табдил диҳед: Number(el.textContent). Ададро ҳам навиштан мумкин аст — браузер худаш онро ба сатр табдил медиҳад.

HTML дар дохил: innerHTML

innerHTML — мундариҷаи элемент якҷоя бо тегҳо. Сатрро ба он навишта, шумо ҳама чизи дохили элементро бо нишонагузории нав иваз мекунед:

const box = document.querySelector("#box");
box.innerHTML = "<b>Ғафс</b> ва <i>курсив</i>";
box.innerHTML = "";   // элементро зуд тоза кардан

Муҳим: ҳеҷ гоҳ матнеро, ки корбар ворид кардааст, тавассути innerHTML нагузоред. Агар дар он <img src=x onerror="..."> бошад, браузер коди бегонаро иҷро мекунад — ин осебпазирии XSS аст. Барои матн ҳамеша textContent-ро истифода баред: вай сатрро ҳамон тавре ки ҳаст нишон медиҳад, тегҳо ба элемент табдил намеёбанд.

Қиматҳои майдонҳои воридкунӣ

Дар майдонҳои <input>, <textarea> ва <select> матне, ки корбар ворид кардааст, на дар textContent, балки дар хосияти value аст:

const nameInput = document.querySelector("#name");
console.log(nameInput.value);     // он чи ба майдон ворид карданд
nameInput.value = "Аня";          // ба майдон навиштан

Дар чекбокс ба ҷои ин checked-ро (true / false) мебинанд.

Скрипт кай иҷро мешавад

Дар сайти ҳақиқӣ скриптро одатан дар охири <body> ё бо атрибути defer пайваст мекунанд — он гоҳ то лаҳзаи иҷро тамоми HTML хонда шудааст ва элементҳо ёфт мешаванд. Агар скрипт дар <head> бе defer бошад, querySelector null бармегардонад: элементҳо ҳанӯз нестанд. Дар ин сайт саҳифаи масъала ҳамеша пеш аз иҷрои коди шумо тайёр аст.

Хулоса

document — даромад ба дарахти саҳифа.
querySelector — аввалин элемент аз рӯи селектор (ё null), querySelectorAll — ҳама.
textContent — матни элемент, innerHTML — нишонагузорӣ (на барои вуруди корбар!), value — қимати майдон.
Матн аз DOM — сатр аст; ададҳоро бо Number(...) табдил медиҳем.