Autor Zpráva
regvac
Profil *
Ahoj, lze nějak např. pomocí getElementsByTagName() vybrat jen divy první úrovně a pak jim třeba změnit nějakou vlastnost?
Příklad, vyberu div s označením 0 a chci změnit vlastnost pouze poddivům s označením 1,2,3 (čili divy v první úrovni), další vnořené divy nechci ovlivnit. Jde to nějak vyselektovat pomocí getElementsByTagName() jen první úroveň?

<div style="margin-left:20px;border:1px solid black"><span style="background-color:green">0</span>
  <div style="margin-left:20px;border:1px solid black"><span style="background-color:red">1</span>
    <div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">11</span></div>
    <div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">12</span></div>
    <div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">13</span>
      <div style="margin-left:20px;border:1px solid black"><span style="background-color:yellow">131</span></div>
      <div style="margin-left:20px;border:1px solid black"><span style="background-color:yellow">132</span></div>
    </div>
  </div>
  <div style="margin-left:20px;border:1px solid black"><span style="background-color:red">2</span>
    <div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">21</span></div>
  </div>
  <div style="margin-left:20px;border:1px solid black"><span style="background-color:red">3</span>
    <div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">31</span></div>
    <div style="margin-left:20px;border:1px solid black"><span style="background-color:blue">32</span></div>
  </div>
</div>


Díky
PostCC
Profil
To je takové dost neurčité zadání. Metodu getElementsByTagName se mi tam nepodařilo zamontovat, protože mi připadalo, že provedení pouze komplikuje. Nicméně myslím, že toto by mohlo vyhovět:

function GetFirstLevelSubItems() {
	var Element = event.srcElement;
	if(Element.tagName == "DIV" && Element.childNodes.length) {
		for(var i = 0; i < Element.childNodes.length; i++) {
			if(Element.childNodes[i].tagName == "DIV") Element.childNodes[i].style.color = "Red";
		}
	}
	event.cancelBubble = true;
}

document.body.onclick = GetFirstLevelSubItems;


Pokud prvek, nad kterým došlo k události "onclick" je tagem DIV a obsahuje vnořené tagy, na všech prvoúrovňových DIVech nastaví vlastnost "style.color" na hodnotu "Red". Pozor, samozřejmě platí kaskádové dědění stylů, takže zčervená i písmo ve všech vnořených elementech, nicméně předpokládám, že jde o nějakou změnu vlastnosti, která nepodléhá dědění. Funguje v MSIE, pro jiné prohlížeče nutná úprava.
Chamurappi
Profil
Reaguji na regvace:
Kromě zmíněných childNodes, v nichž jsou i textové uzly, podporuje většina prohlížečů (Firefox bohužel až od verze 3.5) i kolekci children, která obsahuje jen elementy. Chceš-li ale filtrovat přímé potomky podle tagName == "DIV", vyjde to nastejno.


Reaguji na PostCCe:
Pozor, samozřejmě platí kaskádové dědění stylů, takže zčervená i písmo ve všech vnořených elementech
To není zrovna moc názorná demonstrace :-)
Nerozumím, proč kolem řešení zadaného problému stavíš konstrukci s onclickem.

Funguje v MSIE, pro jiné prohlížeče nutná úprava.
Konkrétně:
var event = window.event || arguments[0];
var Element = event.srcElement || event.target;
… a na konec:
if(event.stopPropagation) event.stopPropagation();
Ale pochybuji, že regvac bude chtít zpracovávat document.body.onclick.


Ještě bych měl jednu připomínku k efektivitě:
Element.childNodes je tzv. živá HTML kolekce, což znamená, že jde o docela chytrý objekt a nikoliv o obyčejné pole, přestože se tak tváří. Až když se zeptáš na desátý index, vyhledá se prvních deset vyhovujících prvků a ten desátý se vrátí. Pokaždé, když se zeptáš na délku, vyhledají se všechny vyhovující prvky a vrátí se jejich počet. Každé hrábnutí do živé kolekce je mnohem složitější než hrábnutí do pole. (Živá je i kolekce vracená metodou getElementsByTagName.) Proto je lepší procházet potomky cyklem, který vyjde z Element.firstChild a proputuje vše přes nextSiblingy.
PostCC
Profil
Chamurappi:
Souhlas. Se vším. OnClick je tam proto, že mi to přišlo jako nejzřetelnější demonstrace funkce, předpokládám, že úprava pro jiné použití je záležitostí okamžiku. Šlo mi spíš o demonstraci postupu, který mi připadá primitivní ve srovnání s nuceným použitím getElementsByTagName(), kde by bylo nutno ještě filtrovat úroveň vnoření.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: