DOM tehnike: elementi roditelj, dijete i susjed. Podređeni i kontekstualni CSS selektori Pristup prvom podređenom css elementu

koristeći metodu createElement() i zatim ga dodajući u tijelo. Vrlo je jednostavno i vjerojatno ste već koristili ovu tehniku.

Ali umjesto umetanja posebno stvorenog elementa, mogu također koristiti appendChild() i jednostavno premjestiti postojeći element. Recimo da imamo sljedeće oznake:

Mogu promijeniti lokaciju popisa pomoću sljedećeg koda:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); kontejner.appendChild(myList);

Konačni DOM će izgledati ovako:

Primijetite da je cijeli popis uklonjen sa svog mjesta (iznad odlomka) i zatim umetnut iza njega prije završnog tijela. Iako se metoda appendChild() obično koristi za dodavanje elemenata stvorenih pomoću createElement(), ona se također može koristiti za premještanje postojećih elemenata.

Također mogu potpuno ukloniti podređeni element iz DOM-a koristeći removeChild() . Evo kako izbrisati naš popis iz prethodnog primjera:

Var myList = document.getElementById("myList"), container = document.getElementById("c"); container.removeChild(myList);

Element je sada uklonjen. Metoda removeChild() vraća uklonjeni element tako da ga mogu spremiti u slučaju da mi zatreba kasnije.

Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

Postoji i metoda ChildNode.remove() koja je relativno nedavno dodana u specifikaciju:

Var myList = document.getElementById("myList"); mojList.ukloni();

Ova metoda ne vraća udaljeni objekt i ne radi u IE (samo Edge). I obje metode uklanjaju tekstualne čvorove na isti način kao i čvorove elemenata.

Zamjena podređenih elemenata

Mogu zamijeniti postojeći podređeni element novim, bez obzira na to postoji li taj novi element ili sam ga stvorio ispočetka. Evo oznake:

Primjer teksta

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "primjer"; myDiv.appendChild(document.createTextNode("Novi tekst elementa")); document.body.replaceChild(myDiv, myPar);

Kao što vidite, metoda replaceChild() uzima dva argumenta: novi element i stari element koji zamjenjuje.

Također mogu koristiti ovu metodu za premještanje postojećeg elementa. Pogledajte sljedeći HTML:

Primjer teksta 1

Primjer teksta 2

Primjer teksta 3

Treći odlomak mogu zamijeniti prvim odlomkom pomoću sljedećeg koda:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Sada generirani DOM izgleda ovako:

Primjer teksta 2

Primjer teksta 1

Odabir određene djece

Ima ih nekoliko na različite načine odabirom određenog elementa. Kao što je ranije prikazano, mogu započeti korištenjem zbirke djece ili svojstva childNodes. Ali pogledajmo druge opcije:

Svojstva firstElementChild i lastElementChild rade upravo ono što njihova imena sugeriraju da rade: biraju prvi i zadnji podređeni element. Vratimo se našem označavanju:

• Primjer prvi
• Primjer drugi
• Primjer tri
• Primjer četiri
• Primjer pet
• Primjer šest

Mogu odabrati prvi i zadnji element koristeći ova svojstva:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Primjer jedan" console.log(myList.lastElementChild.innerHTML); // "Primjer šest"

Također mogu koristiti svojstva previousElementSibling i nextElementSibling ako želim odabrati podređene elemente koji nisu prvi ili posljednji. To se postiže kombinacijom svojstava firstElementChild i lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Primjer dva" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Primjer pet"

Postoje također slična svojstva firstChild, lastChild, previousSibling i nextSibling, ali ona uzimaju u obzir sve vrste čvorova, a ne samo elemente. Općenito, svojstva koja uzimaju u obzir samo čvorove elemenata korisnija su od onih koja odabiru sve čvorove.

Umetanje sadržaja u DOM

Već sam pogledao načine za umetanje elemenata u DOM. Prijeđimo na sličnu temu i pogledajmo nove značajke za umetanje sadržaja.

Prvo, postoji jednostavna metoda insertBefore(), slično kao replaceChild(), uzima dva argumenta i radi i na novim i na postojećim elementima. Evo oznake:

