Обектният модел на документа (DOM) е структурното представяне на HTML документ. DOM е дърво от възли, които браузърът създава за всяка уеб страница в интернет.

DOM е обектно-ориентиран. Всеки елемент в DOM има свой собствен набор от атрибути и методи, до които можете да получите достъп с помощта на JavaScript.

В тази статия с урок ще научите как да използвате функциите за селектор на DOM за достъп до елементи на уеб страница.

Как да получите достъп до DOM елементи

Можете да получите достъп до DOM елемента от най-високо ниво на уеб страница чрез глобалния обект на документ. Например, ако имате уеб страница като следната:

Добре дошли


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic acceptamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




относно


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic acceptamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



статии



Заглавие на статия едно


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic acceptamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Прочетете още 





Заглавие на статията две


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic acceptamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Прочетете още 





Заглавие на статия трета


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic acceptamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Прочетете още 





Заглавие на статия четвърто


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic acceptamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Прочетете още 

Писане документ в конзолата на вашия браузър и натискането на Enter ще доведе до следния изход:

Резултатът във вашата конзола е интерактивен. Можете да кликнете върху глава и тяло елементи, за да ги разширите. Това ще доведе до следния изход:

Всеки елемент на раздел в етикетът също е разширяем. В зависимост от структурата на уеб страницата, елементите ще продължат да се разширяват, за да разкрият повече елементи. Това трябва да ви даде по-ясно разбиране на структурата на DOM.

Свързани: Скритият герой на уебсайтовете: Разбиране на DOM

Обектът на документа има специално свойство, тяло, представляващ елемента на тялото. Така че, за да получите достъп до елемента body, можете да въведете следното в конзолата:

документ.тяло

Това ще произведе следния изход:

Но това е доколкото можете да стигнете, като използвате свойствата на обекта. Всяка страница има глава и тяло, но иначе е уникална. Така че пишете документ.body.section или нещо подобно просто няма да работи както бихте искали. Вместо това има методи, които можете да извикате на обекта на документа за достъп до конкретни елементи.

Какво представляват селекторите на DOM елементи?

Селекторите на DOM елементи са група от методи на JavaScript, които можете да използвате върху обекта на документа за достъп до елементи в уеб страница. Селекторите на DOM елементи имат две категории – единични и множествени селектори.

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

Свързани: Как да насочвате част от уеб страница с помощта на CSS селектори

Селекторите за единичен елемент са:

• getElementById()
• querySelector()

Селекторите за множество елементи са:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Селекторът на DOM елемент, който използвате, ще зависи от елемента(ите), до който се опитвате да получите достъп.

Използване на единични селектори на DOM елементи

Най-вече ще виждате селектори в приложенията на JavaScript. И така, нека се отдалечим от конзолата. Създайте JavaScript файл и го свържете с вашия HTML файл, като използвате следния маркер на скрипта:

Където стойността src е името на вашия JavaScript файл. Поставете този маркер на скрипт точно преди затварящия си маркер body, .

В getElementById() методът осигурява достъп до един елемент на уеб страница, използвайки стойността на неговия идентификатор. В HTML документа по-горе има няколко елемента с идентификатори. За да се насочите към раздел елемент с идентификатор „article-3“ можете да добавите следния код към вашия JavaScript файл:

стойност = document.getElementById('article-3')

Сега елементът div с член-3 ID и всички негови съответни свойства са достъпни от стойност променлива. Можете да отпечатате стойност променлива към конзолата с помощта на следния ред код:

console.log (стойност)

Ще видите името на класа, което е присвоено на елемента div, както и други важни атрибути, като вътрешния HTML.

Другият селектор на единичен елемент е querySelector(). Тази функция е по-гъвкава, тъй като можете да й предадете всеки низ за CSS селектор. Все пак можете да го използвате само за избор на един елемент в даден момент.

Например, има един клас в HTML оформлението по-горе – статии. Четири div елемента използват този клас, но querySelector() функцията ще върне само първия елемент, който има клас "articles".

Използване на querySelector() с клас

Добавете следния код в края на вашия скрипт:

стойност = document.querySelector('.articles')
console.log (стойност)

Това ще върне само първия раздел елемент с клас „статии“. Забележете, че задавате селектора в същия формат като CSS селектор. В CSS водещата точка указва име на клас.

Използване на querySelector() с идентификатор

стойност = document.querySelector('#article-3')
console.log (стойност)

Този код ще върне единствения елемент с идентификатор „артикул-3“, третият раздел елемент с клас „статии“. Отново селекторният низ използва стандартен CSS синтаксис, с a # символ, указващ идентификатор.

Използване на множество селектори на DOM елементи

Останалите селекторни функции извличат групи от елементи. Те са getElementsByTagName(), getElementsByClassName(), и querySelectorAll().

Използване на getElementsByTagName()

В getElementsByTagName() селектор извлича група от елементи със същото име на таг. Например, ако искате да изберете всички h2 елементи на уеб страница, можете да използвате следния код:

стойност = document.getElementsByTagName('h2')
console.log (стойност)

Това съхранява всички h2 елементи в HTML колекция, наречена value.

Използване на getElementsByClassName()

В getElementsByClassName() селектор връща колекция от елементи със същото име на клас.

стойност = document.getElementsByClassName('статии')
console.log (стойност)

Вмъкването на кода по-горе във вашия JavaScript файл ще върне четирите div елемента с името на класа „статии“ в конзолата на браузъра.

Използване на querySelectorAll()

В querySelectorAll() метод връща списък с възли от всички елементи, които съответстват на дадения селектор. За достъп до всички елементи на абзаца в секцията на блога, можете да използвате следния код:

стойност = document.querySelectorAll('#blog p')
console.log (стойност)

Можете дори да включите няколко селектора в низа, като ги разделите със запетая, точно както в CSS:

стойност = document.querySelectorAll('h2, .articles')
console.log (стойност)

Използвайте DOM селектори, за да направите динамични уеб страници

В този момент трябва да имате ясно разбиране за DOM и как работи. Трябва също да знаете различните единични и множествени селектори, както и как да ги използвате.

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

Как да направите уебсайта си отзивчив и интерактивен с CSS и JavaScript

Настроихте уебсайта си с HTML и CSS, но сега трябва да добавите логика. Ето какво да направите.

Прочетете Следващото

За автора