Hierarchia DOM - nody

0

Witam. Mam pewnie banalne pytanie, ale sam nie mogę rozgryźć.

HTML:

<p id="paragraf">To jest <strong>bardzo</strong> ważny tekst</p>

JS:

//jeżeli nasz akapit będzie pierwszy na stronie to...
document.firstChild.childNodes[1].firstChild.nodeValue //pobranie tekstu To jest
document.firstChild.childNodes[1].parentNode.childNodes[1].firstChild.nodeValue //To samo co wyżej - czemu?

Może ktoś mi rozpisać krok po kroku (oba przykłady), jak przechodzimy po nodach do "To jest"? Nie mogę tego zrozumieć, które części kodu odpowiadają za konkretne elementy w DOM.

0

Tzn o co innego pytałem. Kod jest wycięty z kursu. Pytanie w komentarzu nie należy do mnie ;)
Przykład pierwszy: dokument -> <body> . firstChild ->

. childNodes[1] -> według mojego rozumowania to powinien być < strong >, bo < strong > jest drugim dzieckiem paragrafu, więc już źle odczytuje to.
Jeżeli dokument oznacza <html> to pierwsze dziecko to będzie <head>, więc też jest źle.

Jak to odczytać prawidłowo?

0

Żeby wpisanie tego do pliku cokolwiek wypisało mi na stronie to faktycznie bym nie pisał tutaj.
A że, konsola pokazuje błąd kodu i nie potrafi się odwołać do konkretnych elementów to zapytałem jak rozumieć ten kod i po jakich elementach html od konkretnie przechodzi.

Wydaje mi się, że skoro pytam o podstawy języka i piszę w dziale Newbie to nie po to aby ktoś mnie obrażał tutaj. _13th_Dragon jak masz pisać byle co i nie pomagać to olej ten dział. Takimi postami marnujesz swój i mój czas.

Jakby ktoś się znalazł, kto miałby chęć to wytłumaczyć to moje pytanie jest nadal aktualne. Tobie, _13th_Dragon podziękuję.

2

@Vendetta, przestań się fochać i faktycznie odpal sobie ten skrypt napisany przez @_13th_Dragon. Jak ten kod nie pokazuje tego co chcesz, to go sobie zmodyfikuj tak, żeby pokazywał to, czego chcesz.

W twoim konkretnym przykładzie, pokazuje się to samo, ponieważ:
childNodes[1].parentNode.childNodes[1] == childNodes[1]

Czyli to:
document.firstChild.**childNodes[1].parentNode.childNodes[1]**.firstChild.nodeValue
jest równoznaczne temu:
document.firstChild.**childNodes[1]**.firstChild.nodeValue

Gwiazdki służą jedynie uwypukleniu.

A jak chcesz wiedzieć, co konkretne elementy zawierają w sobie po kolei, to odpal przeglądarkę i debuguj! Przecież to wszytko jest w firebugu/develpers's tools/co tam kto używa, wystarczy spojrzeć.
1

@aurel, nie pytałem o to jaka jest różnica w obu przypadkach. Te komentarze zapomniałem usunąć. Na tym forum nie da się edytować pierwszego postu i nie mogłem już tego usunąć. W kursie później jest to opisane.

Prosiłem jedynie aby ktoś napisał w jednym zdaniu jak kod

document.firstChild.childNodes[1].firstChild.nodeValue

idzie po kolei po drzewie DOM. Od początku strony do tekstu "To jest". Czytałem że document oznacza początek strony czyli rozumiem, że <html>. Później będzie pierwsze dziecko czyli <head> i tu jest już nie tak, bo przecież moje

jest w body. Właśnie tego nie rozumiem. Ja się nie focham, tylko jak ktoś mi pisze, że document.firstChild.childNodes[1].firstChild.childNodes[0].nodeValue=="To jest"

 a nie może rozpisać tego to taka informacja jest bezwartościowa, bo jak miałbym teraz napisać coś innego to nie wiedziałbym jak to zrobić, bo nie rozumiem przejścia po kolei.

I zdaję sobie sprawę z tego, że świetnie to ogarniacie. Ja nie ogarniam, jestem zielony w tym temacie, dopiero co usiadłem do JS, dlatego przyszedłem tutaj po pomoc a nie po to aby czytać jakim jestem idiotą, bo to przecież takie łatwe i, że powinienem myśleć głową a nie dupą. To raczej nie jest normalna pomoc w dziale Newbie. Wolałbym chyba, żeby nie było żadnych odpowiedzi niż takie.
2

Problem rozwiązany. Firebug pomógł. document traktowałem jako <html>, a powinienem document.firstChild. Przez ten błąd, później wchodziłem do <head> zamiast do <body> i tego właśnie nie rozumiałem. Dzięki @aurel za pomoc.

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.

Utwórz konto