Ба даст овардани унсури DOM дар JavaScript

Акнун мо ба даст овардани унсурҳои DOM-и саҳифаро меомӯзем, то дар оянда бо онҳо баъзе манипулятсияҳоро анҷом диҳем.

Бигзор мо як тугмаи муайян дошта бошем:

<input id="button" type="submit">

Биёед истиноди ин тугмаро ба тағирёбанда даст кунем. Барои ин бояд усули querySelector-и объекти махсуси document-ро истифода кард. Ин усул ҳамчун параметр селектори CSS қабул мекунад ва истинод ба унсури ёфташуда тавассути ин селекторро бармегардонад.

Тугмаи мо атрибути id бо қимати button-ро дорад. Пас, мо метавонем ин тугмаро тавассути селектори #button ёбем. Пас, биёед тугмаи худро ёбем ва истинод ба онро ба тағирёбанда сабт кунем:

let button = document.querySelector('#button');
console.log(button);

3 абзас дода шудааст:

<p id="elem1">1</p>
<p id="elem2">2</p>
<p id="elem3">3</p>

Истинод ба ҳар як абзасро ба тағирёбандаи алоҳида сабт кунед ва муҳтавои ҳар як аз ин тағирёбандаҳоро ба консол чоп кунед.