Primijetite odlomak koji ću prvo ukloniti, a zatim ga umetnuti prije popisa, sve u jednom potezu:

Var myList = document.getElementById("myList"), container = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

U rezultirajućem HTML-u odlomak će se pojaviti prije popisa i to je još jedan način za prelamanje elementa.

Kao replaceChild(), insertBefore() uzima dva argumenta: element koji treba dodati i element ispred kojeg ga želimo umetnuti.

Ova metoda je jednostavna. Isprobajmo sada moćniju metodu umetanja: metodu insertAdjacentHTML().

Glavna zadaća ovog selektora slijedi iz njegovog naziva i jest pristup podređenom elementu. Prikazuje se pomoću primitivnog znaka ">", koji povezuje podređeni element s nadređenim elementom. Također je vrijedno napomenuti da se koriste jednostavni selektori. Kao primjer, razmotrite sljedeće kodiranje:

Element > ul ( padding-top: 20px; )

Ovo kodiranje znači da će popis koji je ugniježđen u element imati podstava 20 piksela od gornjeg ruba. Prisutnost ikone “>” u ovom unosu označava da će se pravilo primijeniti samo na popise prve razine ugniježđivanja.

Detaljna analiza načina rada selektora podređenog elementa

Selektor podređenog elementa ima slična svojstva konceptu selektora potomka. Međutim, postoji karakteristična značajka koja pokazuje temeljnu razliku između ovih operacija. Ona leži u činjenici da se utjecaj selektora potomaka proteže na apsolutno sve elemente, dok selektor potomka podređuje stilove pozicija prve razine klasifikacije.

Sljedeći primjer pomoći će vam da jasnije procijenite rad operatora izbornika djeteta:

