DOM Samouczek
Rozpoczęcie pracy z DOM

Uwagi

Wersje

Pobieranie istniejących elementów HTML

Jednym z najczęstszych zadań jest pobieranie istniejącego elementu z DOM w celu manipulacji. Najczęściej te metody są wykonywane na document , ponieważ jest to węzeł główny, ale wszystkie te metody działają na dowolnym elemencie HTML w drzewie. Zwrócą tylko dzieci z węzła, na którym są wykonywane.

Pobierz przez id

var element = document.getElementById("logo");

element będzie zawierał (jedyny) element, którego atrybut id ustawiony na „logo” lub zawiera null jeśli taki element nie istnieje Jeśli istnieje wiele elementów o tym identyfikatorze, dokument jest nieprawidłowy i wszystko może się zdarzyć.

Pobierz według nazwy znacznika

var elements = document.getElementsByTagName("a");

elements będą zawierać aktywną HTMLCollection (obiekt podobny do tablicy) wszystkich znaczników link w dokumencie. Ta kolekcja jest zsynchronizowana z DOM, więc wszelkie zmiany w DOM są odzwierciedlane w tej kolekcji. Kolekcja zapewnia losowy dostęp i ma długość.

var element = elements[0];
//Alternative
element = elements.item(0);

element zawiera pierwszy napotkany element linku HTML lub null jeśli indeks jest poza zakresem

var length = elements.length;

length jest równa liczbie elementów łącza HTML znajdujących się obecnie na liście. Liczba ta może ulec zmianie po zmianie DOM.

Odzyskaj według klasy

var elements = document.getElementsByClassName("recipe");

elements będą zawierać żywą HTMLCollection (obiekt podobny do tablicy) wszystkich elementów, których atrybut class zawiera „przepis”. Ta kolekcja jest zsynchronizowana z DOM, więc wszelkie zmiany w DOM są odzwierciedlane w tej kolekcji. Kolekcja zapewnia losowy dostęp i ma długość.

var element = elements[0];
//Alternative
element = elements.item(0);

element zawiera pierwszy napotkany element HTML z tą klasą. Jeśli nie ma takich elementów, element ma wartość undefined w pierwszym przykładzie i null w drugim przykładzie.

var length = elements.length;

length jest równa liczbie elementów HTML, które obecnie mają klasę „przepis”. Liczba ta może ulec zmianie po zmianie DOM.

Pobierz po nazwie

var elements = document.getElementsByName("zipcode");

elements będą zawierać aktywną NodeList (obiekt podobny do tablicy) wszystkich elementów z atrybutem name ustawionym na „zipcode”. Ta kolekcja jest zsynchronizowana z DOM, więc wszelkie zmiany w DOM są odzwierciedlane w tej kolekcji. Kolekcja zapewnia losowy dostęp i ma długość.

var element = elements[0];
//Alternative
element = elements.item(0);

element zawiera pierwszy napotkany element HTML o tej nazwie.

var length = elements.length;

length jest równa liczbie elementów HTML, które obecnie mają „kod pocztowy” jako atrybut nazwy. Liczba ta może ulec zmianie po zmianie DOM.

Pierwsze kroki

DOM (Document Object Model) to interfejs programistyczny dla dokumentów HTML i XML, definiuje logiczną strukturę dokumentów oraz sposób dostępu do dokumentu i manipulowania nim.

Głównymi implementatorami DOM API są przeglądarki internetowe. Specyfikacje są znormalizowane przez grupy W3C i WHATWG , a model obiektowy określa model logiczny interfejsu programowania.

Reprezentacja struktury DOM przypomina widok podobny do drzewa, w którym każdy węzeł jest obiektem reprezentującym część znaczników, w zależności od typu, w którym każdy element dziedziczy określone i wspólne funkcje.

Nazwę „Document Object Model” wybrano, ponieważ jest to „model obiektowy” w tradycyjnym sensie projektowania obiektowego: dokumenty są modelowane przy użyciu obiektów, a model obejmuje nie tylko strukturę dokumentu, ale także zachowanie dokumentu i przedmioty, z których się składa. Innymi słowy, biorąc przykładowy diagram HTML, węzły nie reprezentują struktury danych, reprezentują obiekty, które mają funkcje i tożsamość. Jako model obiektowy model obiektowy dokumentu identyfikuje:

• interfejsy i obiekty używane do reprezentowania dokumentu i manipulowania nim
• semantyka tych interfejsów i obiektów - w tym zarówno zachowanie, jak i atrybuty
• relacje i współpraca między tymi interfejsami i obiektami

Poczekaj na załadowanie DOM

Użyj DOMContentLoaded gdy kod <script> współpracujący z DOM znajduje się w sekcji <head> . Jeśli nie zostanie zawinięty w wywołanie zwrotne DOMContentLoaded , kod wyrzuci błędy takie jak

Nie można odczytać wartości null

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

^{https://html.spec.whatwg.org/multipage/syntax.html#the-end}

Alternatywa dla DOMContentLoaded

Alternatywa (odpowiednia dla IE8 )

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

^{https://developer.mozilla.org/en/docs/Web/API/Document/readyState}

Użyj innerHTML

HTML

<div id="app"></div>

JS

document.getElementById('app').innerHTML = '<p>Some text</p>'

a teraz HTML wygląda tak

<div id="app">
    <p>Some text</p>
</div>

Znaczniki HTML

przykładowe dane wejściowe:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

Dane wyjściowe elementu DOM:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 

Wszystkie powyższe elementy dziedziczą po interfejsie HTMLElement i dostosowują się w zależności od określonego znacznika