Работа з вузламі ў JavaScript
Як вы ведаеце, тэгі могуць утрымліваць іншыя тэгі або, кажучы ў тэрмінах JavaScript, DOM элементы могуць утрымліваць іншыя DOM элементы. Акрамя гэтага, аднак, у іх могуць быць каментары і звычайны тэкст. Каментары, тэксты і DOM элементы аб'ядноўваюць адной назвай - вузлы.
Вам ужо знаёмыя ўласцівасці firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Гэтыя ўласцівасці працуюць менавіта з DOM элементамі,
ігнаруючы астатнія вузлы. Як правіла, менавіта
гэта нам і патрабуецца.
Аднак, існуюць таксама ўласцівасці firstChild,
lastChild, nextSibling, previousSibling.
Гэтыя ўласцівасці працуюць аналагічным чынам,
аднак, улічваючы ўсе вузлы. Давайце паглядзім
розніцу паміж гэтымі ўласцівасцямі на прыкладзе.
Хай у нас ёсць дыў, які змяшчае ў сабе тры вузла:
<div id="elem"><!--com-->text<span>tag</span></div>
Атрымаем спасылку на гэты дыў у зменную:
let elem = document.querySelector('#elem');
А цяпер давайце паглядзім, што змяшчаецца
ў ўласцівасцях firstChild і firstElementChild:
console.log(elem.firstChild); // каментарый
console.log(elem.firstElementChild); // тэг span
Напішыце код, які пакажа розніцу паміж
lastChild і lastElementChild.
Напішыце код, які пакажа розніцу паміж
nextSibling і nextElementSibling.
Напішыце код, які пакажа розніцу паміж
previousSibling і previousElementSibling.