Div > p (boja: #ff0000; /* crvena */)

< div>Ovaj će redak prema zadanim postavkama imati crni tekst.< span>Ova linija postaje crvena zbog činjenice da je p podređena oznaka za div. < p>Opet vidimo crna slova.< span>Ovdje također vidimo crne simbole, budući da je za ovaj raspon roditelj p oznaka.

Ovaj primjer potvrđuje rad operatora selektora djeteta prema stupnju ugniježđenosti.

Ograničenje za korištenje operatora odabira djeteta

Vrijedno je napomenuti da ovu operaciju podržavaju svi preglednici osim legendarnog Internet Explorer 6. Mislim da malo ljudi koristi ovaj preglednik, međutim, ako postoje takvi jedinstveni, onda za njih postoji izlaz iz situacije, koji će biti opisan u zasebnom članku.

Zašto se koristi?

Programeri se okreću selektorima podređenih elemenata kada trebaju dodijeliti vlastiti jedinstveni stil ugniježđenim elementima. Također, korištenje ovog selektora može smanjiti količinu CSS-a, što će poboljšati čitljivost dokumenta. Kao što praksa pokazuje, ova se operacija najčešće koristi pri izradi padajućih izbornika.

Selektor podređenog elementa također se koristi za dodjeljivanje jedinstvenih stilova elementima čiji su roditelji već poznati. Drugim riječima:

Glavno > zaglavlje ( /* dekoracija se odnosi samo na glavno zaglavlje */ }

Ovaj primjer vrijedi u slučajevima kada se oznaka zaglavlja koristi za isticanje naslova članaka. U našem slučaju postavljamo dizajn samo za glavno zaglavlje i ne utječemo na sekundarna. Ova tehnika vam također omogućuje izbjegavanje upotrebe nepotrebnih identifikatora, što zauzvrat olakšava težinu CSS datoteke i čini je čitljivijom.

Sumirati

Dakle, operator podređenog elementa može se koristiti ne samo za dizajniranje padajućih izbornika, već i za blago optimiziranje vašeg internetskog resursa za rad robota za pretraživanje.

Zadnja izmjena: 21.04.2016

Posebnu skupinu pseudoklasa čine pseudoklase koje vam omogućuju odabir specifičnih podređenih elemenata:

:first-child : predstavlja element koji je prvi dijete

:last-child : predstavlja element koji je posljednji dijete

:only-child : predstavlja element koji je jedino dijete nekog kontejnera

:only-of-type : odabire element koji je jedini element određene vrste (tag) u nekom spremniku

:nth-child(n) : predstavlja podređeni element koji ima određeni broj n, na primjer, drugi element dijete

:nth-last-child(n) : predstavlja podređeni element koji ima određeni broj n, počevši od kraja

:nth-of-type(n) : odabire podređeni element određenog tipa koji ima određeni broj

:nth-last-of-type(n) : odabire podređeni element određenog tipa koji ima određeni broj, počevši od kraja

Prvo dijete pseudorazreda

Koristimo pseudo-klasu prvog djeteta za odabir prvih poveznica u blokovima:

Tablete

pametni telefoni

Selektor a:first-child stilizira se na vezi ako je prvo dijete bilo kojeg elementa.

A u drugom bloku, prvi element je odlomak, tako da se stil ne primjenjuje ni na jednu vezu.

Pseudoklasa posljednje dijete

Koristimo pseudo-klasu posljednjeg djeteta:

pametni telefoni

Tablete

Selektor a:last-child definira stil za veze koje su posljednji podređeni elementi.

U prvom bloku, posljednji podređeni element je veza. Ali u drugom, posljednji podređeni element je odlomak, tako da se u drugom bloku stil ne primjenjuje ni na jednu poveznicu.

Izbornik jedinog djeteta

Selektor :only-child odabire elemente koji su jedina djeca spremnika:

Naslov

Paragrafi s tekstovima "Text1" i "Text4" jedina su djeca u svojim vanjskim spremnicima, pa su stilizirani crvenom bojom fonta.

Pseudo-klasa samo tipa

Pseudoklasa samo tipa odabire element koji je jedini element određenog tipa u spremniku. Na primjer, jedan div element, dok u istom spremniku može biti koliko god želite elemenata drugih vrsta.

Element jednog odlomka i raspona

Iako divovi imaju definiran stil, on se neće primijeniti jer postoje dva diva u spremniku tijela, a ne jedan. Ali u karoseriji postoji samo jedan p element, pa će dobiti stil. Također postoji samo jedan span element u p spremniku, tako da će i on biti stiliziran.

Pseudo-klasa n-to dijete

Pseudoklasa nth-child omogućuje stiliziranje svakog drugog, trećeg elementa, samo parnih ili samo neparnih elemenata itd.

Na primjer, stilizirajmo parne i neparne retke tablice:

pametni telefoni

Samsung	Galaxy S7 Edge	60000
Jabuka	iPhone SE	39000
Microsoft	Lumia 650	13500
Alcatel	Idol S4	30000
Huawei	P9	60000
HTC	HTC 10	50000
Meizu	Pro 6	40000
Xiaomi	Mi5	35000

Da biste stilizirali neparne elemente, proslijedite vrijednost "odd" biraču:

Tr:nth-child(odd)()

Da biste stilizirali parne elemente, proslijedite vrijednost "even" selektoru:

Tr:nth-child(even)()

Također možemo proslijediti broj elementa koji treba stilizirati ovom selektoru:

Tr:nth-child(3) (boja-pozadine: #bbb; )

U ovom slučaju, treća linija je stilizirana.

Druga mogućnost je korištenje rezerviranog mjesta za broj, koji je izražen slovom n:

Tr:nth-child(2n+1) (boja-pozadine: #bbb; )

Ovdje se stil primjenjuje na svaki drugi neparni red.

Broj ispred n (u ovom slučaju 2) predstavlja koji će podređeni element biti sljedeći označen. Broj koji dolazi nakon znaka plus označava s kojim elementom odabir treba započeti, odnosno +1 znači da treba započeti s prvim podređenim elementom.

Dakle, u ovom slučaju odabir počinje s 1. elementom, a sljedeći odabrani je 2 * 1 + 1 = 3. element, zatim 2 * 2 + 1 = 5. element, i tako dalje.

Na primjer, ako želimo odabrati svaki treći element, počevši od drugog, mogli bismo napisati:

Tr:nth-child(3n+2) (boja-pozadine: #bbb; )

Pseudoklasa :nth-last-child u biti pruža istu funkcionalnost, samo se elementi broje od kraja, a ne od početka:

Tr:nth-last-child(2) ( background-color: #bbb; /* 2. red od kraja, odnosno pretposljednji */ ) tr:nth-last-child(2n+1) ( background- boja: #eee ; /* neparni redovi, počevši od kraja */ )

Pseudo-klasa n-tog tipa

Pseudo-klasa :nth-of-type omogućuje odabir podređenog elementa određenog tipa prema određenom broju:

Tr:nth-of-type(2) (boja-pozadine: #bbb;)

Pseudoklasa nth-last-of-type radi slično, samo što se sada elementi broje od kraja:

Tr:nth-last-of-type(2n) (boja-pozadine: #bbb;)

Opis

Pseudoklasa :nth-child koristi se za dodavanje stila elementima na temelju numeriranja u stablu elemenata.

Sintaksa

element:nth-child(odd | even |<число> | <выражение>) {...}

Vrijednosti

neparni Svi neparni brojevi elemenata. parni Svi parni elementi. broj Redni broj podređenog elementa u odnosu na njegovog roditelja. Numeriranje počinje od 1, ovo će biti prvi element na popisu. izraz Zadan kao an+b, gdje su a i b cijeli brojevi, a n je brojač koji automatski uzima vrijednost 0, 1, 2...

Ako je a nula, tada se ne piše i unos se skraćuje na b. Ako je b nula, tada također nije navedeno i izraz se piše u obliku an . a i b mogu biti negativni brojevi, u kojem se slučaju znak plus mijenja u znak minus, na primjer: 5n-1.

Kroz korištenje negativne vrijednosti a i b neki rezultati također mogu biti negativni ili nula. Međutim, na elemente utječu samo pozitivne vrijednosti zbog numeriranja elemenata počevši od 1.

U tablici 1 prikazuje neke moguće izraze i ključne riječi, a također pokazuje koji će se brojevi elemenata koristiti.

HTML5 CSS3 IE Cr Op Sa Fx

	2134	2135	2136	2137	2138
Ulje	16	34	62	74	57
Zlato	4	69	72	56	47
Drvo	7	73	79	34	86
Kamenje	23	34	88	53	103

U ovom primjeru, pseudoklasa :nth-child koristi se za promjenu stila prvog reda tablice, kao i za isticanje svih parnih redaka (slika 1).

Mislim da mnogi znaju za kontekstualni selektori u CSS-u. Najčešće se koriste, međutim, iskusni dizajneri izgleda vrlo dobro znaju da ponekad kontekstualni selektori stvaraju određene probleme. Ovaj problem nastaje zbog činjenice da u strukturi elementa može postojati mnogo identičnih elemenata ugniježđenih jedan u drugi. I morate primijeniti stil ne na sve ugniježđene elemente, već samo na neposredni podređeni element. To je ono za što se koriste selektori djece u CSS-u.

Da bi problem bio jasniji, dajmo mali primjer. Možemo li imati jednu ovakvu HTML kôd:

A naš zadatak je učiniti ga samo crvenim " Drugi paragraf". Ako pišemo pomoću birača konteksta:

Spremnik p (
boja: crvena;
}

Tada će oba odlomka postati crvena, što nam uopće ne treba. Ovaj se problem može vrlo jednostavno riješiti korištenjem selektori djece u CSS-u:

Spremnik > p (
boja: crvena;
}

To je to, sada imamo samo crveno" Drugi paragraf". Budući da je ovaj odlomak izravni potomak .kontejner. A " Prvi paragraf" je dijete unutarnjeg div, dakle, na njega ne utječe izbornik djeteta.

Ovako se takvi problemi lako rješavaju, ali postoji jedan veliki nedostatak selektori djece u CSS-u- ne rade u preglednicima Internet Explorer. Zbog toga je njihova uporaba vrlo nepoželjna. Ali ako se iznenada negdje sretnete, sada ćete znati što to znači ovaj tip selektora i što radi.