DOM Handledning
Komma igång med DOM

Anmärkningar

versioner

Hämtar befintliga HTML-element

En av de vanligaste uppgifterna är att hämta ett befintligt element från DOM för att manipulera. Vanligtvis körs dessa metoder på document , eftersom det är rotnoden, men alla dessa metoder fungerar på alla HTML-element i trädet. De kommer bara att returnera barn från den nod som den körs på.

Hämta med id

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

element kommer att innehålla det (enda) elementet som har sitt id attribut inställt till "logo", eller innehåller null om inget sådant element finns. Om flera element med denna id finns, är dokumentet ogiltigt och allt kan hända.

Hämta med taggnamn

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

elements kommer att innehålla en live HTMLCollection (ett arrayliknande objekt) av alla länktaggar i dokumentet. Denna samling är synkroniserad med DOM, så alla ändringar som gjorts i DOM återspeglas i denna samling. Samlingen ger slumpmässig åtkomst och har en längd.

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

element innehåller det första HTML-länkelementet, eller null om indexet är utanför gränserna

var length = elements.length;

length är lika med antalet HTML-länkelement som för närvarande finns i listan. Detta nummer kan ändras när DOM ändras.

Hämta efter klass

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

elements kommer att innehålla en levande HTMLCollection (en array liknande objekt) av alla element där deras class attribut innehåller "recept". Denna samling är synkroniserad med DOM, så alla ändringar som gjorts i DOM återspeglas i denna samling. Samlingen ger slumpmässig åtkomst och har en längd.

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

element innehåller det första HTML-elementet med den här klassen. Om det inte finns några sådana element har element värdet undefined i det första exemplet och null i det andra exemplet.

var length = elements.length;

length är lika med antalet HTML-element som för närvarande har klassen "recept". Detta nummer kan ändras när DOM ändras.

Hämta med namn

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

elements kommer att innehålla en levande NodeList (en array liknande objekt) av alla element med deras name attributuppsättning till "postnummer". Denna samling är synkroniserad med DOM, så alla ändringar som gjorts i DOM återspeglas i denna samling. Samlingen ger slumpmässig åtkomst och har en längd.

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

element innehåller det första HTML-elementet med det här namnet.

var length = elements.length;

length är lika med antalet HTML-element som för närvarande har "postnummer" som sitt namnattribut. Detta nummer kan ändras när DOM ändras.

Komma igång

DOM (Document Object Model) är programmeringsgränssnittet för HTML- och XML-dokument, det definierar den logiska strukturen för dokument och hur ett dokument öppnas och manipuleras.

De viktigaste implementatörerna av DOM API är webbläsare. Specifikationer standardiseras av W3C- och WHATWG- grupperna, och objektmodellen anger den logiska modellen för programmeringsgränssnittet.

Representationen av DOM-strukturen liknar en trädliknande vy, där varje nod är ett objekt som representerar en del av markeringen, beroende på vilken typ varje element också ärver specifika och delade funktioner.

Namnet "Document Object Model" valdes eftersom det är en "objektmodell" i traditionell objektorienterad designkänsla: dokument är modellerade med hjälp av objekt, och modellen omfattar inte bara strukturen i ett dokument utan också ett dokument och de föremål som den består av. Med andra ord, med exemplet HTML-diagram, representerar noderna inte en datastruktur, de representerar objekt, som har funktioner och identitet. Som objektmodell identifierar dokumentobjektmodellen:

• gränssnitten och objekt som används för att representera och manipulera ett dokument
• semantik för dessa gränssnitt och objekt - inklusive både beteende och attribut
• förhållandena och samarbeten mellan dessa gränssnitt och objekt

Vänta tills DOM laddas

Använd DOMContentLoaded när <script> -koden som interagerar med DOM ingår i avsnittet <head> . Om den inte är insvept i DOMContentLoaded återuppringning kommer koden att kasta fel som

Kan inte läsa något av null

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

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

Alternativ till DOMContentLoaded

Ett alternativ (lämplig för 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}

Använd innerHTML

html

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

JS

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

och nu ser HTML ut så här

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

HTML-markering

exempelinmatning:

<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>

DOM-elementutgång:

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

Alla ovanstående element ärver från HTMLElement-gränssnittet och anpassas beroende på specifik tagg