Selektory podle atributů tagů

Selektory atributů jsou speciální selektory, které vážou styl k prvku na základě toho, zda jej obsahuje specifický atribut nebo zda má určitý význam. Existuje několik možností pro použití takových selektorů.

1. Jednoduchý selektor atributů

Vypadá takto:

<селектор>[<имя атрибута тега>] { <стиль> }

A váže styl k těm prvkům, do kterých je přidán zadaný atribut. Například:

silný(
barva:červená;
}
...

Automobil jedná se o mechanický motor bez kolejí vozidlo">silniční vozidlo s minimálně 4 koly.

Výsledek:

Na obrázku vidíte, že na prvek je aplikováno pravidlo css (červená barva textu). silný, ke kterému je atribut přidán titul.

2. Volič atributů s hodnotou

Syntaxe tohoto selektoru je následující:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Váže styl na prvky, jejichž tagy mají atribut se zadaným jméno A význam. Příklad:

A(
barva:červená;
font-size:150%;
}
...
.ru" target="_blank">Odkaz v novém okně

Výsledek:

Jak vidíte, oba prvky typu hypertextový odkaz mají atribut cíl, ale na značku se použije pravidlo css, které zvětší text odkazu jedenapůlkrát a změní jeho barvu na červenou jehož atribut cíl záležitosti "_prázdný".

3. Jedna z několika hodnot atributu

Některé hodnoty atributů mohou být odděleny mezerami, například názvy tříd. Chcete-li nastavit pravidlo stylu, když je požadovaná hodnota přítomna v seznamu hodnot atributů, použijte následující selektor:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Styl se použije, pokud má atribut požadovanou hodnotu nebo je součástí seznamu hodnot oddělených mezerami. Například:

{
barva:červená;
font-size:150%;
}
...

Náš telefon: 777-77-77

naše adresa: Moskva st. Sovětská 5

Získáte následující výsledek:

Pravidlo se vztahuje na prvek, jehož hodnoty atributů zahrnují: třída existuje smysl tel.

4. Pomlčka v hodnotě atributu

Pomlčka je povolena v hodnotách identifikátoru a třídy. Chcete-li svázat styl s prvky, jejichž hodnoty atributů mohou obsahovat pomlčku, můžete použít následující konstrukci:

[attribute|="value"] ( styl )
Selektor[attribute|="value"] ( styl )

Styl se použije na ty prvky, jejichž hodnota atributu začíná zadanou hodnotou, za kterou následuje pomlčka. Například:

{
barva:červená;
font-size:150%;
}
...

• bod 1


• bod 2


• bod 3


• bod 4

Výsledek:

V tomto příkladu se pravidlo stylu vztahuje pouze na ty prvky seznamu, jejichž název třídy začíná hodnotou "menu-".

5. Hodnota atributu začíná konkrétním textem

Tento selektor nastavuje styl prvku, pokud hodnota atributu tagu začíná konkrétní hodnotou. Mohou existovat dvě možnosti:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

V prvním případě styl platí pro všechny prvky, jejichž tagy mají atribut se zadaným jméno a hodnotu začínající zadanou hodnotou podřetězce. V druhém případě to samé, jen na určité prvky uvedené v hlavní volič. Příklad:

A(
barva:zelená;
font-weight:bold;
}
...

Výsledek:

Příklad ukazuje, jak odlišně zobrazit externí odkazy a interní odkazy. Externí odkazy vždy začínají řetězcem „http://“. Proto v selektoru uvedeme, že styl bude aplikován pouze na odkazy, které mají atribut href začíná významem http://.

6. Hodnota atributu končí určitým textem

Připojí styl k prvkům, jejichž hodnota atributu končí zadaným textem. Má následující syntaxi:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

V prvním případě styl platí pro všechny prvky, které mají atribut se zadaným jméno a má význam končící na zadané podřetězec. V druhém případě to samé, jen k naznačenému selektory. Tímto způsobem lze například různě zobrazovat různé formáty grafických obrázků. Například:

IMG (
ohraničení: 5px plná červená;
}
...

Obrázek GIF

Formát obrázku png

Výsledek:

V tomto příkladu budou všechny obrázky s příponou gif zobrazeny s červeným okrajem o tloušťce pěti pixelů.

7. Hodnota atributu obsahuje zadaný řetězec

Tento selektor váže styl na značky, jejichž hodnota atributu obsahuje konkrétní text. Syntax:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Styl se váže na prvky, které mají atribut se zadaným názvem a jeho hodnota obsahuje zadané podřetězec. Například:

IMG (
ohraničení: 5px plná červená;
}
...

Obrázek ze složky galerie

Obrázek z jiné složky

Výsledek:

V příkladu je styl použit na obrázky, které se načítají ze složky "galerie".

To je vše o selektorech atributů. Všechny výše uvedené metody lze vzájemně kombinovat:

Selector[attribute1="value1"][attribute2="value2"] ( styl )

Kromě toho mi dovolte připomenout speciální selektory CSS:

• pomocí symbolů se tvoří „+“ a „~“;
• symbol ">" váže styly css dceřiné společnostištítky;
• symbol<пробел>generuje kontextové selektory.

V budoucích článcích se také podíváme na pseudoprvky a pseudotřídy, které poskytují výkonné nástroje pro správu stylů.

To je vše, uvidíme se znovu.

V předchozích podkapitolách jsme studovali vztahy mezi značkami v dokumentu HTML, včetně pohledu na selektory podřízených prvků. Nyní je čas seznámit se se sourozeneckými selektory a sousedními selektory.

Sousední voliče

Sousední selektory (nazývané také sousední selektory) vybírají prvky na webové stránce, které mají společného rodiče a sousedí spolu. Styl se použije na poslední prvek určený v selektoru.

Příklad: Řekněme, že potřebujete každý odstavec

Což je první za titulem

, měl písmo kurzíva. Toho lze dosáhnout pomocí kódu CSS takto:

H1+p ( styl písma: kurzíva; )

Při psaní tohoto pravidla je nejprve potřeba zadat jméno prvního souseda, poté přidat symbol + a jméno druhého souseda (toho, na kterého chceme styl aplikovat). Můžete vytvářet delší kombinace. Schéma zápisu selektoru je následující: selektor1+selektor2+…+selektorN () (styl je aplikován na selektorN).

Příklady psaní:

/* Odsazení od odstavce k obrázku 30px */ p+img ( padding-top: 30px; ) /* Zelená barva pro odstavec, který následuje za h3 ve spojení s h2 */ h2+h3+p ( barva: zelená; )

Související selektory

Související selektory (jiná jména: sestra, sourozenec) umožňují vybrat prvky stránky HTML, které spolu souvisí (to znamená, že mají společného rodiče a jsou na stejné úrovni). Sesterské selektory jsou podobné svým sourozeneckým selektorům, liší se však tím, že styl je aplikován na všechny prvky zvoleného typu, nejen na první. Místo znaku + se používá znak vlnovky ~.

Příklad: trochu pozměníme předchozí problém a představme si, že pro všechny odstavce potřebujete udělat kurzívu

Které následují po titulu

. CSS kód bude vypadat takto:

H1 ~ p (styl písma: kurzíva; )

...a nějaké HTML například:

Nadpis 1

Nadpis 2

Podívejte se na kód HTML: styl se použije na všechny značky

Které následují poštítek

a jsou na nadřazená uzavírací značka

. V naší verzi jsou 3 prvky

Na který bude styl použit. Vezměte prosím na vědomí, že značka

Tohle nebude v žádném případě bolet. Všimněte si také, že v tomto případě styl nebude použito na tuto značku

která se nachází nad

, stejně jako na značku

Mít jiného rodiče

.

Závěry

Pomocí sousedních selektorů můžete upravit styl prvku, když bezprostředně následuje za jiným prvkem (nebo skupinou prvků). Funguje to s prvky, které jsou na stejné úrovni a mají společného rodiče.

Se sourozeneckými selektory můžete použít styl na všechny prvky vybraného typu, když bezprostředně následují za jiným prvkem (nebo skupinou prvků). Funguje to s prvky, které jsou na stejné úrovni a mají společného rodiče.

Dobrý den, milí čtenáři! Pokračujeme v tématu CSS selektorů a dnes se pokusím srozumitelně vysvětlit, co to je sousední selektory CSS a jakou roli hraje? univerzální volič. Znalost mechanismu použití všech typů CSS nástrojů vám umožní dosáhnout optimálního a kompaktního obsahu dokumentu, kde jsou popsány styly prvků, což je jedna ze součástí úspěšné propagace vašeho zdroje, takže v žádném případě nezanedbávejte možnost získat užitečné informace o konceptu selektoru a jeho různých typech.

Pokud si pamatujete a pečlivě sledujete publikace, mnoho typů selektorů již bylo zváženo; ; . Ještě jednou vás žádám, abyste nezanedbávali učení základů CSS, protože to vám v budoucnu přinese spoustu výhod.

Univerzální volič

Nyní přejděme přímo k podstatě dnešní publikace. Co se týče univerzálního voliče, ten je celkem jednoduchý, takže se u něj nebudu dlouho zdržovat. Syntaxe pro psaní pravidla CSS, které používá univerzální selektor, je následující:

Zde operátor „*“ znamená, že máme univerzální volič. Používá se, když je potřeba nastavit jeden styl pro všechny prvky na webové stránce. Někdy není potřeba univerzální volič. Například položky .*class a .class jsou v těchto případech zcela totožné. Teď pro jistotu příklad. Nejběžnější je obvykle definování konzistentního písma, velikosti a barvy a umístění běžného textu na stránce blogu nebo webu.

* ( rodina písem: Tahoma, Arial, Helvetica, sans-serif; /* Písmo textu */ barva: #646464; /* Barva textu */ velikost písma: 75 %; /* Velikost textu */ zarovnání textu: vlevo; /* Umístění textu */ )

Tímto způsobem můžete definovat textový design pro všechny prvky, které se nacházejí na stránce. Upozorňuji, že v tomto případě bude výsledek podobný, pokud místo univerzálního selektoru použijete název tagu body, který obsahuje tagy všech prvků.

Sousední selektory CSS

Nuže, pojďme nyní věnovat trochu více času sousedním selektorům. Prvky na webové stránce jsou definovány jako sousedící, když se v kódu dokumentu objevují přímo vedle sebe. V tomto případě vypadá syntaxe stylů CSS takto:

Nyní vezměte odstavec textu definovaný tagem p, který bude obsahovat tagy b, i a big jako podřízené prvky, definující formátování textu, respektive tučné písmo, kurzívu a zvětšené písmo:

Tento odstavec používá štítek b, značka i, velký štítek.

A pomocí nástroje pro úpravy CSS a HTML, který je zabudován do nejnovějších verzí všech populárních prohlížečů (,) a který je obdobou známého pluginu prohlížeče Firefox (), vložíme tento odstavec kamkoli na absolutně jakoukoli webovou stránku (I udělal to správně na stránce předchozího článku, první odstavec). Tento nástroj se například v Chrome vyvolá pouhým stisknutím klávesy F12. Lze jej použít pro praktické zpevnění materiálu v sekcích „Základy HTML“ a „Výuka CSS“. Takže vkládám kus textu jako první odstavec:

Tento odstavec bude experimentální a na jeho příkladu budeme uvažovat o aplikaci sousední voliče. Jak jsem řekl, značky b, i a big jsou potomky značky odstavce p, protože jsou všechny přímo uvnitř kontejneru p. Zde jsou sousední značky b a i, stejně jako i a big. Nyní použijeme pravidlo CSS pro sousední selektory:

B+i (barva: červená;) i+velká (barva: zelená;)

Po použití těchto stylů bude odstavec vypadat takto:

To platí pro všechny značky webových stránek, které obsahují prvky b, i a big. Navíc b a i, i a big musí být poblíž pro jiné kombinace toto pravidlo CSS nebude fungovat. Myslím, že je vám nyní jasné, jak se při psaní nebo úpravě CSS dokumentu používají sousední selektory. Další velmi důležitá poznámka: pokud jste si všimli, v případě sousedních prvků se zadaný styl použije pouze na druhý prvek.

Příklad s odstavcem, který byl probrán, je velmi jasný a umožňuje rychle pochopit podstatu sousedních selektorů v CSS. V praxi se však obvykle používají jiné oblasti použití sousedních selektorů. Velmi často je například nutné vložit do těla článku nějaký text, zejména formátovaný, jako jsou poznámky pod čarou, poznámky atd.

Pro tyto účely obvykle vytvoří samostatnou třídu a aplikují ji na požadovaný odstavec. Mnohem optimálnějším způsobem je ale použití sousedních selektorů. Například na mém blogu jsou styly vytvořené pro stylování běžné hlavičky h3.

H3 ( velikost písma: 1,7 em; /* Velikost písma */ zarovnání textu: na střed; /* Umístění textu */ váha písma: normální; /* Normální tloušťka textu */ rodina písem: Tahoma, Arial, Helvetica, sans-serif; /* Styl písma */ barva: #646464 /* Barva textu */ )

Chcete-li zvýraznit název poznámky nebo poznámky pod čarou, definujme speciální třídu, řekněme put:

H3.put ( barva: červená; /* Barva textu */ levý okraj: 5px; /* Odsazení vlevo */ Horní okraj: 0,5 em; /* Horní odsazení */ odsazení: 10px; /* Okraje kolem textu */ text-align: left /* Umístění textu */ )

Nyní pomocí sousedních selektorů vytvoříme speciální styl pro odstavec poznámky pod čarou, tento odstavec bude umístěn přímo pod nadpis se stylem „h3.put“:

H3.put+p ( background: #ffefd5; /* Barva pozadí */ okraj-levý: 15px; /* Left padding */ margin-right: 120px; /* Right padding */ margin-top: 0,5em; /* Horní výplň */ výplň: 5px /* Okraje kolem textu */ )

Opět pomocí nástroje pro úpravy Google Chrome, se kterým jsem vás obtěžoval (ale stojí to za to), zadáme název poznámky pod čarou a nezapomeneme pro ni uvést třídu put:

Pozor!

Poté napíšeme text samotné poznámky pod čarou:

Materiály uvedené v této publikaci jsou velmi důležité z hlediska osvojení si základů CSS (Cascading Style Sheets)

.

Po všech těchto pohybech dostaneme na webové stránce následující odstavec poznámky pod čarou (připomínám, že jsem tento odstavec vložil na konec mého předchozího článku o selektorech potomků a kontextu):

Když nyní na blogu nebo webu navážete třídu „put“ na jakýkoli tag h3, na webové stránce se objeví taková poznámka pod čarou. Navíc pouze první odstavec za tagem h3 s „class=“put““ bude naformátován speciálním způsobem. Ale to je přesně to, co jsme chtěli, ne?

Tímto mi dovolte zakončit dnešní manuál, ve kterém byl uveden algoritmus pro použití sousedních a také univerzálních selektorů. Doufám, že vás, milí čtenáři, tento článek povzbudí k odběru

Vlad Merževič

Prvky webové stránky se nazývají sousední, když za sebou bezprostředně následují v kódu dokumentu. Podívejme se na několik příkladů vztahů prvků.

Lorem ipsum dolor sedět amet.

V tomto příkladu tag je potomkem značky

Protože je uvnitř tohoto kontejneru. Respektive

Působí jako rodič .

Lorem ipsum dolor sedět amet.

Zde jsou značky A se nijak nepřekrývají a představují sousední prvky. Skutečnost, že jsou umístěny uvnitř kontejneru

Vůbec to neovlivňuje jejich postoj.

Lorem ipsum dolor sit amet, conectetuer adipiscing elita.

Zde jsou sousední značky A a také A . A Ve stejnou dobu .

sousední prvky nejsou ošetřeny, protože mezi nimi je kontejner

Chcete-li ovládat styl sousedních prvků, použijte symbol plus (+) mezi dvěma voliči. Obecná syntaxe je následující.

Selektor 1 + Selektor 2 (Popis pravidel stylu)

Mezery kolem znaménka plus jsou volitelné. Styl v tomto zápisu se použije na selektor 2, ale pouze pokud sousedí se selektorem 1 a bezprostředně za ním následuje.

Příklad 11.1 ukazuje strukturu vzájemné interakce značek.

Příklad 11.1. Pomocí sousedních voličů

Lorem ipsum dolor sit amet, conectetuer HTML5 CSS 2.1 IE Cr Op Sa Fx

adipiscující elita. conectetuer HTML5 CSS 2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sit amet,

Výsledek příkladu je na Obr. 11.1.

Rýže. 11.1. Zvýraznění textu barvou pomocí sousedních selektorů Tento příklad změní barvu textu obsahu kontejneru když se nachází bezprostředně za kontejnerem . V prvním odstavci je tato situace implementována, takže slovo „consectetuer“ je v prohlížeči zobrazeno červeně. Ve druhém odstavci je sice značka , ale žádný štítek v okolí

ne, takže na tento kontejner není použit žádný styl.

Podívejme se na praktičtější příklad. Často se stává nezbytností vkládat do textu článku různé poznámky pod čarou a poznámky. Obvykle se pro tento účel vytvoří nová třída stylu a aplikuje se na odstavec tímto způsobem, můžete snadno změnit vzhled textu.

Ale půjdeme jinou cestou a použijeme sousední selektory. Chcete-li zvýraznit komentáře, vytvořte novou třídu, nazvěte ji sic a aplikujte ji na značku

Příklad 11.1. Pomocí sousedních voličů

Vzhled zbývajících odstavců zůstane nezměněn.

Příklad 11.2. Změnit styl odstavce

Nechť má lev celkové rozměry L x Š x V, kde L je délka lva od špičky nosu po štětec ocasu, W je šířka lva a H je jeho výška.

Poté rozdělíme poušť na řadu elementárních obdélníků, jejichž velikost se shoduje s šířkou a délkou lva. Vzhledem k tomu, že lev nemusí být striktně v daném prostoru, ale zároveň ve dvou, měla by být klec na odchyt z větší plochy a to 2L x 2W. Díky tomu se vyhneme omylu, že by se do klece chytila ​​jen polovina lva, v horším případě pouze jeho ocas.

Důležitá poznámka

Pro zjednodušení výpočtů lze ocas vyřadit jako chybu měření a nebere jej v úvahu.

Výsledek tohoto příkladu je znázorněn na Obr. 11.2.

Rýže. 11.2. Změna vzhledu odstavce pomocí sousedních selektorů

V tomto příkladu je text formátován pomocí odstavců (tag

), ale zápis H2.sic + P nastaví styl pouze pro první odstavec za značkou

, která má přidanou třídu s názvem sic.

A

Sousední selektory jsou vhodné pro použití u těch značek, ke kterým se automaticky přidávají odsazení, aby bylo možné nezávisle upravit míru odsazení. Například pokud jsou značky v řadě

A

, pak lze vzdálenost mezi nimi snadno upravit pomocí sousedních voličů.

U po sobě jdoucích značek je situace podobná.

Příklad 11.1. Pomocí sousedních voličů

Nadpis 1

Nadpis 2

A také v dalších podobných případech. Příklad 11.3 tímto způsobem mění velikost mezery mezi určenými značkami.

Příklad 11.3. Mezery mezi nadpisy a textem

Odstavec!

Protože při použití sousedních selektorů je styl aplikován pouze na druhý prvek, je velikost okrajů zmenšena zahrnutím záporné hodnoty pro vlastnost margin-top. V tomto případě se text zvedne, blíže k předchozímu prvku.

Otázky ke kontrole1. Které značky v tomto kódu sousedí? ₂ Vzorec kyseliny sírové: ₄

1. H

2. A
3. A
4. _A
5. A

TAK:

A

2. K dispozici je následující HTML kód ^{Poslední Fermatova věta} X ^{Poslední Fermatova věta}
n ^{Poslední Fermatova věta}

+Y

= Z

1. kde n je celé číslo > 2
2. Jaký text bude zvýrazněn červeně pomocí stylu SUP + SUP ( barva: červená; )?

druhé "n" Druhé a třetí "n". než před 5-6 lety, kdy jQuery získával na popularitě.

V tomto článku předvedu možnosti manipulace s HTML DOM se zaměřením na vztahy rodičů, dětí a sousedů. Na závěr poskytnu informace o podpoře prohlížečů pro tyto funkce, ale mějte na paměti, že knihovna jako jQuery je stále dobrou volbou kvůli přítomnosti chyb a nesrovnalostí v implementaci nativní funkčnosti.

Počítání podřízených uzlů

Pro demonstraci použiji následující HTML značky, v článku to několikrát změníme:

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

Jak vidíte, výsledky jsou stejné, i když použité techniky se liší. V prvním případě používám vlastnost děti. Toto je vlastnost pouze pro čtení, vrací kolekci HTML prvky, umístěný uvnitř požadovaného prvku; K počítání jejich počtu používám vlastnost length této kolekce.

Ve druhém příkladu používám metodu childElementCount, což je podle mě úhlednější a potenciálně udržitelnější způsob (prodiskutujte to později, nemyslím si, že budete mít problém pochopit, co dělá).

Mohl bych zkusit použít childNodes.length (místo children.length), ale podívejte se na výsledek:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

Vrátí 13, protože childNodes je kolekce všech uzlů včetně mezer – mějte to na paměti, pokud vám záleží na rozdílu mezi podřízenými uzly a uzly podřízených prvků.

Kontrola existence podřízených uzlů

Chcete-li zkontrolovat, zda prvek má podřízené uzly Mohu použít metodu hasChildNodes(). Metoda vrací booleovskou hodnotu označující jejich přítomnost nebo nepřítomnost:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // pravda

Vím, že můj seznam má podřízené uzly, ale mohu změnit HTML tak, aby tam žádné nebyly; Označení nyní vypadá takto:

A zde je výsledek opětovného spuštění hasChildNodes():

Console.log(myList.hasChildNodes()); // pravda

Metoda stále vrací true . Přestože seznam neobsahuje žádné prvky, obsahuje mezeru, což je platný typ uzlu. Tato metoda bere v úvahu všechny uzly, nejen uzly prvků. Aby funkce hasChildNodes() vrátila hodnotu false, musíme znovu změnit označení:

A nyní se v konzole zobrazí očekávaný výsledek:

Console.log(myList.hasChildNodes()); // nepravda

Samozřejmě, pokud vím, že bych mohl narazit na mezery, nejprve zkontroluji existenci podřízených uzlů a poté pomocí vlastnosti nodeType určím, zda mezi nimi existují nějaké uzly prvků.

Přidávání a odebírání dětských prvků

Existují techniky, které můžete použít k přidání a odebrání prvků z DOM. Nejznámější z nich je založen na kombinaci metod createElement() a appendChild().

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

V v tomto případě tvořím

pomocí metody createElement() a poté ji přidat do body . Je to velmi jednoduché a pravděpodobně jste tuto techniku ​​již někdy použili.

Ale místo vkládání konkrétně vytvářený prvek, mohu také použít appendChild() a pouze přesunout existující prvek. Řekněme, že máme následující označení:

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Příklad textu

Umístění seznamu mohu změnit pomocí následujícího kódu:

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

Finální DOM bude vypadat takto:

Příklad textu

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Všimněte si, že celý seznam byl odstraněn ze svého místa (nad odstavcem) a poté vložen za něj před uzavírací tělo . Zatímco metoda appendChild() se obvykle používá k přidávání prvků vytvořených pomocí createElement() , lze ji také použít k přesunutí existujících prvků.

Také mohu zcela odstranit podřízený prvek z DOM pomocí removeChild() . Zde je návod, jak odstranit náš seznam z předchozího příkladu:

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

Prvek byl nyní odstraněn. Metoda removeChild() vrací odstraněný prvek, takže jej mohu uložit pro případ, že jej budu později potřebovat.

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

Existuje také metoda ChildNode.remove(), která byla relativně nedávno přidána do specifikace:

Var myList = document.getElementById("myList"); myList.remove();

Tato metoda se nevrací vzdálený objekt a nefunguje v IE (pouze Edge). A obě metody odstraňují textové uzly stejným způsobem jako uzly prvků.

Výměna podřízených prvků

Mohu nahradit existující podřízený prvek novým, bez ohledu na to, zda tento existuje nový prvek nebo jsem to vytvořil od začátku. Zde je označení:

Příklad textu

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "příklad"; myDiv.appendChild(document.createTextNode("Text nového prvku")); document.body.replaceChild(myDiv, myPar);

Nový text prvku

Jak vidíte, metoda replaceChild() přijímá dva argumenty: nový prvek a prvek, který nahrazuje. starý prvek.

Tuto metodu mohu také použít k přesunutí existujícího prvku. Podívat se na další HTML:

Ukázkový text 1

Ukázkový text 2

Ukázkový text 3

Mohu nahradit třetí odstavec prvním odstavcem pomocí následujícího kódu:

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

Nyní vygenerovaný DOM vypadá takto:

Ukázkový text 2

Ukázkový text 1

Výběr konkrétních dětí

Je jich několik odlišně výběr konkrétní prvek. Jak bylo uvedeno výše, mohu začít pomocí kolekce dětí nebo vlastnosti childNodes. Ale podívejme se na další možnosti:

Vlastnosti firstElementChild a lastElementChild dělají přesně to, co naznačují jejich názvy: vyberte první a poslední podřízené prvky. Vraťme se k našemu značení:

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Mohu si vybrat první a poslední prvky pomocí těchto vlastností:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "Příklad jedna" console.log(myList.lastElementChild.innerHTML); // "Příklad šest"

Mohu také použít vlastnosti previousElementSibling a nextElementSibling, pokud chci vybrat podřízené prvky jiné než první nebo poslední. To se provádí kombinací vlastností firstElementChild a lastElementChild:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Příklad dva" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Příklad 5"

Existují také podobné vlastnosti firstChild , lastChild , previousSibling a nextSibling , ale berou v úvahu všechny typy uzlů, nejen prvky. Obecně platí, že vlastnosti, které berou v úvahu pouze uzly prvků, jsou užitečnější než ty, které vybírají všechny uzly.

Vkládání obsahu do DOM

Už jsem se podíval na způsoby, jak vložit prvky do DOM. Pojďme k podobné téma a podívejte se na nové možnosti vkládání obsahu.

Za prvé, existuje jednoduchá metoda insertBefore() , podobně jako replaceChild(), vyžaduje dva argumenty a pracuje s novými i stávajícími prvky. Zde je označení:

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Příklad odstavce

Všimněte si odstavce, který nejprve odstraním a poté jej vložím před seznam, vše jedním šmahem:

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

Ve výsledném HTML se odstavec objeví před seznamem a to je další způsob, jak zabalit prvek.

Příklad odstavce

• Příklad jedna
• Příklad dva
• Příklad tři
• Příklad čtvrtý
• Příklad pět
• Příklad šest

Stejně jako replaceChild() i insertBefore() přebírá dva argumenty: prvek, který má být přidán, a prvek, před který jej chceme vložit.

Tato metoda je jednoduchá. Zkusme nyní výkonnější metodu vkládání: metodu insertAdjacentHTML().

Oblíbené v kategorii:

Jak sloučit vrstvy ve Photoshopu do jedné nebo je spojit do skupiny...

číst

Přenos kontaktů do nového telefonu Android

číst

Samsung Galaxy se sám restartuje – řešení Galaxy Note...

číst

Klíčové vlastnosti Kaspersky Rescue Disk

číst



Nejnovější články

MacBook se nepřipojí k wifi MacBook nevidí...

číst

Jak vydělat peníze na WebMoney

číst

Tablet "Supra": recenze zákazníků

číst

Umístění lodí v reálném čase

číst

Nejlepší programy pro Android Záznam hovorů z...

číst

Odebírání nesledujících na Twitteru

číst

Připojení k internetu na notebooku: všechny možné...

číst

Samsung Galaxy S IV je nová vlajková loď...

číst