| Autor | Zpráva | ||
|---|---|---|---|
| Filipos Profil |
#1 · Zasláno: 3. 5. 2014, 21:46:56
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 |
#2 · Zasláno: 3. 5. 2014, 22:21:00
Koukni na http://jecas.cz/getelement, zejména na části getElementsByTagName a Procházení elementů.
document.getElementsByTagName("p")[2].innerHTML="text"; |
||
| Chamurappi Profil |
#3 · Zasláno: 3. 5. 2014, 22:21:24
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 |
#5 · Zasláno: 3. 5. 2014, 23:40:12
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 |
#6 · Zasláno: 4. 5. 2014, 14:28:34
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 |
#7 · Zasláno: 4. 5. 2014, 14:53:27
Filipos:
Ne, querySelector a querySelectorAll jsou normální součásti JS, žádná knihovna není potřeba |
||
| Filipos Profil |
#8 · Zasláno: 4. 5. 2014, 15:15:22
Rfilip:
Díky |
||
| Fisir Profil |
#9 · Zasláno: 4. 5. 2014, 15:58:33
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 |
#10 · Zasláno: 4. 5. 2014, 16:28:22
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 |
#11 · Zasláno: 4. 5. 2014, 19:46:12
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 |
#12 · Zasláno: 6. 5. 2014, 00:00:08
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 |
#13 · Zasláno: 6. 5. 2014, 00:19:32
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 |
#14 · Zasláno: 6. 5. 2014, 02:16:12
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ě.
|
||
|
Časová prodleva: 10 let
|
|||
0