XHTML oldali általános jelölőcímkék keresése. 1807
Azon jelölőelemek megkeresése, melyek alapvető tulajdonsággal rendelkeznek.
Megkeresésük, külső JavaScript (js) programból, a getElementsByTagName("...") függvény segítségével
Alapvető tulajdonságok alatt, értsd:
Mindenféle azonosító nélkül, azaz stílus meghatározás nélkül is, megformázzák a megjelenő weblapunkat.
A jelölőelemeknek, két, főcsoportja van:
- Sajátos, tulajdonsággal rendelkezők.
Ezek a jelölőelemek stílus meghatározás nélkül is képesek a szövegtartalom megformázására.
(Például: címsor és bekezdés jelölőelemek vagy jelölőcímkék, melyek más és más betűmérettel jelenítik meg a beírt szöveget, és szellőssebbé, azaz átláthatóbbá teszik a dokumentum tartalmi részeit.) - Semmit mondók. Melyek, HTML objektum csoportot, réteget vagy tetszőleges részt, kijelölő jelölőelemek.
- A <div> jelölőelem, mely szövegformázásra önmagában nem alkalmas.
Tetszőleges dokumentum tartalmat jelöl ki, és egy sortörést helyez el a tartalom előtt és után.
Stílus meghatározással, a vele kijelölt réteget, tetszőleges pozícióba mozgathatjuk. - A <span> jelölőelem szövegformázásra önmagában nem alkalmas.
Tetszőleges dokumentum részt jelöl ki, de semmit sem mond az általa határolt szövegrész formázásáról.
- A <div> jelölőelem, mely szövegformázásra önmagában nem alkalmas.
<h2> Program ismertetése </h2>
Ha a javascript programunkat a HTML oldalon, a szövegfolyamban helyezzük el, csak azon jelölőcímkékre lesz hatással programunk, melyek a script program előtt helyezkednek el.
Ha azt akarjuk, hogy HTML oldalunkon a várt jelölőcímkék mindegyikét figyelembe vegye document.getElementsByTagName("....") függvény, akkor helyezzük a dokumentumunk aljára script programunkat
A "Bekezdesek" nevet viselő változó helyett, tetszőleges nevet írhatunk.
Script program megírása:
<script language="JavaScript" type="text/javascript">
var Bekezdesek = document.getElementsByTagName("p");
for ( var i =0; i<Bekezdesek.length; i++) {
Bekezdesek[i].style.backgroundColor="yellow";
Bekezdesek[i].style.color="black";
Bekezdesek[i].style.border="2px solid black";
Bekezdesek[i].style.padding="5px";
}
</script>
A getElementsByTagName("p"); kijellölőben,
a p mint bekezdés címke helyett, tetszőleges a HTML dokumentumban alkalmazható jelölőcímkét beírhatunk.
Példa címkék neve, melyet a p helyére beírhatunk:
Címsort kijelölő címkék (h1, h2, h3, h4, h5, h6,)
Adott területet kijelölő címkék: div, span, pre, strong, em, form, textarea,
Képek címkéjénél (img), csak abban az esetben hatásos, ha a kép valamilyen okból nem jelenik meg.
Összegezve:
Minden jelölőelem neve beírható a példánkban szereplő p, azaz bekezdést azonosító címkenév helyett.
Ezek gyűjteménye megtalálható, a kezdő weboldalon (kattints a Németjuhász kutya fotójára)
<h2> --------- címsor ---------- szövege ----- </h2>
<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<p>Új bekezdés<span> Szöveg kiemelése</span> xxxxxxx xxxx </p>
<p>Új bekezdés<strong> Vastag betűk</strong> xxxxxxx xxxx </p>
<p>Új bekezdés <em> Dőlt betűk </em> xxxxx xxxxxx </p>
<cite> x xxx xxxxxxxxx xxxxxxxxx xx xxxxxxxxx</cite><pre> x xxx xx xx x xxx x xx </pre><dfn>Új bekezdés xxxxxx xxxxxxxxx </dfn>
<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
</div> Záró div jelölőelem<h3> -----------címsor-------------- szövege ------ </h3>
<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h5> ---------- címsor -------------- szövege ------ </h5>
<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h6> ul, ol, li jelölőcímkék<h6>
- <ul>
- <li> Listasor szám nélküli </li>
- <li>Új listasor</li>
- <li>Új listasor<li> </ul>
- <ol>
- <li>Listasor számozott<li>
- <li>Új listasor<li>
- <li>Új listasor</li> </ol>
<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h5>Táblázatoknál </h5>
<table width="350" class="tabla35">
<caption>Bemutató táblázat</caption>
<tr>
<th><input type="text" name="szoveg" size="20" value="input szövegablak"> </th>
</tr>
<tr>
<td><input type="button" value="input kapcsoló gomb"> </td>
</tr>
</table>
<h4> A form jelölőelem </h4>
<h5> Képeknél alkalmatott img jelölőelem </5>
<img src="kép elérési utvonala.jpg" width=800; height="150" / >
<img src="Hibás elérési utvonala.jpg" width=800; height="150" / >
<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
<h4> A textarea jelölőelem <h4>
<h5> ---------- címsor ------------- szövege -----<h5>
<p>Bekezdés xxxxxx xxxxxxxxx xxxxxxx xxxxxxxxxxx </p>
Programunkat müködtető JavaScript meghívása, melyet a html dokumentumunk végén vagy utolsó soraiban helyezünk el.
Oka:
Csak azon jelölőelemeket keresi meg, melyek előtte helyezkednek el, az adott dokumentumban
<script language="JavaScript" type="text/javascript" src="elérési utvonal.js"> </script>