itthon / Közösségi média / A css gyermekelemekre hivatkozik. DOM-manipulációs technikák: szülő, gyermek és szomszéd elemek. Ellenőrizendő kérdések

A css gyermekelemekre hivatkozik. DOM-manipulációs technikák: szülő, gyermek és szomszéd elemek. Ellenőrizendő kérdések

05.04.2020 Közösségi média

Sziasztok kedves olvasók! Folytatva a CSS-szelektorok témáját, szeretném felhívni a figyelmet gyermek- és kontextusválasztók leírása, valamint az összehasonlító elemzésüket, hiszen alkalmazási logikájuk szerint nagyon hasonlóak, bár van némi különbségük.

Publikációimban részletesen foglalkoztam különféle témákkal típusú CSS választó: ; és . Egyébként az utolsó cikkben, ahol megértették különböző típusok attribútum választó, részletesen leírtam, hogy az elméleti számításaim hogyan ellenőrizhetők azonnal a HTML és CSS kód online módosításával a beépített eszköz segítségével Google Chrome(). Ezek a szerkesztőeszközök az összes népszerű böngésző legújabb módosításait tartalmazzák, beleértve a Firebug beépülő modult a Firefoxhoz ().

A bejegyzés elméleti anyagát bármely oldal bármely oldalának szerkesztésével is tanulmányozhatja! Ehhez egyszerűen nyomja meg az F12 billentyűt, ha Google Chrome-ot vagy Mozilla Firefox(). És most bemutatom a p címke tartalmát, amelynek példáján tanulmányozni fogjuk gyermek és kontextus CSS-választók:

Ez a bekezdés tartalmazza em és erős formázási címkék, amelyek kiemelik a szöveget bátorÉs dőlt betűvel.

A fent leírt szerkesztő eszközzel ezt a bekezdést közvetlenül ebbe a cikkbe szúrtam be úgy, hogy beírtam a megfelelő szöveget a szerkesztőablak bal oldalára, aminek eredményeként ennek a bekezdésnek a szövege az oldal legtetején jelent meg:


Ez a HTML konstrukció , . Ez a bekezdés kísérleti jellegű lesz a mai publikációban, példáján bemutatom, hogyan változik a szövegének kialakítása, attól függően, hogy a CSS-szabályban mely szelektorokat - gyermek vagy kontextus - használjuk.

A gyermek olyan elem, amely közvetlenül a szülőelemen belül található.. Mielőtt közvetlenül rátérnék a témára, adok egy képet, amely tükrözi a címkék hierarchiáját HTML dokumentum a bekezdés példáján, amelynek szövege fent van, és amelyet ma elemezünk:

Ezt a kialakítást elemek fájának is nevezik. Ez az ábra világosan mutatja a tárolók egymásba ágyazását, ami hierarchikus kapcsolatot jelent a címkék között. A p bekezdéscímke a reláció gyermeke. Ugyanakkor az erős címke nem a div gyermeke, mivel a p tárolóban található.

Gyermek CSS-választó

Az elemfában lévő gyermekválasztó mindig közvetlenül a szülőelemen belül van, ebben az esetben a CSS-választó írásának szintaxisa a következő:

A stílus a Selector 2-re kerül alkalmazásra, de csak akkor, ha az az 1. kijelölő gyermeke. Nézzük meg közelebbről a fenti képernyőképet az elemfával. Például a szintaxist követve beállíthatja a következő szabályt:

P> em (szín: zöld;)

Ez a szabály a bekezdés utolsó szavát fogja érinteni „dőlt”-ként, mivel ez van a nyitó és záró em címke között. Az em címke p gyermeke, mert közvetlenül benne van elhelyezve, így a tartalmi szöveg, vagyis a „dőlt betűs” szó zöld színű lesz.


A másik em címke azonban nem a p címke közvetlen gyermeke, mert az erős címke része, így a bekezdés „em and strong formatting tags” része nem lesz színezve.

Kontextus szerinti CSS-választó

Ideje kitalálni mi az a CSS kontextusválasztó. A webhely egy adott oldalának elrendezésekor a címkék gyakran egymásba vannak ágyazva. Annak érdekében, hogy az ilyen elemek stílusai megfelelően működjenek, szelektorokat használnak, amelyek valamilyen kontextusban működnek, innen ered a név.

Ha a CSS-szabály alkalmazásához a gyermekválasztónak szükségszerűen közvetlenül a szülőelemen belül kell lennie (az első beágyazási szint), akkor a kontextusválasztó számára ez teljesen lényegtelen, és bármilyen beágyazási szint alkalmazható, egyébként a Az elem tulajdonságai a szülőből kerülnek át. A szintaxis a következő:

Amint láthatja, a kontextusválasztó egyszerű szelektorokból áll, amelyeket szóközzel választanak el. A kontextus választókhoz két vagy több beágyazott címke használata megengedett. Most állítsuk össze a CSS-szabályt a tesztelt bekezdéshez, amelyet fent idéztem:

P'em (szín: zöld;)


Mint látható, nem csak a bekezdés tartalmának azon részének szövege van zöldre színezve, amely közvetlenül az em formázási címkében van, azaz a „dőlt” szó, hanem egy másik em szövegrésze is. tag, amely szintén az erős címke része. Ez azért történt, mert a kontextusválasztóval rendelkező szabály érvényben van, amelyhez a beágyazási szint nem fontos, ellentétben a gyermekválasztóval. Ez az alapvető különbség a gyermek- és a kontextusválasztó között.

Nézzünk egy másik példát a kontextus és a gyermekválasztók kölcsönhatására a bekezdésünkkel. Írjuk fel a következő CSS-szabályokat a gyermek- és kontextusválasztókhoz:

Div em (szín: piros;) p > em (szín: zöld;)

Ezt követően bekezdésünk a következő formátumot veszi fel:


Mint látható, az em és strong címkékbe zárt szövegrész pirosra van színezve, mert igaz rá a kontextuális kiválasztó szabály, vagyis az em tag az strong és div konténerek között van, a beágyazási szint pedig, mint pl. már megjegyeztem, nem számít.

Felmerül a kérdés: miért van zöld színű a „dőlt” szó, amely egyben az em tartalma is? Hiszen számára is releváns a kontextusválasztó szabály. De a gyermekválasztó szabály a bekezdés szövegének erre a részére is vonatkozik, mert nem mond ellent annak a feltételnek, hogy a gyermekválasztó esetében az elemnek közvetlenül a p címkén belül kell lennie.

A helyzet az, hogy a CSS-nek elsőbbségi törvénye van az alábbi CSS-tulajdonságokra. Ez azt jelenti, hogy ebben az esetben a gyermekválasztó szabály alacsonyabb a dokumentumban, mint a tároló div környezeti választójához megadott CSS-stílusok. Ezért a „dőlt betűs” szó zöld. Ha felcseréli őket, akkor a „p> em (szín: zöld;)” szabály megszűnik, és a szöveg „dőlt” része piros lesz.

Ennek a választónak a fő célja a nevéből következik, és a gyermekelemre való hivatkozás. Az elemi ">" jellel jelenik meg, amely a gyermek elemet a szülő elemhez kapcsolja. Azt is érdemes megjegyezni, hogy a forgalomban egyszerű szelektorokat használnak. Példaként vegye figyelembe a következő kódolást:

Elem > ul (feltöltés: 20 képpont; )

Ez a kódolás azt jelenti, hogy az elembe ágyazott lista felülről 20 képpontnyi belső kitöltéssel rendelkezik. A ">" jel jelenléte ebben a bejegyzésben azt jelzi, hogy a szabály csak az első beágyazási szint listáira vonatkozik.

A gyermekválasztó működésének részletes elemzése

A gyermekelem-választó hasonló tulajdonságokkal rendelkezik, mint a gyermekelem-választó. Van azonban egy funkció, amely megmutatja alapvető különbség tranzakciós adatok. Abban rejlik, hogy a leszármazott választó hatása abszolút minden elemre kiterjed, míg a gyermekválasztó az első osztályozási szint pozícióinak stílusait alárendeli.

A következő példa segít jobban megérteni a gyermekválasztó operátor munkáját:

Div > p ( szín: #ff0000; /* piros */ )

< div> Adott sor alapértelmezés szerint fekete szöveg lesz.< span>Ez a sor pirosra színeződik, mivel p a div gyermekcímkéje. < p>Ismét fekete betűket látunk.< span>Itt fekete szimbólumokat is látunk, mivel a p címke ennek a tartománynak a szülője.

Ez a példa megerősíti a gyermekválasztó operátor működését a beágyazás mértékének megfelelően.

A gyermekválasztó operátor alkalmazására vonatkozó korlátozás

Érdemes megjegyezni, hogy ezt a műveletet a legendary kivételével minden böngésző támogatja internet böngésző 6. Szerintem kevesen használják ezt a böngészőt, de ha vannak egyediek, akkor van rá kiút, amiről külön cikkben lesz szó.

Miért használják

A programozók gyermekelem-választókra hivatkoznak, amikor saját egyedi stílusukat kell hozzárendelniük a beágyazott elemekhez. Ezenkívül ennek a választónak a használata csökkentheti a CSS mennyiségét, ami javítja a dokumentum olvashatóságát. A gyakorlat azt mutatja, hogy ezt a műveletet leggyakrabban legördülő menük létrehozásakor használják.

A gyermekelem-választót arra is használják, hogy egyedi stílusokat rendeljenek hozzá azokhoz az elemekhez, amelyek szülei már előre ismertek. Más szavakkal:

Main > header( /* a stílus csak a fő fejlécre vonatkozik */ }

Ez a példa olyan esetekben érvényes, amikor a fejléccímkét a cikkek címsorainak kiemelésére használják. Esetünkben csak a fő fejléchez állítjuk be a tervezést, a másodlagoshoz ne nyúljunk hozzá. Ezzel a technikával elkerülhető a szükségtelen azonosítók használata is, ami viszont csökkenti a CSS-fájl súlyát, és olvashatóbbá teszi azt.

Összegezve

Így a gyermekelem operátor nem csak legördülő menük tervezésére használható, hanem az internetes erőforrásunk kismértékű optimalizálására is a keresőrobotok munkájához.

A CSS gyermekválasztók olyan szelektorok, amelyek csak akkor alkalmazhatók stílusok elemre, ha azok más (szülő) elemek gyermekei. A gyermekválasztókhoz hasonlóan a gyermekválasztók is egyszerű szelektorokból (osztályok, azonosítók stb.) álló összetett kiválasztók.

És ismét, ha elfelejtette, mik azok a gyermekelemek, akkor emlékezzünk meg egy már ismert példa vizsgálatával.

<тег1> <тег2>... <тег3><тег4>...

Egy elemet egy másik elem gyermekének nevezünk, ha benne van az első beágyazási szinten. Példánkban<тег2>És<тег3>lányai<тег1>, A<тег4>- ez a lánya<тег3> .

A gyermekválasztók két vagy több egyszerű választóból állnak, amelyeket "> " választ el, ahol először a szülő, majd a gyermeke, majd a gyermek gyermeke, és így tovább. Ez azt jelenti, hogy a leszármazott választókhoz hasonlóan a dokumentumfán keresztüli útvonal is meg van adva. A stílusok csak azokra az elemekre vonatkoznak, amelyek kijelölői az utolsó helyen vannak a listában. Általános szintaxis:

választó1 > választó2 (

A ">" tábla mindkét oldalán szóközök tetszés szerint szerepelhetnek vagy nem.

Példa a CSS gyermekválasztók használatára

Gyermekválasztók

1. bekezdés

2. bekezdés

Eredmény a böngészőben

1. bekezdés

2. bekezdés

Ebben a példában két pontra kell figyelni. Itt három elem található, de közülük csak kettőnek van szegélye, kitöltése és margója. Miért? És a második pillanat. Csak az első bekezdésben van kék szöveg.

Az Internet Explorer 6.0 nem érti a gyermekválasztókat, ezért ha webhelyét ennek a régi böngészőnek a szem előtt tartásával tervezi, tartsa ezt szem előtt.

Gyermekválasztók HTML-táblázatokban

Sok kezdő (és néha nem kezdő) a webhelykészítésben bizonyos problémákkal szembesül, amikor gyermekválasztókat használ a HTML-táblázatokban. Hogy megértsd, mit kérdéses, nézzünk egy ilyen közönséges táblázatot.

1.1-es cella1.2 cella
2.1 cella2.2 cella

És most a kérdés. Mit tenne, ha gyermekválasztókra lenne szüksége, hogy a címkéktől a cellákig lépjen? Ha úgy dönt, hogy így ír, akkor rossz:

táblázat > tr > td( ingatlan érték; ingatlan érték; ... )

Kitalálod, hogy miért baj? Nem? A helyzet az, hogy megfeledkezett még egy elemről – amely, ha nincs is kifejezetten megadva, mégis láthatatlanul jelen van minden HTML-táblázatban. Egyszerűen nem rendelkezik a szükséges nyitó és záró címkékkel, ezért gyakran figyelmen kívül hagyják. Mellesleg igen, HTML oktatóanyag nem mentünk végig rajta, mivel a valóságban ritkán van szükség kifejezett jelzésére. Nos, azt hiszem, már sejtette, mi lesz a helyes bejegyzés, de azért megmutatom.

táblázat > tbody > tr > td( ingatlan érték; ingatlan érték; ... )

Egyébként nem csak a táblázatokban vannak opcionális nyitócímkés elemek, vannak ilyen elemek is. Csak hát a gyakorlatban a „feledékenységi problémák” leggyakrabban a táblázatoknál fordulnak elő, ezért is összpontosítottam erre a figyelmed.

Házi feladat.

  1. Állítsa az oldalon a betűtípust Arial-ra 0,9 em mérettel és némi háttérrel.
  2. Írjon több címsort és bekezdést az oldalra, változtassa meg a címsor szövegének méretét és színét tetszés szerint.
  3. Tegye kékre a hivatkozásokat közvetlenül az oldal bekezdéseiben, aláhúzás nélkül. Ugyanakkor, ha a hivatkozásokat bármilyen címkével kiegészítik, például dőlt betűvel, akkor azokat már aláhúzással és piros színnel kell megjeleníteni. Még egyszer felhívom a figyelmet arra, hogy nem szükséges minden keretezési címkével külön előírni a linkstílusokat, tedd ezt univerzálisan. Hogyan? Gondol.
  4. Készíts egy kis menüt az oldal jobb oldalán és javítsd ki, ehhez kell egy tulajdonság és még pár tulajdonság ami hozzá tartozik, ott kitalálod. Ugyanakkor hagyja, hogy a menü ne csak a böngészőablakon belül maradjon a helyén, hanem görgetéskor se mászzon be az oldal tartalmára.

Azt hiszem, a lecke utolsó pontja lesz a legnehezebb számodra, de ne próbálj meg azonnal teljesen elmerülni a pozicionálás fejlesztésében. Csak csináld meg a házi feladatod. Ez az elem egyébként nem fog működni az Internet Explorer 6.0-ban, mivel az öreg nem érti a fix pozicionálást.

Vlad Merzsevics

A gyermekelem olyan elem, amely közvetlenül a szülőelemen belül található. A dokumentumelemek közötti kapcsolatok jobb megértéséhez bontsunk le egy kis kódot (12.1. példa).

12.1. példa. Elemek beágyazása egy dokumentumba

HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Ebben a példában több tárolót használunk, amelyek a kódban egymásban helyezkednek el. Ez jobban látszik az elemfán, ez a neve a dokumentumcímkék közötti kapcsolatok szerkezetének (12.1. ábra).

Rizs. 12.1. Például az elemek fája

ábrán. A 12.1 kényelmes formában bemutatja az elemek egymásba ágyazását és hierarchiáját. Itt a címke gyermekeként

kedvelt címke

Azonban a címke nem a címke gyermeke

, mert konténerben található

Térjünk vissza a válogatókhoz. A gyermekválasztó az elemfában közvetlenül a szülőelemen belül található. Az ilyen szelektorok használatának szintaxisa a következő.

Selector 1 > Selector 2 ( A stílusszabályok leírása )

A stílus a 2. választóra kerül alkalmazásra, de csak akkor, ha az az 1. választó gyermeke.

Ismételten a 12-1. példára hivatkozva a P > EM ( szín: piros ) stílus a dokumentum első bekezdésében lesz beállítva, mivel a címke a tartály belsejében van

És nem ad eredményt a második bekezdésre. És mindezt a címke miatt a második bekezdésben található a tartályban , tehát a beágyazási feltétel sérül.

Logikájuk szerint a gyermekválasztók hasonlóak a kontextusválasztókhoz. A különbség köztük a következő. A gyermekválasztó csak akkor van stílusos, ha közvetlen gyermek, más szóval közvetlenül a szülőelemen belül. A kontextusválasztóhoz bármilyen szintű beágyazás megengedett. Hogy világos legyen, mi forog kockán, elemezzük a következő kódot (12.2. példa).

Példa 12.2. Kontextus szerinti és gyermekválasztók

HTML5 CSS 2.1 IE Cr Op Sa Fx

Gyermekválasztók

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

Ennek a példának az eredménye az ábrán látható. 12.2.

Rizs. 12.2. Szöveg színkészlet gyermekválasztóval

Címkénként a példában két szabály működik egyszerre: kontextusválasztó (tag belül található

) és gyermekválasztó (tag gyermeke

). Ugyanakkor a szabályok egyenértékűek, mivel minden feltétel teljesül, és nem mond ellent egymásnak. Ilyen esetekben a stílus kerül alkalmazásra, amely az alábbi kódban található, így a dőlt szöveg piros színben jelenik meg. Amint a szabályok megfordulnak, és a DIV I-et lejjebb helyezik, a szöveg színe pirosról zöldre változik.

Vegye figyelembe, hogy a legtöbb esetben a gyermekválasztók hozzáadása elhagyható, ha kontextusválasztókra cseréli őket. A gyermekválasztók használata azonban nagyobb szabályozást tesz lehetővé az elemstílusok felett, ami a kívánt eredményt, valamint egyszerű és leíró kódot eredményez.

Ezeket a kiválasztókat a legkényelmesebb olyan elemekhez használni, amelyek hierarchikus felépítésűek – ide tartoznak például a táblázatok és a különféle listák. A 12-3. példa bemutatja, hogyan módosítható a lista megjelenése stílusok használatával. Az egyik listát a másikba ágyazva egyfajta menüt kapunk. A címsorok vízszintesen, míg a hivatkozáskészlet függőlegesen a címsorok alatt található (12.3. ábra).

Rizs. 12.3. Menü lista

A szöveg vízszintes elhelyezéséhez a float stílus tulajdonság hozzáadódik az LI-választóhoz. A vízszintes és függőleges listák stílusának elkülönítésére gyermekválasztókat használunk (12.3. példa).

12.3. példa. Gyermekválasztók használata

HTML5 CSS 2.1 IE Cr Op Sa Fx

Gyermekválasztók

Ebben a példában a gyermekválasztóknak el kell különíteniük a legfelső szintű listaelemek és a különböző feladatokat végrehajtó beágyazott listák stílusát, így a stílusuk nem fedheti át egymást.

Ellenőrizendő kérdések

1. Milyen színű lesz a félkövér? kurzív szöveg kódban

A megvilágítási szabványok alapja vizuális alkotások osztályozásának alapja bizonyos mennyiségi okokból.

Amikor a következő stílust használja?

P (szín: zöld; )
B (szín: kék;)
I (szín: narancssárga;)
B > I (szín: olíva; )
P > I (szín: sárga; )

  1. Zöld.
  2. Kék.
  3. Narancs.
  4. Olajbogyó.
  5. Sárga.

2. Melyik elem a címke szülője ? </b></p> <ol><li><HEAD></li> <li><BODY></li> <li><HTML></li> <li><META></li> <li><!DOCTYPE></li> </ol><p><b>3. Melyik címkéhez az elem<!DOCTYPE>szülőként viselkedni?</b></p> <ol><li><HTML></li> <li><TITLE></li> <li><BODY></li> <li><HEAD></li> <li>Nem egy címkére.</li> </ol><h2>Válaszok</h2> <p>1. Olajbogyó.</p> <p>3. Nem egy címkére.</p> <p>Az összetett és nehéz webes alkalmazások manapság általánossá váltak. A böngészőkön átívelő és könnyen használható könyvtárak, mint például a jQuery, széles funkcionalitásukkal nagyban segíthetik a DOM-manipulációt menet közben. Ezért nem meglepő, hogy sok fejlesztő gyakrabban használja az ilyen könyvtárakat, mint a natív DOM API-val, amivel sok probléma volt. És bár a böngészők közötti különbségek továbbra is problémát jelentenek, a DOM jelenleg jobb állapotban van, mint 5-6 évvel ezelőtt, amikor a jQuery egyre népszerűbb volt.</p> <p>Ebben a cikkben bemutatom a DOM azon képességét, hogy manipulálja a HTML-t, a szülő, gyermek és szomszéd kapcsolatokra összpontosítva. Befejezésül a böngésző támogatásának lebontásával fejezem be ezeket a funkciókat, de ne feledje, hogy a jQuery típusú könyvtár továbbra is jó választás a hibák és a natív funkciók megvalósításának következetlenségei miatt.</p> <h2>Gyermek csomópontok számolása</h2> <p>A demonstrációhoz a következőket fogom használni <a href="https://sushiandbox.ru/hu/master-pc/osnovnye-tegi-i-atributy-yazyka-html-osnovnye-tegi-html-osnovnye.html">HTML jelölés</a>, a cikk alatt többször is megváltoztatjuk:</p><p> <body> <ul id="myList"> <li>Egy példa</li> <li>példa kettő</li> <li>példa három</li> <li>példa négy</li> <li>ötös példa</li> <li>Hat példa</li> </ul> </body> </p><p>Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); 6</p><p>Mint látható, az eredmények ugyanazok, bár az alkalmazott technikák eltérőek. Az első esetben a gyermekek tulajdonát használom. Ez egy csak olvasható tulajdonság, és egy gyűjteményt ad vissza <a href="https://sushiandbox.ru/hu/browsing-the-internet/ravnenie-po-centru-v-html-vyravnivanie-elementov-v-html-vyravnivanie-teksta-po.html">HTML elemek</a>, amely a kért elemen belül található; számuk megszámlálásához ennek a gyűjteménynek a long tulajdonságát használom.</p> <p>A második példában a childElementCount metódust használom, amely szerintem rendezettebb és potenciálisan jobban karbantartható (erről később, nem hiszem, hogy gondot okozna megérteni, mit csinál).</p> <p>Megpróbálhatnám a childNodes.length használatát (a children.length helyett), de nézd meg az eredményt:</p><p>Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); 13</p><p>13-at ad vissza, mivel a childNodes az összes csomópont gyűjteménye, beleértve a szóközöket – ezt tartsa szem előtt, ha érdekli a gyermek csomópontok és a gyermekelem csomópontok közötti különbség.</p> <h2>Gyermek csomópontok meglétének ellenőrzése</h2> <p>A hasChildNodes() metódussal ellenőrizhető, hogy egy elemnek vannak-e gyermekcsomópontjai. A metódus egy logikai értéket ad vissza, jelezve a jelenlétét vagy hiányát:</p><p>Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // igaz</p><p>Tudom, hogy a listámnak gyermekcsomópontjai vannak, de meg tudom változtatni a HTML-t úgy, hogy ne legyen; most így néz ki a jelölés:</p><p> <body> </body> </p><p>És itt van a hasChildNodes() ismételt futtatásának eredménye:</p><p>Console.log(myList.hasChildNodes()); // igaz</p><p>A metódus továbbra is igazat ad vissza. A lista ugyan nem tartalmaz elemeket, de tartalmaz szóközt, ami egy érvényes csomóponttípus. Ez a módszer az összes csomópontot figyelembe veszi, nem csak az elemcsomópontokat. Ahhoz, hogy a hasChildNodes() hamis értéket adjon vissza, ismét módosítanunk kell a jelölést:</p><p> <body> </body> </p><p>És most a várt eredmény megjelenik a konzolon:</p><p>Console.log(myList.hasChildNodes()); // hamis</p><p>Természetesen, ha tudom, hogy szóközzel találkozhatok, először ellenőrzöm a gyermek csomópontok létezését, majd a nodeType tulajdonság segítségével megállapítom, hogy vannak-e köztük elemcsomópontok.</p> <h2>Gyermekelemek hozzáadása és eltávolítása</h2> <p>Vannak olyan technikák, amelyekkel elemeket lehet hozzáadni és eltávolítani a DOM-ból. Ezek közül a leghíresebb a createElement() és az appendChild() metódusok kombinációján alapul.</p><p>VarmyEl = document.createElement("div"); document.body.appendChild(myEl);</p><p>Ebben az esetben én alkotok <div>a createElement() metódus használatával, majd hozzáadva a törzshöz. Nagyon egyszerű, és valószínűleg már használta ezt a technikát.</p> <p>De ahelyett, hogy konkrétan beszúrnád <a href="https://sushiandbox.ru/hu/master-pc/peretaskivanie-elementov-drag-and-drop-sozdaem-prostoi-html5-drag-drop-interfeis.html">létrehozott elem</a>, használhatom az appendChild()-et is, és csak mozgathatom a meglévő elemet. Tegyük fel, hogy a következő jelöléssel rendelkezünk:</p><p> <div id="c"> <ul id="myList"> <li>Egy példa</li> <li>példa kettő</li> <li>példa három</li> <li>példa négy</li> <li>ötös példa</li> <li>Hat példa</li> </ul> <p>példaszöveg</p> </div> </p><p>A lista helyét a következő kóddal tudom megváltoztatni:</p><p>Var myList = document.getElementById("myList"), konténer = document.getElementById("c"); container.appendChild(myList);</p><p>A végső DOM így fog kinézni:</p><p> <div id="c"> <p>példaszöveg</p> <ul id="myList"> <li>Egy példa</li> <li>példa kettő</li> <li>példa három</li> <li>példa négy</li> <li>ötös példa</li> <li>Hat példa</li> </ul> </div> </p><p>Vegye figyelembe, hogy a teljes listát eltávolítottuk a helyéről (a bekezdés felett), majd beszúrtuk utána, a záró törzs elé. Míg az appendChild() metódust általában a createElement() segítségével létrehozott elemek hozzáadására használják, a meglévő elemek áthelyezésére is használható.</p> <p>Teljesen eltávolíthatok egy gyermek elemet a DOM-ból a removeChild() segítségével. A listánk eltávolítása az előző példából:</p><p>Var myList = document.getElementById("myList"), konténer = document.getElementById("c"); container.removeChild(myList);</p><p>Az elemet eltávolították. A removeChild() metódus visszaadja az eltávolított elemet, és el tudom tárolni, ha később szükségem lesz rá.</p><p>Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);</p><p>Létezik a ChildNode.remove() metódus is, amelyet viszonylag nemrégiben adtak hozzá a specifikációhoz:</p><p>Var myList = document.getElementById("myList"); myList.remove();</p><p>Ez a módszer nem ad vissza távoli objektumot, és nem működik IE-ben (csak Edge). Mindkét módszer ugyanúgy távolítja el a szövegcsomópontokat, mint az elemcsomópontokat.</p> <h2>Gyermek elemek cseréje</h2> <p>Lecserélhetek egy meglévő gyereket egy újra, függetlenül attól, hogy az létezik-e vagy sem <a href="https://sushiandbox.ru/hu/skype/html5-novye-vozmozhnosti-chto-novogo-v-html5-novye-strukturnye-elementy.html">új elem</a> vagy a semmiből hoztam létre. Íme a jelölés:</p><p> <p id="par">példaszöveg</p> </p><p>Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "példa"; myDiv.appendChild(document.createTextNode("Új elem szövege")); document.body.replaceChild(myDiv, myPar);</p><p> <div class="example">Új elem szövege</div> </p><p>Mint látható, a changeChild() metódus két argumentumot használ: az új elemet és a régi elemet, amelyet lecserél.</p> <p>Ezzel a módszerrel egy meglévő elemet is áthelyezhetek. Vessen egy pillantást a következő HTML-re:</p><p> <p id="par1">példa szöveg 1</p> <p id="par2">példa szöveg 2</p> <p id="par3">példa szöveg 3</p> </p><p>A harmadik bekezdést az első bekezdéssel helyettesíthetem a következő kóddal:</p><p>Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);</p><p>Most a generált DOM így néz ki:</p><p> <p id="par2">példa szöveg 2</p> <p id="par1">példa szöveg 1</p> </p><h2>Adott gyermekelemek kiválasztása</h2> <p>Több is van <a href="https://sushiandbox.ru/hu/master-pc/prostaya-programma-dlya-kodirovaniya-papok-na-fleshke-kak-postavit-parol-na.html">különböző utak</a> egy adott elem kiválasztása. Ahogy korábban bemutattuk, kezdhetem a gyermekgyűjtemény vagy a childNodes tulajdonság használatával. De nézzünk más lehetőségeket is:</p> <p>A firstElementChild és lastElementChild tulajdonságok pontosan azt teszik, amit a nevüktől elvárunk: jelölje ki az első és az utolsó gyermekelemet. Térjünk vissza a jelölésünkhöz:</p><p> <body> <ul id="myList"> <li>Egy példa</li> <li>példa kettő</li> <li>példa három</li> <li>példa négy</li> <li>ötös példa</li> <li>Hat példa</li> </ul> </body> </p><p>Az első és az utolsó elemet ezekkel a tulajdonságokkal tudom kiválasztani:</p><p>Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Egy példa" console.log(myList.lastElementChild.innerHTML); // "hatos példa"</p><p>Használhatom a previousElementSibling és nextElementSibling tulajdonságokat is, ha az elsőtől vagy az utolsótól eltérő gyermekelemeket akarok kijelölni. Ez a firstElementChild és lastElementChild tulajdonságok kombinálásával történik:</p><p>Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Kettes példa" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Ötös példa"</p><p>Hasonló tulajdonságok is léteznek firstChild , lastChild , previousSibling és nextSibling , de ezek az összes csomóponttípust figyelembe veszik, nem csak az elemeket. Általában azok a tulajdonságok, amelyek csak elemcsomópontokat vesznek figyelembe, hasznosabbak, mint azok, amelyek az összes csomópontot kijelölik.</p> <h2>Tartalom beillesztése a DOM-ba</h2> <p>Már megvizsgáltam, hogyan lehet elemeket beilleszteni a DOM-ba. Térjünk át egy hasonló témára, és vessünk egy pillantást a tartalom beszúrásának új funkcióira.</p> <p>Először is, van egy egyszerű insertBefore() metódus, amely nagyon hasonlít a changeChild() -hez, két argumentumot vesz fel, és működik az új és a meglévő elemeken is. Íme a jelölés:</p><p> <div id="c"> <ul id="myList"> <li>Egy példa</li> <li>példa kettő</li> <li>példa három</li> <li>példa négy</li> <li>ötös példa</li> <li>Hat példa</li> </ul> <p id="par">Példa bekezdés</p> </div> </p><p>Figyeld meg a bekezdést, először eltávolítom, majd beszúrom a lista elé, mindezt egy csapásra:</p><p>Var myList = document.getElementById("myList"), tároló = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);</p><p>A kapott <a href="https://sushiandbox.ru/hu/master-pc/html-kod-krasnaya-stroka-kogda-vsem-abzacam-kak-mne-dlya-kazhdogo-abzaca.html">HTML bekezdés</a> a lista elé kerül, és ez egy másik módja az elem mozgatásának.</p><p> <div id="c"> <p id="par">Példa bekezdés</p> <ul id="myList"> <li>Egy példa</li> <li>példa kettő</li> <li>példa három</li> <li>példa négy</li> <li>ötös példa</li> <li>Hat példa</li> </ul> </div> </p><p>A changeChild()-hez hasonlóan az insertBefore() két argumentumot vesz fel: a hozzáadandó elemet és azt az elemet, amely elé be akarjuk szúrni.</p> <p>Ez a módszer egyszerű. Most próbáljunk meg egy hatékonyabb beszúrási módot: az insertAdjacentHTML() metódust.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <span style="display:none" class="updated">2016-05-11</span> <div class="clear"></div> </div> </article> <div class="post-navigation"> <div class="post-previous"> <a href="https://sushiandbox.ru/hu/spam/poluchaetsya-ustanovit-vindovs-10-s-fleshki.html" rel="prev"><span>Előző</span> Kiderült, hogy a Windows 10-et USB flash meghajtóról kell telepíteni</a> <!-- /next_post --></div> <div class="post-next"> <a href="https://sushiandbox.ru/hu/skype/kak-udalit-predydushchuyu-vindovs-kak-udalit-operacionnuyu-sistemu-esli-ih-dve.html" rel="next"><span>Következő</span> Hogyan távolítsuk el az operációs rendszert, ha kettő van belőlük, a Windows rendszerindító menüjének szerkesztése</a> <!-- /next_post --></div> </div> <section id="related_posts"> <div class="block-head"> <h3>Hasonló hozzászólások</h3> <div class="stripe-line"></div> </div> <div class="post-listing"> <div class="related-item"> <div class="post-thumbnail"> <a href="https://sushiandbox.ru/hu/10-rules/podklyuchenie-i-nastroika-cam-modulya-nastroika-ci-cam-modulei.html"> <img width="310" height="165" src="/uploads/61289956231e013106c9624b0e83341c.jpg" class="attachment-tie-medium wp-post-image" alt="CI (CAM) Tricolor modulok beállítása különböző márkájú TV-ken Cam modul kódolt TV-csatornák megtekintéséhez" / loading=lazy loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="https://sushiandbox.ru/hu/10-rules/podklyuchenie-i-nastroika-cam-modulya-nastroika-ci-cam-modulei.html" rel="bookmark">CI (CAM) Tricolor modulok beállítása különböző márkájú TV-ken Cam modul kódolt TV-csatornák megtekintéséhez</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2022-10-20 03:58:46</span></p> </div> <div class="related-item"> <div class="post-thumbnail"> <a href="https://sushiandbox.ru/hu/shopping/ne-sozdayutsya-avtomaticheski-tochki-vosstanovleniya-windows-10-vosstanovlenie-iz.html"> <img width="310" height="165" src="/uploads/095e2de97b9e2f2f3fb6c8ebf82ce2fe.jpg" class="attachment-tie-medium wp-post-image" alt="Helyreállítás ellenőrzőpontból" / loading=lazy loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="https://sushiandbox.ru/hu/shopping/ne-sozdayutsya-avtomaticheski-tochki-vosstanovleniya-windows-10-vosstanovlenie-iz.html" rel="bookmark">Helyreállítás ellenőrzőpontból</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2022-10-20 03:58:46</span></p> </div> <div class="related-item"> <div class="post-thumbnail"> <a href="https://sushiandbox.ru/hu/browsing-the-internet/ustanovka-windows-na-imac-s-pomoshchyu-programmy-boot-camp-poshagovaya-instrukciya-kak-mozhno.html"> <img width="310" height="165" src="/uploads/7393d6a71f1292462643431b92312457.jpg" class="attachment-tie-medium wp-post-image" alt="A Windows telepítése Mac rendszeren háromféleképpen A Windows telepítése imac rendszerre" / loading=lazy loading=lazy> <span class="fa overlay-icon"></span> </a> </div> <h3><a href="https://sushiandbox.ru/hu/browsing-the-internet/ustanovka-windows-na-imac-s-pomoshchyu-programmy-boot-camp-poshagovaya-instrukciya-kak-mozhno.html" rel="bookmark">A Windows telepítése Mac rendszeren háromféleképpen A Windows telepítése imac rendszerre</a></h3> <p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2022-10-20 03:58:46</span></p> </div> </div> </section> <script type="text/javascript"> document.getElementById('hc_full_comments').innerHTML = ''; </script> </div> <aside id="sidebar"> <div class="theiaStickySidebar"> </div> </aside> <div class="clear"></div> </div> <div class="e3lan e3lan-bottom"> </div> <footer id="theme-footer"> <div id="footer-widget-area" class="wide-left-3c"> </div> <div class="clear"></div> </footer> <div class="clear"></div> <div class="footer-bottom"> <div class="container"> <div class="alignright"> </div> <div class="social-icons"> <a class="ttip-none" title="Google+" href="" target="_blank"><i class="fa fa-google-plus"></i></a><a class="ttip-none" title="Twitter" href="https://www.twitter.com/share?url=https%3A%2F%2Fsushiandbox.ru%2Fhu%2Fsocial-network%2Fcss-obrashchenie-k-dochernim-elementam-tehniki-raboty-s-dom-roditelskie-dochernie-i.html" target="_blank"><i class="fa fa-twitter"></i></a> <a class="ttip-none" title="vk.com" href="https://vk.com/share.php?url=https://sushiandbox.ru/social-network/css-obrashchenie-k-dochernim-elementam-tehniki-raboty-s-dom-roditelskie-dochernie-i.html" target="_blank"><i class="fa fa-vk"></i></a> </div> <div class="alignleft">© Copyright 2023, Mastering PC - Internet. Skype. Közösségi média. Windows oktatóanyagok</div> <div class="clear"></div> </div> </div> </div> </div> </div> <div id="topcontrol" class="fa fa-angle-up" title="Görgess fel"></div> <div id="fb-root"></div> <div id="reading-position-indicator"></div> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/CodeCanyon-Arqamv2.0.4-RetinaResponsiveWordPressSocialCounterPlugin-5085289/assets/js/scripts.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/ark-hidecommentlinks.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/pcl_tooltip.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/pcl_tooltip_init.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js'></script> <script type='text/javascript' src='/assets/scripts1.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var tie = { "mobile_menu_active": "true", "mobile_menu_top": "", "lightbox_all": "true", "lightbox_gallery": "true", "woocommerce_lightbox": "", "lightbox_skin": "dark", "lightbox_thumb": "vertical", "lightbox_arrows": "", "sticky_sidebar": "1", "is_singular": "1", "SmothScroll": "true", "reading_indicator": "true", "lang_no_results": "\u041d\u0435\u0442 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b", "lang_results_found": "\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043d\u0430\u0439\u0434\u0435\u043d\u043e" }; /* ]]> */ </script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/tie-scripts.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/ilightbox.packed.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/search.js'></script> <script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/jquery.cycle.all.js'></script> </body> </html>