✅ HTML5 - навигация в дърво на DOM

Съдържание

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

· childNodes: Връща всички дъщерни елементи на родителския елемент.

· първо дете: Връща елемента, който е първото дете на родителски елемент.

· hasChildNodes (): Връща true или true, ако текущият елемент има дъщерни възли.

· последно дете: Връща последното дете на елемент в документа.

· nextSibling: Връща елемента на брат или сестра, дефиниран от текущия HTML елемент.

· parentNode: Връща родителския елемент на текущия HTML елемент.

· предишенСиблинг: Връща елемента на брат или сестра преди текущия HTML елемент.

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

Пример

Има много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.

Един от най -интересните аспекти на плодовете е сортът, наличен във всяка страна. Живея близо до Лондон, в район, известен със своите ябълки.

Родител Първо дете Предишен брат Следващ брат или сестра

Това, което този код постига, е да може да се придвижва между елементите и след като ги засенчи в светло сиво, за да може да различава в коя част на документа се намираме, нека видим в изображението как трябва да го видим в нашия браузър:

Както виждаме, този начин на поставяне на елементите в DOM ни помага, когато не сме сигурни за идентификаторите или когато това е динамична, но дефинирана структура.
С това завършихме този урок, където успяхме да търсим елементи в HTML документ, без да разчитаме на идентификатори или имена на елементи, просто използвайки тяхната връзка в йерархичната структура.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка