Frage zu einem Beispiel (getElementsByTagName)

[steffen]

Hi Forumleser,

ich hab mich nun mal an das Thema DOM gewagt und hoffe, dass ihr mir eine Frage beantworten könnt.

[Link:http://de.selfhtml.org/javascript/objekte/node.htm#last_child]

Wenn ich hiervon den HTML code so schreibe:

<ul>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>

anstatt

<ul><li>erster Punkt</li><li>zweiter Punkt</li></ul>

Wird mir schon nichts mehr angezeigt. Wieso?

Gleich noch eine Frage:

<ul>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
<li>dritter Punkt</li>
</ul>

wie spreche ich diesen <li>zweiter Punkt</li> kindknoten an? Weil FirstChild und LastChild geben ja nur den ersten oder letzten Kindknoten aus.

Hoffe ihr könnt mich aufklären. Danke euch

steffen

[Mathias Brodala]

Hallo steffen.

http://de.selfhtml.org/javascript/objekte/node.htm#last_child

s/L/l

Wenn ich hiervon den HTML code so schreibe:

<ul>

<li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>

>   
> anstatt  
>   
> `<ul><li>erster Punkt</li><li>zweiter Punkt</li></ul>`{:.language-html}  
>   
> Wird mir schon nichts mehr angezeigt. Wieso?  
  
Weil bei obigem der letzte Kindknoten ein Textknoten ist, und zwar ein Zeilenumbruch. Jedoch nicht alle Browser reagieren gleich. Bei manchen ist es egal, ob sich zwischen Elementknoten noch Whitespaces befinden, oder nicht.  
  

> Gleich noch eine Frage:  
>   
> ~~~html

<ul>  

> <li>erster Punkt</li>  
> <li>zweiter Punkt</li>  
> <li>dritter Punkt</li>  
> </ul>

wie spreche ich diesen <li>zweiter Punkt</li> kindknoten an?

Grundsätzlich kannst du sämtliche Elemente per getElementsByTagName ansprechen. Jedes Elementobjekt sowie das Objekt „document“ verfügen über diese Methode. Zugriff auf das zweite Listenelement könntest du dir also wie folgt holen:

var ul = document.getElementsByTagName('ul')[0]; // Die Liste  
var li2 = document.getElementsByTagName('li')[1]; // Das Listenelement  
  
alert(li2.firstChild.nodeValue); // zweiter Punkt

Einen schönen Sonntag noch.

Gruß, Mathias

[Mathias Brodala]

Hallo nochmal.

var ul = document.getElementsByTagName('ul')[0]; // Die Liste

var li2 = document.getElementsByTagName('li')[1]; // Das Listenelement

alert(li2.firstChild.nodeValue); // zweiter Punkt

  
Sagt es und befolgt es selber nicht. Es muss natürlich wie folgt lauten:  
  
~~~javascript
var ul = document.getElementsByTagName('ul')[0]; // Die Liste  
var li2 = ul.getElementsByTagName('li')[1]; // Das Listenelement  
  
alert(li2.firstChild.nodeValue); // zweiter Punkt

Einen schönen Sonntag noch.

Gruß, Mathias

[steffen]

Hi Mathias,

<ul>
<li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>

Weil bei obigem der letzte Kindknoten ein Textknoten ist, und zwar ein Zeilenumbruch. Jedoch nicht alle Browser reagieren gleich. Bei manchen ist es egal, ob sich zwischen Elementknoten noch Whitespaces befinden, oder nicht.

Das heisst, dass ich in dem Beispiel, das erste "li" auch mit:

var ErsterPunkt = document.getElementsByTagName("ul")[0];
document.write(LetzterPunkt.getElementsByTagName('li')[0].firstChild.nodeValue);

ansprechen muss?

steffen

Dir auch einen schönen Sonntag :)

[Mathias Brodala]

Hallo steffen.

<ul>

<li>erster Punkt</li>
<li>zweiter Punkt</li>
</ul>

>   
> […]  
>   
> Das heisst, dass ich in dem Beispiel, das erste "li" auch mit:  
>   
> ~~~javascript

var ErsterPunkt = document.getElementsByTagName("ul")[0];  

> document.write(LetzterPunkt.getElementsByTagName('li')[0].firstChild.nodeValue);

ansprechen muss?

Nein, da „LetzterPunkt“ in diesem Fall undefiniert wäre. Korrekt wäre es folgendermaßen:

var ErsterPunkt = document.getElementsByTagName('ul')[0];  
document.write(ErsterPunkt.getElementsByTagName('li')[0].firstChild.nodeValue);

Oder voll ausgeschrieben:

document.write(document.getElementsByTagName("ul")[0].getElementsByTagName('li')[0].firstChild.nodeValue);

Da letzteres aber zu recht langen Zeilen führen kann, empfiehlt es sich, Referenzen auf Objekte in Variablen abzulegen, wie du es oben bereits getan hast.

Dir auch einen schönen Sonntag :)

Danke.

Gruß, Mathias

[steffen]

Hi Mathias,

die Variable "LetzterPunkt" war nur versehentlich hingeschrieben.

Meinte netürlich richtigerweise "ErsterPunkt".

Das heisst eigentlich sollte man

var ErsterPunkt = document.getElementsByTagName("ul")[0].firstChild;

eher nicht nutzen, weil es je nach Browser anders interpretiert wird?

Danke dir jedenfalls für die Hilfe :)

steffen

[Mathias Brodala]

Hallo steffen.

Das heisst eigentlich sollte man

var ErsterPunkt = document.getElementsByTagName("ul")[0].firstChild;

eher nicht nutzen, weil es je nach Browser anders interpretiert wird?

Du kannst es gerne nutzen, wenn du dir der möglichen Probleme bewusst bist. Wenn du dich aber durch eine Hierarchie von verschachtelten Elementen hangeln möchtest, bist du mit getElementsByTagName auf der sicheren Seite.

Einen schönen Sonntag erneut.

Gruß, Mathias