Autor Zpráva
Filipos
Profil
Dobrý den,
učím se Javascript, jsem v začátcích a narazil jsem na metodu getElementsByTagName, která by měla do vybraného tagu vložit např. text.
Přes getElementById se mi to daří tímto zápisem(div má id mujDiv) Zkoušel jsem zobrazit ve FF v.28 a chrome v.34.
<script>
  
  document.getElementById("mujDiv").innerHTML="text";
  
</script>

Jak mám formulovat zápis u metody getElementsByTagName? Tímto zápisem se mi to nepodařilo:
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  </head>
  <body>
    <p></p>
  
  <script>
  
  document.getElementsByTagName("p").innerHTML="text";
  
  </script>
  </body>
</html>

Myslím si, že metoda getElementById je v praxi používanější, je to tak? A případně mohl by někdo poradit, jaké metody se nejčastěji používají v praxi?

Odpovědi hledám i zde:www.w3schools.com/dom/met_document_getelementsbytagname.asp

Narazil jsem také na doplněk Firebug, celkem často ho tu někdo v diskuzi zmiňuje. Jaké s ním máte zkušenosti? Používat/nepoužívat?

Předem díky
Bubák
Profil
Koukni na http://jecas.cz/getelement, zejména na části getElementsByTagName a Procházení elementů.
document.getElementsByTagName("p")[2].innerHTML="text";
http://kod.djpw.cz/padb v ukázce jsem použil číslovaný seznam
Chamurappi
Profil
Reaguji na Filipose:
narazil jsem na metodu getElementsByTagName, která by měla do vybraného tagu vložit např. text
Ne, metody getElementsByTagName i getElementById slouží jen k vyhledávání elementů/elementu. První zmíněná vrací kolekci elementů (zjednodušeně řečeno pole), takže zápis na řádku 13 nebude dělat nic. Pokud chceš vybrat první element <p>, musíš použít document.getElementsByTagName("p")[0].

Myslím si, že metoda getElementById je v praxi používanější, je to tak?
Je to možné. Ale tohle není konkurenční boj dvou metod, každá se hodí na něco jiného.

Odpovědi hledám i zde
Web W3Schools důrazně nedoporučuji. Nevím, jak dnes, ale dříve byl zdrojem mnoha bludů.

Jaké s ním [s Firebugem] máte zkušenosti? Používat/nepoužívat?
Používat.
1Pupik1989
Profil
getElementsByTagName vrací takzvaný NodeList. Představ si ho jako pole. Je v tom akorát jediný rozdíl. NodeList se bude měnit v závislosti na přidávání a odebírání elementů.

//edit: Koukám byl jsem nejpomalejší.
Str4wberry
Profil
Zvážil bych, jestli se nenaučit rovnou používání metod querySelector/querySelectorAll, pokud stačí podpora od Exploreru 8. Zapisují se tam rovnou běžné CSS selektory.

Obsah prvního odstavce na stránce by se přepsal takto:
document.querySelector("p").innerHTML = "text";

Případně s querySelectorAll:
document.querySelectorAll("p")[0].innerHTML = "text";
Filipos
Profil
Reaguji na Str4wberryho:

querySelector a querySelectorAll jsou metody nějaké knihovny, že? Vím, že existuje více knihoven, ale nemám s nimi žádné zkušenosti.

Co jquery? Doporučujete/nedoporučujete?
Rfilip
Profil
Filipos:
Ne, querySelector a querySelectorAll jsou normální součásti JS, žádná knihovna není potřeba
Filipos
Profil
Rfilip:
Díky
Fisir
Profil
Reaguji na Filipose:
Co jquery? Doporučujete/nedoporučujete?
Nelze říci. Nenapsal jsi na co jQuery potřebuješ. Většinou se bez ní dá obejít, vyplatí se jí načítat až od určité úrovně složitosti kódu bez frameworku, protože načítat na jednoduché editování obsahu elementů stokilovou knihovnu je docela overkill.
Chamurappi
Profil
Reaguji na Str4wberryho:
Hledat podle selektoru jsem zatím prakticky nikdy nepotřeboval.

Pokud do kódu nejsou naházená ídéčka, není z HTML zřejmé, že tam něco kutí JS, a i na první pohled neškodný zásah dalšího člověka to může rozbít. Protože zatímco u CSS může člověk z načtené stránky hravě zjistit, která deklarace ve stylopisu co nastavuje a jaký selektor se používá (třeba tím výše zmíněným Firebugem), u JS to tak snadné není.

pokud stačí podpora od Exploreru 8
Také záleží na tom, jaké selektory se používají (třeba :last-child v osmičce nepůjde).
Str4wberry
Profil
Jak bys vyřešil situaci, kdy nějaký údaj potřebuješ skriptem nastavit na více míst různé roztroušených po stránce? Tady na diskusi mě napadá částečný příklad třeba u názvu tématu, který je v horní a dolní drobečkové navigaci a ještě v <title>.

Místo používání ID pro JS mi přijdou lepší vlastní atributy. Tam je to úplně jasné a nemusí se zkoumat, zda id není třeba jen pro možnost kotvit.

Příklad z prvního odstavce by tedy vypadal tak, že by všechny položky měly stejný atribut, přes který by si je querySelectorAll našel a nastavil jim innerHTML.

Také záleží na tom, jaké selektory se používají
Ano, fungují jen ty selektory, které v daném prohlížeči fungují v CSS.
Chamurappi
Profil
Reaguji na Str4wberryho:
Takových situací v praxi mnoho není. Pokud je počet konstantní a nízký, měním je individuálně, ostatně tak to tu dělám i na diskusi s tím názvem v drobečcích. Pokud jich může být mnoho, klidně si zavedu nějaký systém v jejich pojmenování, najít pět ídéček je pořád rychlejší než vyhodnotit selektor.

Kdybych chtěl používat querySelectorAll, tak bych zvažoval, jestli nepoužít více stejných id.

je v horní a dolní drobečkové navigaci a ještě v <title>“ … „by si je querySelectorAll našel a nastavil jim innerHTML
Asi bych měl instinktivní nedůvěru k očekávání, že změna innerHTML elementu <title> změní i document.title. (Nezkoušel jsem to, ale <title> vnímám podobně jako atribut.)
1Pupik1989
Profil
Chamurappi:
Asi bych měl instinktivní nedůvěru k očekávání, že změna innerHTML elementu <title> změní i document.title.

V IE < 8 to skončí chybou. innerHTML u <title> je jen pro čtení. Nicméně textContent a innerText to taktéž nezmění.
Str4wberry
Profil
Reakce na Chamurappiho:
najít pět ídéček je pořád rychlejší než vyhodnotit selektor
Takže něco jako?
document.getElementById("titulek1").innerHTML = titulek;
document.getElementById("titulek2").innerHTML = titulek;
document.getElementById("titulek3").innerHTML = titulek;

Rychlejší to asi bude, ale pochybuji, že tak znatelně, aby to stálo za snížení elegance a pohodlí. S querySelectorem jen přidám HTML značce atribut a mám jistotu, že se všechny související prvky řádně změní. Odpadá psaní ID dvojmo do HTML i JS kódu, nemusím řešit jestli element na stránce existuje a podobně.

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: