ნოუდებთან მუშაობა JavaScript-ში
როგორც იცით, ტეგები შეიძლება შეიცავდეს სხვა ტეგებს ან, JavaScript-ის ტერმინებით რომ ვთქვათ, DOM ელემენტები შეიძლება შეიცავდეს სხვა DOM ელემენტებს. ამას გარდა, მათში შეიძლება იყოს კომენტარები და ჩვეულებრივი ტექსტი. კომენტარებს, ტექსტებს და DOM ელემენტებს აერთიანებს ერთი სახელწოდება - ნოუდები.
თქვენ უკვე იცნობთ თვისებებს firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
ეს თვისებები მუშაობენ ზუსტად DOM ელემენტებთან,
ისე, რომ არ ითვალისწინებენ სხვა ნოუდებს. როგორც წესი, სწორედ
ესაა საჭირო ჩვენთვის.
თუმცა, ასევე არსებობენ თვისებები firstChild,
lastChild, nextSibling, previousSibling.
ეს თვისებები მუშაობენ ანალოგიურად,
თუმცა, იღებენ მხედველობაში ყველა ნოუდს. მოდით ვნახოთ
განსხვავება ამ თვისებებს შორის მაგალითზე.
დავუშვათ, გვაქვს div, რომელიც შეიცავს სამ ნოუდს:
<div id="elem"><!--com-->text<span>tag</span></div>
მივიღოთ მითითება ამ div-ზე ცვლადში:
let elem = document.querySelector('#elem');
ახლა კი მოდით ვნახოთ, რა ჩანაწერია
თვისებებში firstChild და firstElementChild:
console.log(elem.firstChild); // კომენტარი
console.log(elem.firstElementChild); // ტეგი span
დაწერეთ კოდი, რომელიც აჩვენებს განსხვავებას
lastChild და lastElementChild შორის.
დაწერეთ კოდი, რომელიც აჩვენებს განსხვავებას
nextSibling და nextElementSibling შორის.
დაწერეთ კოდი, რომელიც აჩვენებს განსხვავებას
previousSibling და previousElementSibling შორის.