Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kurs Javy /Frontend SELF PL /Wprowadzenie do DOM

Wprowadzenie do DOM

Frontend SELF PL
Poziom 41 , Lekcja 0
Dostępny

1.1 Podstawowe koncepcje DOM

Model Obiektowy Dokumentu (DOM) to interfejs programistyczny dla dokumentów webowych. Reprezentuje strukturę dokumentu jako drzewo węzłów, gdzie każdy węzeł jest częścią dokumentu, taką jak element, tekst, komentarz itp. Zrozumienie DOM i jego węzłów jest fundamentalnym aspektem pracy z technologiami webowymi.

Podstawowe koncepcje DOM

Czym jest DOM?

DOM (Document Object Model) to hierarchiczna struktura, która opisuje zawartość dokumentu HTML. Pozwala programom i skryptom dynamicznie uzyskiwać dostęp do zawartości dokumentu i zmieniać jego strukturę, styl i treść.

Węzły i elementy

W kontekście DOM wszystkie części dokumentu są traktowane jako węzły (node). Węzły dzielą się na kilka typów:

  1. Elementy węzłów: reprezentują tagi HTML.
  2. Węzły tekstowe: reprezentują tekst znajdujący się w elementach węzłów.
  3. Węzły komentarzy: reprezentują komentarze w HTML.
  4. Węzły dokumentów: reprezentują sam dokument.

Drzewo węzłów

DOM to struktura drzewiasta, gdzie każdy węzeł może mieć potomków (węzły podrzędne). Korzeniowym węzłem jest obiekt document, reprezentujący cały dokument HTML.

Przykład struktury DOM:

HTML
    
      <!DOCTYPE html>
      <html>
        <head>
          <title>Document Title</title>
        </head>
        <body>
          <h1>Hello, World!</h1>
          <p>This is a paragraph.</p>
        </body>
      </html>
Java university

Dla tego dokumentu drzewo DOM będzie wyglądać następująco:

Text
    
      document
      └── html
          ├── head
          │   └── title
          │       └── #text: "Document Title"
          └── body
              ├── h1
              │   └── #text: "Hello, World!"
              └── p
                  └── #text: "This is a paragraph."

1.2 Typy węzłów

1. Elementy węzłów

Elementy węzłów odpowiadają tagom HTML. Na przykład, węzeł dla tagu <body> nazywa się elementem węzła.

Przykład:

W tym przykładzie <body> i <h1> są elementami węzłów.

HTML
    
      <body>
        <h1>Hello, World!</h1>
      </body>

2. Węzły tekstowe

Węzły tekstowe zawierają tekst wewnątrz elementów węzłów. Są one potomkami elementów węzłów i zawierają dane tekstowe.

Przykład:

W tym przykładzie tekst "Hello, World!" jest węzłem tekstowym, potomkiem węzła <h1>.

HTML
    
      <h1>Hello, World!</h1>

3. Węzły komentarzy

Węzły komentarzy reprezentują komentarze w HTML, zaczynają się od <!-- i kończą -->.

Przykład:

W tym przykładzie <!-- This is a comment --> jest węzłem komentarza.

HTML
    
      <!-- This is a comment -->

      <p>This is a paragraph.</p>

4. Węzły dokumentów

Węzeł dokumentu reprezentuje korzeniowy węzeł drzewa DOM i jest rodzicem dla wszystkich pozostałych węzłów w dokumencie.

Przykład:

Obiekt document w JavaScript to węzeł dokumentu:

JavaScript
    
      console.log(document);

1.3 Interakcja z węzłami DOM

1. Pobieranie informacji o węzłach

Właściwości obiektu węzła pozwalają uzyskać informacje o konkretnym węźle. Na przykład, można dowiedzieć się, jaki jest typ węzła, jego nazwa i zawartość.

Przykład:

HTML
    
      <html>
        <head>
          <title>Mój web-sajt</title>
        </head>
        <body>
          <h1>Cześć, świecie!</h1>
        </body>
      </html>
JavaScript
    
      const heading = document.querySelector('h1');

      console.log(heading.nodeName); // Wyświetli: H1
      console.log(heading.nodeType); // Wyświetli: 1 (Element węzła)
      console.log(heading.textContent); // Wyświetli: "Cześć, świecie!"

2. Zmiana zawartości węzłów

Zawartość węzłów można zmieniać za pomocą właściwości i metod DOM.

Przykład:

JavaScript
    
      const paragraph = document.querySelector('p');
      paragraph.textContent = 'Updated text content';

3. Praca z węzłami podrzędnymi

Każdy węzeł DOM może mieć węzły podrzędne, do których można uzyskać dostęp i modyfikować je.

Przykład:

HTML
    
      <html>
        <head>
          <title>Mój web-sajt</title>
        </head>
        <body>
          <ul>
            <li>O nas</li>
            <li>Kariera</li>
            <li>Kontakt</li>
          </ul>
        </body>
      </html>
JavaScript
    
      const list = document.querySelector('ul');
      const firstItem = list.firstElementChild;
      const lastItem = list.lastElementChild;

      console.log(firstItem.textContent); // Wyświetli tekst pierwszego elementu listy
      console.log(lastItem.textContent); // Wyświetli tekst ostatniego elementu listy

1.4 Przydatne właściwości

1. Właściwości nodeName i nodeType

  • nodeName zwraca nazwę węzła
  • nodeType zwraca typ węzła (np. 1 dla elementów węzłów, 3 dla węzłów tekstowych)

Przykład:

HTML
    
      <html>
        <head>
          <title>Mój web-sajt</title>
        </head>
        <body>
          <h1>Cześć, świecie!</h1>
        </body>
      </html>
JavaScript
    
      const element = document.querySelector('h1');

      console.log(element.nodeName); // Wyświetli: H1
      console.log(element.nodeType); // Wyświetli: 1

2. Właściwości textContent i innerHTML

  • textContent zwraca lub ustawia zawartość tekstową węzła
  • innerHTML zwraca lub ustawia zawartość HTML węzła

Przykład:

HTML
    
      <html>
        <head>
          <title>Mój web-sajt</title>
        </head>
        <body>
          <p>Naprawdę <b>ciekawy</b> i <b>użyteczny</b> akapit!</p>
        </body>
      </html>
JavaScript
    
      const element = document.querySelector('p');

      console.log(element.textContent); // Wyświetli zawartość tekstową akapitu
      console.log(element.innerHTML); // Wyświetli zawartość HTML akapitu

3. Właściwości parentNode, childNodes, firstChild i lastChild

  • parentNode zwraca węzeł rodzica
  • childNodes zwraca kolekcję wszystkich węzłów potomnych
  • firstChild zwraca pierwszy węzeł potomny
  • lastChild zwraca ostatni węzeł potomny

Przykład:

HTML
    
      <html>
        <head>
          <title>Mój web-sajt</title>
        </head>
        <body>
          <ul>
            <li>O nas</li>
            <li>Kariera</li>
            <li>Kontakt</li>
          </ul>
        </body>
      </html>
JavaScript
    
      const element = document.querySelector('ul');

      console.log(element.parentNode); // Wyświetli węzeł rodzica
      console.log(element.childNodes); // Wyświetli kolekcję węzłów potomnych
      console.log(element.firstChild); // Wyświetli pierwszy węzeł potomny
      console.log(element.lastChild); // Wyświetli ostatni węzeł potomny
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION