DOM kallas ofta för DOM-trädet eftersom det består av ett träd av objekt som kallas noder. I lärde du dig vad Document Object Model (DOM) är, hur man kommer åt dokumentobjektet och ändrar dess egenskaper med hjälp av konsolen, och vi lärde oss också skillnaden mellan HTML-källkod och DOM.

I den här manualen hittar du HTML-terminologin som är nödvändig för att arbeta med JavaScript och DOM, lära dig vad ett träd är och DOM-noder, och lär dig att identifiera de vanligaste nodtyperna. Du kan också skapa ett JavaScript-program i konsolen för att interaktivt ändra DOM.

HTML-terminologi

Att förstå HTML- och JavaScript-termer är avgörande för att arbeta med DOM. Låt oss ta en snabb titt på de viktigaste termerna.

Titta på detta HTML-element:

Hem

Den har ett ankare, som är en länk till index.html.

• en tagg
• href - attribut
• html - attributvärde
• Hem - text.

Allt mellan inledande och avslutande taggar är ett HTML-element.

Låt oss gå tillbaka till filen index.html från föregående handledning:

Att lära sig DOM


Dokumentobjektmodell

Det enklaste sättet att komma åt ett element med JavaScript är med id-attributet. Låt oss lägga till länken ovan till filen index.html med id="nav".

...

Dokumentobjektmodell
Hem

...

Ladda (eller uppdatera) sidan i ett webbläsarfönster och titta på DOM för att se till att koden har uppdaterats.

Använd sedan metoden getElementById() för att komma åt hela elementet. Ange följande i konsolen:

document.getElementById("nav");
Hem

Metoden getElementById() kommer att hämta hela elementet. Nu, istället för att behöva skriva in det här objektet och metoden varje gång du behöver komma åt nav-länken, kan du lägga elementet i en variabel för att göra det lättare att arbeta med.

låt navLink = document.getElementById("nav");

Variabeln navLink innehåller ankaret. Här kan du enkelt ändra attribut och värden. Om du till exempel vill ändra platsen för en länk ändrar du href-attributet:

navLink.href = "https://www.wikipedia.org";

Du kan också ändra texten genom att omtilldela textContent-egenskapen:

navLink.textContent = "Navigera till Wikipedia";

Om du nu tittar på det här elementet i konsolen eller kollar taggen Elements kommer du att se hur det har uppdaterats.

navlink;
Navigera till Wikipedia

Förändringar kommer också att återspeglas på front-end.

Om du uppdaterar sidan returneras alla ursprungliga värden.

Vid det här laget bör du förstå hur man använder dokumentmetoden för att komma åt ett element, hur man tilldelar ett element till en variabel och hur man ändrar egenskaper och värden på ett element.

Träd och DOM-noder

Alla element i DOM definieras som noder. Det finns många typer av noder, men det finns tre huvudsakliga som du kommer att arbeta med oftast:

Element Nod

Textnod

Kommentar Nod

När ett HTML-element är ett element i DOM kallas det en elementnod. Varje enskild text utanför ett element är en textnod, och HTML-kommentar– en kommentarsnod. Förutom dessa tre typer av noder är själva dokumentobjektet dokumentnoden, som är rotnoden för alla andra noder.

DOM består av en trädstruktur av kapslade noder, ofta kallade DOM-trädet. Du vet säkert vad ett släktträd är - det är en schematisk representation av familjeband, som består av föräldrar, barn och närmaste familj. Noder i DOM kallas också föräldra- och undernoder baserat på deras relation till andra noder.

Skapa till exempel en nodes.html-fil. lägg till en textnod till den, såväl som kommentar- och elementnoder.

Lär dig om noder


En elementnod

En textnod.

HTML-elementnoden är föräldern. huvud och kropp är html-undernoder. kroppen innehåller tre underordnade noder, och de är alla på samma nivå - typen av nod påverkar inte nivån av kapsling.

Obs: När du arbetar med DOM genererad av HTML, utfyllnad källkod HTML skapar många tomma textnoder som inte kommer att synas på fliken DevTools Elements. Mer om detta på länken.

Definition av nodtyp

Varje nod i ett dokument har en typ som nås via egenskapen nodeType. Mozilla Developer Network har en uppdaterad lista över alla nodtypskonstanter. Nedan finns en tabell över de vanligaste nodtyperna.

På fliken Element i utvecklarverktygen kan du märka att varje gång du klickar och väljer en rad i DOM, visas värdet == $0 bredvid den. Detta är väldigt bekväm väg komma åt det aktuella aktiva elementet.

I node.html-konsolen klickar du på det första elementet i brödtexten (h1).

Ta reda på typen av den valda noden med hjälp av konsolen med hjälp av egenskapen nodeType.

$0.nodeType;
1

Genom att välja h1-elementet kommer du att se 1 som utgång, vilket refererar till ELEMENT_NODE. Gör samma sak med andra noder och de kommer att returnera 3 respektive 8.

Genom att veta hur man kommer åt ett element kan du se typen av nod utan att markera elementen i DOM.

document.body.nodeType;
1

Förutom nodeType kan du också använda egenskapen nodeValue för att få värdet av en text- eller kommentarnod, och nodeName för att hämta elementtaggen.

Ändra DOM med händelser

Hittills har du sett hur man ändrar DOM i konsolen, och sådana ändringar är kända för att vara tillfälliga; varje gång sidan uppdateras går alla ändringar förlorade. I uppdaterade du bakgrundsfärgen på sidan i konsolen. Försök att kombinera det du har lärt dig i den här handledningen med det du redan vet för att skapa en interaktiv knapp som ändrar bakgrundsfärgen.

Gå tillbaka till filen index.html och lägg till ett knappelement med ett id. Du måste också lägga till en länk till den nya filen i den nya js-katalogen js/scripts.js.

Att lära sig DOM


Dokumentobjektmodell
Ändra bakgrundsfärg

En händelse i JavaScript är en åtgärd som användaren utför. Användaren håller muspekaren över ett element, klickar på det eller trycker på en viss tangent på tangentbordet - dessa är alla händelser. I det här specifika fallet måste knappen utföra en åtgärd när användaren klickar på den. För att göra detta måste du lägga till en händelseavlyssnare. Skapa en scripts.js-fil och spara den i en ny js-katalog. Du måste definiera ett knappelement i filen och tilldela det till en variabel.

Med metoden addEventListener() lyssnar knappen efter klick och utför sin funktion efter klicket.

...
button.addEventListener("klick", () => (
// åtgärder kommer att gå här
});

Inuti funktionen måste du placera koden från föregående manual för att ändra bakgrundsfärgen till fuchsia.

...

Så här ser skriptet ut:

let button = document.getElementById("changeBackground");
button.addEventListener("klick", () => (
document.body.style.backgroundColor = "fuchsia";
});

Spara och stäng filen. Uppdatera sidan index.html i webbläsaren. Klicka på den nya knappen så ändras bakgrundsfärgen på sidan.

Taggar: ,

Huvudverktyget för att arbeta och dynamiska ändringar på sidan är DOM (Document Object Model) - en objektmodell som används för XML/HTML-dokument.

Enligt DOM-modellen är ett dokument en hierarki.
Varje HTML-tagg bildar ett separat nodelement, varje textstycke bildar ett textelement och så vidare.

Enkelt uttryckt är DOM en representation av ett dokument som ett träd av taggar. Detta träd bildas av en kapslad struktur av taggar plus textfragment av sidan, som var och en bildar en separat nod.

Den enklaste DOM

Låt oss till att börja med bygga DOM-trädet för nästa dokument.

Header Vackert dokument

Den yttersta taggen är , så trädet börjar växa från det.

Inuti finns två noder: och - de blir barnnoder för .

Taggar form elementnoder(elementnod). Text inskickad textnoder(textnod). Båda är peer-noder i DOM-trädet.

Mer komplicerat exempel

Överväg nu en viktigare sida:

Om älg Sanningen om älg.

Älg är ett smart djur

.. Och lömsk

Rotelementet i hierarkin är html . Han har två ättlingar. Den första är huvudet, den andra är kroppen. Och så vidare, varje kapslad tagg är underordnad taggen ovan:

I denna figur är nodelementen markerade i blått, textelementen är markerade i svart.

Trädet bildas av blå nodelement - HTML-taggar.

Och så här ser trädet ut om du ritar det direkt på HTML-sidan:

Förresten, trädet i denna figur tar inte hänsyn till text som endast består av blanksteg. Till exempel bör en sådan textnod komma direkt efter . DOM som inte innehåller sådana "tomma" noder kallas "normaliserad".

Låt oss titta på ett lite mer komplext dokument.

Datadokument

• Försiktigt
• Information

Tillverkad i Ryssland

Den översta taggen är html , den har huvud- och kroppsbarn och så vidare. Resultatet är ett taggträd:

Attribut

I det här exemplet har noderna attribut: style , class , id . I allmänhet anses attribut också vara noder i DOM vars förälder är DOM-elementet på vilket de specificeras.

Men i webbprogrammering klättras dessa djungler vanligtvis inte, och attribut betraktas helt enkelt som egenskaper hos DOM-noden, som, som vi kommer att se senare, kan ställas in och ändras på begäran av programmeraren.

Egentligen är detta en hemlighet, men DOCTYPE är också en DOM-nod och ligger i DOM-trädet till vänster om HTML-koden (detta är dolt i figuren).

P.S. När det gäller hemligheten - naturligtvis ett skämt, men alla vet inte riktigt om det. Det är svårt att föreställa sig var sådan kunskap kan vara användbar...

Normalisering i olika webbläsare

När du analyserar HTML Internet Explorer skapar omedelbart normaliserats DOM som inte skapar noder från tom text.

Firefox har en annan åsikt, den skapar ett DOM-element från varje textfragment.
Därför ser trädet i detta dokument i Firefox ut så här:

I figuren, för korthetens skull, betecknas textnoder helt enkelt med en hash. kroppen har 7 barn istället för 3.

Opera har också något att skryta med. Hon kan lägga till ett extra tomt element "bara från henne själv".

Öppna dokumentet för att se detta. Den returnerar antalet underordnade noder för document.body , inklusive textnoder.

Jag får 3 för IE, 7 för Firefox och 8 (!?) för Opera.

I praktiken skapar denna inkompatibilitet inte stora problem, men du måste komma ihåg det. Till exempel kan skillnaden visa sig vid uppräkning av trädnoder.

Kraften i DOM

Varför behöver vi, förutom vackra ritningar, en hierarkisk DOM-modell?

Väldigt enkelt:

Varje DOM-element är ett objekt och tillhandahåller egenskaper för att manipulera dess innehåll, för åtkomst till föräldrar och barn.

Dokumentobjektet används för DOM-manipulation.
Med hjälp av dokument kan du få önskat element i trädet och ändra dess innehåll.

Till exempel tar den här koden det första elementet med ol-taggen, tar bort två listelement i följd och lägger sedan till dem i omvänd ordning:

Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)

För ett exempel på hur ett sådant manus fungerar - klicka på texten på älgsidan

I äldre manualer och skript kan du se ändringar av sidans HTML-kod genom att direkt anropa document.write .

I moderna skript används denna metod nästan aldrig, fall av det korrekt tillämpning kan räknas på fingrar.

Undvik document.write.. Om du inte verkligen vet vad du gör (och varför läser du en handledning - du är redan en guru)

Låt oss ta en närmare titt på åtkomstmetoder och egenskaper för DOM-element.

Tillgång till element

All åtkomst och ändringar av DOM kommer från dokumentobjektet.

Låt oss börja på toppen av trädet.

document.documentElement

Topptagg. I fallet med en giltig HTML-sida skulle detta vara .

dokumentets kropp

Taggen, om den finns i dokumentet (måste finnas).

Följande exempel, när du klickar på knappen, visar den textmässiga representationen av objekten document.documentElement och document.body. Strängen i sig är webbläsarberoende, även om objekten är desamma överallt.

funktion go() ( alert(document.documentElement) alert(document.body) )

DOM-elementtyper

Varje element i DOM har en typ. Dess nummer lagras i attributet elem.nodeType

Totalt finns det 12 typer av element i DOM.

Vanligtvis används bara en: Node.ELEMENT_NODE , vars nummer är 1. HTML-taggar motsvarar element av denna typ.

Ibland är typen Node.TEXT_NODE också användbar, vilket är lika med 3. Dessa är textelement.

Andra typer i javascript programmering används inte.

Följande exempel, när du klickar på knappen, kommer att skriva ut typerna av document.documentElement och sedan typen av det sista underordnade underordnade dokumentet.body-noden. Det är en textnod.

funktion go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) ) Text

Exempel

Så här skulle till exempel dokumentet från exemplet ovan se ut i en webbläsare om varje synligt element ramades in med ett nodeType-nummer i det övre högra hörnet.

... Data

• Försiktigt
• Information

Tillverkad i Ryssland

Endast elementen inuti kroppen visas här, eftersom de är de enda som visas på sidan. För element av typ 1 (taggar) anges motsvarande tagg inom parentes, för textelement (typ 3) är det bara en siffra.

Barnelement

Alla underordnade element, inklusive textelement, finns i arrayen childNodes.

Följande exempel går igenom alla underordnade av document.body.

For(var i=0; i BODY

stil

Den här egenskapen styr stilen. Det liknar att sätta en stil i CSS.

Du kan till exempel ställa in element.style.width :

Källkod för denna knapp:

Äta allmän regel ersättningar - om CSS-attributet har bindestreck måste du ersätta dem med för att ställa in stil versal brev.

Till exempel, för att ställa in z-index-egenskapen till 1000, skulle du ställa in:

element.style.zIndex = 1000

innerHTML

Den här egenskapen stöddes en gång bara i IE. Det stöds nu av alla moderna webbläsare.

Den innehåller all HTML inuti noden och kan ändras.

InnerHTML-egenskapen används huvudsakligen för att dynamiskt ändra innehållet på en sida, till exempel:

Document.getElementById("footer").innerHTML = "Hejdå!"

InnerHTML är kanske en av de mest använda DOM-elementegenskaperna.

klassnamn

Den här egenskapen anger klassen för elementet. Det är helt analogt med html "class"-attributet.

Elem.className = "nyklass"

onclick , onkeypress, onfocus ...

Och andra egenskaper som börjar med "på..." lagrar motsvarande händelsehanterarefunktioner. Du kan till exempel tilldela en hanterare onclick-händelser.

För mer information om dessa egenskaper och händelsehanterare, se

Arbeta med DOM-modellen

Varje Window-objekt har en dokumentegenskap som refererar till ett Document-objekt. Detta dokumentobjekt är inte ett fristående objekt. Det är det centrala objektet i ett rikt API känt som Document Object Model (DOM), som definierar hur innehållet i ett dokument nås.

Översikt över DOM

Document Object Model (DOM) är ett grundläggande applikationsprogrammeringsgränssnitt som ger möjlighet att arbeta med innehållet i HTML- och XML-dokument. DOM Application Programming Interface (API) är inte särskilt komplext, men det finns många arkitektoniska funktioner som du bör vara medveten om.

Först och främst bör det förstås att kapslade element i HTML- eller XML-dokument representeras som ett träd av DOM-objekt. Trädvyn i ett HTML-dokument innehåller noder som representerar element eller taggar som och

Och noder som representerar textrader. Ett HTML-dokument kan också innehålla noder som representerar HTML-kommentarer. Tänk på följande enkla HTML-dokument:

Exempeldokument Detta är ett HTML-dokument

Exempel enkel text.

DOM-representationen av detta dokument visas i följande diagram:

För dem som ännu inte är bekanta med trädstrukturer i datorprogrammering är det bra att veta att terminologin för att beskriva dem har lånats från släktträd. Noden omedelbart ovanför den givna noden anropas förälder med avseende på denna nod. Noder som ligger en nivå under en annan nod är dotterbolag med avseende på denna nod. Noder som är på samma nivå och har samma förälder anropas systerlig. Noder som ligger valfritt antal nivåer under en annan nod är dess underordnade. Förälder, morförälder och alla andra noder ovanför denna nod är dess förfäder.

Varje rektangel i detta diagram är en dokumentnod, som representeras av ett Node-objekt. Observera att figuren visar tre olika typer knutpunkter. Roten till trädet är dokumentnoden, som representerar hela dokumentet. Noderna som representerar HTML-element är noder av typen Element, och noderna som representerar text är noder av typen Text. Document, Element och Text är underklasser av Node-klassen. Document och Element är de två viktigaste klasserna i DOM.

Nodtypen och dess undertyper bildar typhierarkin som visas i diagrammet nedan. Notera de formella skillnaderna mellan de generiska dokument- och elementtyperna och HTMLDocument- och HTMLElement-typerna. Dokumenttypen representerar ett HTML- och XML-dokument, och klassen Element representerar ett element i det dokumentet. Underklasserna HTMLDocument och HTMLElement representerar specifikt ett HTML-dokument och dess element:

I detta diagram bör det också noteras att ett stort antal undertyper av HTMLElement-klassen som representerar konkreta typer av HTML-element. Var och en av dessa definierar JavaScript-egenskaper som återspeglar HTML-attributen för ett visst element eller grupp av element. Vissa av dessa specifika klasser definierar ytterligare egenskaper eller metoder som inte återspeglar syntaxen för HTML-kodspråket.

Välja dokumentelement

Driften av de flesta klientprogram på JavaScript på något sätt relaterat till manipulationen av dokumentets delar. Under körningen kan dessa program använda dokumentets globala variabel, som refererar till dokumentobjektet. Men för att kunna utföra någon manipulation av elementen i dokumentet, måste programmet på något sätt erhålla eller välja elementobjekt som refererar till dessa element i dokumentet. DOM definierar flera sätt att välja element. Du kan välja ett eller flera element i ett dokument:

av värdet på id-attributet;

av värdet på namnattributet;

efter taggnamn;

med namnet på CSS-klassen eller klasserna;

i linje med en viss CSS-väljare.

Alla dessa elementvalstekniker beskrivs i följande underavsnitt.

Välja element efter id-attributvärde

Alla HTML-element har id-attribut. Värdet på detta attribut måste vara unikt i dokumentet - inga två element i samma dokument måste ha samma id-attributvärde. Välj objekt efter unikt värde id-attribut kan göras med metoden getElementById() för Document-objektet:

Var section1 = document.getElementById("section1");

Detta är det enklaste och vanligaste sättet att välja element. Om skriptet måste kunna manipulera en specifik uppsättning dokumentelement, tilldela värden till id-attributen för dessa element och använd möjligheten att söka efter dem med dessa värden.

I Internetversioner Utforskaren under IE8:s getElementById()-metod söker efter id-attributvärden på ett skiftlägesokänsligt sätt och returnerar även element som matchar värdet på namnattributet.

Välja element efter värdet på namnattributet

HTML name-attributet var ursprungligen avsett för att namnge formulärelement, och värdet på detta attribut användes när formulärdata skickades till servern. Precis som id-attributet tilldelar name-attributet ett namn till ett element. Men till skillnad från id behöver värdet på namnattributet inte vara unikt: flera element kan ha samma namn samtidigt, vilket är ganska vanligt när det används i alternativknappar och kryssrutor. Till skillnad från id är namnattributet endast tillåtet på vissa HTML-element, inklusive formulär, formulärelement och element och .

Du kan välja HTML-element baserat på värdena för deras namnattribut med hjälp av metoden getElementsByName() för Document-objektet:

Var radioknappar = document.getElementsByName("favoritfärg");

Metoden getElementsByName() definieras inte av klassen Document, utan av klassen HTMLDocument, så den är endast tillgänglig i HTML-dokument och inte tillgänglig i XML-dokument. Den returnerar ett NodeList-objekt som beter sig som en skrivskyddad array av Element-objekt.

I IE returnerar metoden getElementsByName() också element vars id-attributvärden matchar det angivna värdet. För att säkerställa kompatibilitet med olika versioner webbläsare måste du vara försiktig med att välja attributvärden och inte använda samma strängar för namn och id-attributvärden.

Välja element efter typ

Metoden getElementsByTagName() för Document-objektet låter dig välja alla HTML- eller XML-element av den angivna typen (eller efter taggnamn). Till exempel, för att få ett skrivskyddat arrayliknande objekt som innehåller Element-objekten för alla element i dokumentet, kan du göra följande:

var spans = document.getElementsByTagName("span");

Precis som metoden getElementsByName() returnerar getElementsByTagName() ett NodeList-objekt. Dokumentelement ingår i NodeList-arrayen i samma ordning som de visas i dokumentet, d.v.s. första elementet

I ett dokument kan du välja:

Var firstParagraph = document.getElementsByTagName("p");

HTML-taggnamn är skiftlägesokänsliga, och när getElementsByTagName() tillämpas på ett HTML-dokument jämförs det med taggnamnet på ett skiftlägesokänsligt sätt. Span-variabeln som skapats ovan, till exempel, kommer också att inkludera alla element som skrivs som .

Du kan få en NodeList som innehåller alla element i ett dokument genom att skicka jokertecknet "*" till metoden getElementsByTagName().

Dessutom definierar klassen Element också metoden getElementsByTagName(). Den fungerar precis som versionen av metoden i klassen Document, men väljer bara element som är underordnade av det element som metoden anropas på. Det vill säga hitta alla element inuti det första elementet

Det är möjligt enligt följande:

Var firstParagraph = document.getElementsByTagName("p"); var firstParagraphSpans = firstParagraph.getElementsByTagName("span");

Av historiska skäl definierar HTMLDocument-klassen speciella egenskaper för åtkomst till vissa typer av noder. Egenskaper bilder, formulär Och länkar hänvisar till exempel till objekt som beter sig som skrivskyddade arrayer som innehåller element , Och (men bara de taggarna , som har ett href-attribut). Dessa egenskaper hänvisar till HTMLCollection-objekt, som är ungefär som NodeList-objekt, men kan dessutom indexeras med värdena för id- och namnattributen.

HTMLDocument-objektet definierar också inbäddnings- och plugins-egenskaper, som är samlingar av HTMLCollection-element. Anchors-egenskapen är icke-standard, men den kan användas för att komma åt element En som har ett namnattribut men inget href-attribut. Egenskapen scripts definieras av HTML5-standarden och är en samling HTMLCollection-element.

Dessutom definierar HTMLDocument-objektet två egenskaper, som var och en inte refererar till en samling, utan till ett enskilt element. Egenskapen document.body representerar ett HTML-dokumentelement och egenskapen document.head representerar . Dessa egenskaper definieras alltid i dokumentet: även om det inte finns några och element i originaldokumentet kommer webbläsaren implicit att skapa dem. DocumentElement-egenskapen för Document-objektet hänvisar till rotelementet i dokumentet. I HTML-dokument representerar det alltid .

Välja element efter CSS-klass

Värdet på HTML-klassattributet är en lista med noll eller fler identifierare separerade med mellanslag. Det gör det möjligt att definiera uppsättningar av relaterade dokumentelement: alla element som har samma identifierare i klassattributet är en del av samma uppsättning. Ordklassen är reserverad i JavaScript, så JavaScript på klientsidan använder egenskapen className för att lagra värdet på HTML-klassens attribut.

Klassattributet används vanligtvis tillsammans med CSS-formmallar för överlappande format för att tillämpa en gemensam visningsstil för alla medlemmar i en uppsättning. Men dessutom definierar HTML5-standarden getElementsByClassName()-metoden, som låter dig välja uppsättningar av dokumentelement baserat på identifierarna i deras klassattribut.

Precis som metoden getElementsByTagName() kan metoden getElementsByClassName() anropas på både HTML-dokument och HTML-element, och returnerar ett "live" NodeList-objekt som innehåller alla dokument eller element avkomlingar som matchar sökkriterierna.

Metoden getElementsByClassName() tar ett enda strängargument, men själva strängen kan innehålla flera identifierare separerade med mellanslag. Alla element vars klassattribut innehåller alla angivna identifierare kommer att anses matchade. Ordningen på identifierarna spelar ingen roll. Observera att i både klassattributet och metodargumentet getElementsByClassName() separeras klassidentifierarna med mellanslag, inte kommatecken.

Följande är några exempel på hur metoden getElementsByClassName() används:

// Hitta alla element med klassen "warning" var warnings = document.getElementsByClassName("warning"); // Hitta alla avkomlingar till element med id "log" // med klasserna "error" och "fatal" var log = document.getElementById("log"); var fatal = log.getElementsByClassName("fatal error");

Välja element med CSS-väljare

CSS Cascading Style Sheets har mycket kraftfulla syntaktiska konstruktioner som kallas väljare som låter dig beskriva element eller uppsättningar av element i ett dokument. Tillsammans med standardisering av CSS3-väljare definierar en annan W3C-standard känd som Selectors API JavaScript-metoder för att få element som matchar den angivna väljaren.

Nyckeln till detta API är metoden querySelectorAll() för Document-objektet. Det tar ett enda strängargument med en CSS-väljare och returnerar ett NodeList-objekt som representerar alla element i dokumentet som matchar väljaren.

Förutom metoden querySelectorAll() definierar dokumentobjektet även en querySelector()-metod, metodliknande querySelectorAll(), med skillnaden att den endast returnerar det första (i dokumentordning) matchande elementet, eller null om det inte finns några matchande element.

Dessa två metoder definieras också av klassen Elements. När de anropas på ett element, söks hela dokumentet efter en matchning mot den givna väljaren, och sedan filtreras resultatet så att endast ättlingarna till det använda elementet finns kvar. Detta tillvägagångssätt kan tyckas kontraintuitivt, eftersom det betyder att väljarsträngen kan inkludera förfäderna till det element som matchas.

Dokumentstruktur och dokumentnavigering

Efter att ha valt ett dokumentelement är det ibland nödvändigt att hitta strukturellt relaterade delar av dokumentet (förälder, syskon, underordnat element). Dokumentobjektet kan ses som ett träd av nodobjekt. Nodtypen definierar egenskaper som låter dig navigera genom ett sådant träd. Det finns ett annat programgränssnitt för att navigera genom dokumentet, som ett träd av Element-objekt.

Dokument som nodträd

Dokumentobjektet, dess elementobjekt och textobjekten som representerar textbitarna i dokumentet är alla nodobjekt. Node-klassen definierar följande viktiga egenskaper:

parentNode

Den överordnade noden för denna nod, eller null för noder som inte har någon förälder, till exempel Document.

barnnoder

Ett läsbart arrayliknande objekt (NodeList) som ger en representation av underordnade noder.

förstabarn, sistabarn

Den första och sista underordnade noden, eller null om den givna noden inte har några barn.

nästaSyskon, föregåendeSyskon

Nästa och föregående syskonnoder. Brother noder är två noder som har samma förälder. Deras ordning motsvarar ordningen i dokumentet. Dessa egenskaper länkar noder i en dubbellänkad lista.

nodeType

Typen av denna nod. Noder av typen Dokument har värdet 9 i denna egenskap. Noder av typen Element - värde 1. Textnoder av typen Text - värde 3. Noder av typen Kommentarer - värde 8 och noder av typen DocumentFragment - värde 11.

nodeValue

Textinnehållet i noderna Text och Kommentar.

nodnamn

Taggnamnet på ett element där alla tecken konverteras till versaler.

Med dessa egenskaper för klassen Node kan du referera till den andra undernoden för den första undernoden i Document-objektet, som visas nedan:

Document.childNodes.childNodes == document.firstChild.firstChild.nextSibling

Låt oss säga att dokumentet i fråga ser ut så här:

Testa Hello World!

Då kommer den andra undernoden till den första undernoden att vara elementet. Den innehåller värdet 1 i egenskapen nodeType och värdet "BODY" i egenskapen nodeName.

Observera dock att detta API är extremt känsligt för ändringar i dokumentets text. Till exempel, om du lägger till en enstaka nyrad mellan taggarna och i det här dokumentet, blir det nyradstecknet den första underordnade noden (Textnoden) för den första undernoden, och den andra undernoden kommer att vara elementet, inte .

Dokument som elementträd

När själva dokumentelementen är av primärt intresse, snarare än texten i dem (och blanktecken mellan dem), är det mycket bekvämare att använda ett API som låter dig tolka dokumentet som ett träd av Element-objekt, och ignorera texten. och Kommentarsnoder som också är en del av dokumentet.

Den första delen av detta API är barnegenskapen för Element-objekt. Precis som egenskapen childNodes är dess värde ett NodeList-objekt. Men till skillnad från egenskapen childNodes innehåller barnlistan endast Element-objekt.

Observera att text- och kommentarnoderna inte har underordnade noder. Detta innebär att egenskapen Node.parentNode som beskrivs ovan aldrig returnerar text- eller kommentarnoder. Värdet på egenskapen parentNode för ett Element-objekt kommer alltid att vara ett annat Element-objekt eller roten till trädet, ett Document- eller DocumentFragment-objekt.

Den andra delen av dokumentelementnavigerings-API:t är egenskaperna för Element-objektet, liknande egenskaperna för åtkomst till under- och syskonnoderna för Node-objektet:

firstElementChild, lastElementChild

Liknar egenskaperna firstChild och lastChild, men returnerar underordnade element.

nextElementSibling, previousElementSibling

Liknar egenskaperna nextSibling och previousSibling, men returnerar syskonelement.

childElementCount

Antalet underordnade element. Returnerar samma värde som egenskapen children.length.

Dessa barn- och syskonegenskaper är standardiserade och implementerade i alla nuvarande webbläsare förutom IE.

Dokumentobjektmodellen, eller "DOM", är mjukvarugränssnitt tillgång till delar av webbsidor. I grund och botten är det ett sid-API som låter dig läsa och manipulera sidans innehåll, struktur och stilar. Låt oss se hur det fungerar och hur det fungerar.

Hur är en webbsida uppbyggd?

Processen att konvertera ett HTML-källdokument till en renderbar, stiliserad och interaktiv sida kallas "Critical Rendering Path". Även om denna process kan delas upp i flera steg, som jag beskrev i Understanding the Critical Rendering Path, kan dessa steg grovt grupperas i två steg. I den första tolkar webbläsaren dokumentet för att avgöra vad som så småningom kommer att visas på sidan, och i den andra gör webbläsaren renderingen.

Resultatet av det första steget är vad som kallas ett "renderingsträd". Renderträdet är en vy HTML-element, som kommer att visas på sidan, och deras associerade stilar. För att bygga det här trädet behöver webbläsaren två saker:

CSSOM, representerar stilar associerade med element

DOM, representation av element

Vad är DOM gjord av?

DOM är en objektrepresentation av det ursprungliga HTML-dokumentet. Det har vissa skillnader, som vi kommer att se nedan, men i huvudsak är det ett försök att omvandla strukturen och innehållet i ett HTML-dokument till objektmodell, som kan användas av olika program.

Strukturen hos DOM-objekt representeras av vad som kallas ett "nodträd". Det heter så eftersom det kan ses som ett träd med en ensam förälder som förgrenar sig till flera underordnade grenar, som var och en kan ha löv. I det här fallet är det överordnade "elementet" rotelementet, de underordnade "grenarna" är kapslade element och "löven" är innehållet i elementen.

Låt oss ta detta HTML-dokument som ett exempel:

Min första webbsida Hej världen!

Hur mår du?

Detta dokument kan representeras som följande noderträd:

• html
  • huvud
    • titel
      • Min första webbsida
  • kropp
    • h1
      • Hej världen!
    • sid
      • Hur mår du?

Vad DOM inte är

I exemplet ovan verkar det som att DOM är en 1:1-mappning av det ursprungliga HTML-dokumentet. Det finns dock som sagt skillnader. För att helt förstå vad DOM är måste vi titta på vad det inte är.

DOM är inte en kopia av den ursprungliga HTML-koden

Även om DOM skapas från ett HTML-dokument är det inte alltid exakt detsamma. Det finns två fall där DOM kan skilja sig från den ursprungliga HTML-koden.

1. När HTML innehåller märkningsfel

DOM är ett gränssnitt för åtkomst till de faktiska (dvs redan renderade) elementen i ett HTML-dokument. I processen att skapa DOM kan webbläsaren själv fixa vissa fel i HTML-koden.

Betrakta detta HTML-dokument som ett exempel:

Hej världen!

Dokumentet saknar och element, vilket är ett krav för HTML. Men om vi tittar på det resulterande DOM-trädet kan vi se att detta har åtgärdats:

• html
  • huvud
  • kropp
    • Hej världen!
  2. När DOM modifieras av Javascript-kod

  Förutom att vara gränssnittet för att visa innehållet i ett HTML-dokument, kan DOM självt också modifieras.

  Vi kan till exempel skapa ytterligare noder för DOM med hjälp av Javascript.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("Jag är ny!"); newParagraph.appendChild(paragraphContent); document.body.appendChild(newParagraph);

  Denna kod kommer att ändra DOM, men ändringarna kommer inte att återspeglas i HTML-dokumentet.

  DOM är inte vad du ser i webbläsaren (d.v.s. renderingsträdet)

  I webbläsarens viewport ser du renderträdet, som som sagt är en kombination av DOM och CSSOM. Det som skiljer DOM från ett renderträd är att det senare bara består av det som så småningom kommer att renderas till skärmen.

  Eftersom renderingsträdet bara handlar om vad som visas, utesluter det element som är visuellt dolda. Till exempel element som har stilar med display: ingen .

  Hej världen!

  Hur mår du?

  DOM kommer att inkludera elementet

  • html
    • huvud
    • kropp
      • h1
        • Hej världen!
      • sid
        • Hur mår du?

  Men renderingsträdet, och därmed det som är synligt i visningsporten, kommer inte att inkluderas i detta element.

  • html
    • kropp
      • h1
        • Hej världen!
  DOM är inte det som visas i DevTools

  Denna skillnad är något mindre eftersom DevTools Element Inspector ger den närmaste approximationen till DOM vi har i en webbläsare. Däremot innehåller DevTools-inspektören Ytterligare information, som inte finns i DOM.

  Det bästa exemplet på detta är CSS-pseudoelement. Pseudo-element skapade med ::before och ::after-väljarna är en del av CSSOM och renderingsträdet, men är tekniskt sett inte en del av DOM. Detta beror på att DOM bara genereras från det ursprungliga HTML-dokumentet, inte inklusive stilarna som tillämpas på elementet.

  Även om pseudoelement inte är en del av DOM, finns de i vår devtools elementinspektör.

  
  Sammanfattning

  DOM är ett gränssnitt till ett HTML-dokument. Den används av webbläsare som det första steget för att avgöra vad som ska renderas i visningsporten, och av Javascript-kod för att ändra innehållet, strukturen eller stilen på en sida.

innerHTML
vartext = element.innerHTML;
element.innerHTML = "";
Att tilldela en ny innerHTML skriver över koden, även om det nya värdet läggs till det nuvarande (+=). Skript som läggs till på detta sätt körs inte.

yttre HTML
Innehåller hela elementet och kan inte ändras. Tekniskt sett skapar skrivning till den här egenskapen ett nytt element som ersätter det gamla. Referenser till det gamla elementet i variabler ändras inte.

data
textNode.data - innehåll i textnoder och kommentarer

textInnehåll
element.textContent - text inuti elementet utan taggar.
Det finns också en icke-standardiserad innerText-egenskap som har mycket gemensamt med textContent .

Element synlighet

dold
element.hidden = sant
Det dolda attributet stöds inte i IE11.

Attribut

De flesta standardattribut i DOM blir egenskaper för objektet:
element.id = "id"
För icke-standardattribut skapas ingen egenskap (odefinierad)

Du kan skapa dina egna DOM-egenskaper:
element.myData = (namn:"John", efternamn:"Smith");
och metoder:
element.myFunc = function()(alert this.nodeName);
Detta fungerar eftersom DOM-noder är vanliga JavaScript-objekt. Dessa icke-standardiserade egenskaper och metoder påverkar inte visningen av taggen och är endast synliga i JavaScript.

Åtkomst till taggattribut:
element.hasAttribute(namn)
element.getAttribute(namn)
element.setAttribute(namn, värde)
element.removeAttribute(name)
element.attributes är en pseudo-array av attribut.

Attribut är skiftlägesokänsliga (html) och egenskaper är skiftlägeskänsliga (javaScript).
Attributvärdet är alltid en sträng.

Attribute: a.getAttribute("href") - visar exakt vad som finns i HTML
Egenskap: a.href - kan skilja sig från attributvärdet
Oftast beror en egenskap på ett attribut, men inte vice versa. Att ändra egenskapen påverkar inte attributet.

Arbeta med klasser

Klassattributet har två egenskaper:
className - sträng
classList - objekt

classList-objektmetoder:
element.classList.contains("klass") - kontrollera om ett objekt innehåller en given klass
element.classList.add("klass")
element.classList.remove("klass")
element.classList.toggle("klass")

classList är en pseudo-array, den kan itereras igenom för slinga.

dataattribut

Anpassade dataattribut är tillgängliga inte bara som attribut, utan också via datauppsättningsegenskapen
data-about = "något värde"
element.dataset.om

Nodordning

parent.contains(child) - sant eller falskt
kontrollerar om underordnad nod är kapslad i överordnad

nodeA.compareDocumentPosition(nodeB) - Ger information om innehållet och den relativa ordningen av element. Returvärdet är en bitmask:

Lägga till och ta bort noder

vardiv = document.createElement("div")
document.createTextNode("text")

parent.appendChild(element) - elementet läggs till i slutet av det överordnade
parent.insertBefore(element, nextSibling) - element läggs till före nextSibling
parent.insertBefore(element, parent.firstChild) - läggs till i början
parent.insertBefore(element, null) - fungerar som appendChild
Alla insättningsmetoder returnerar den infogade noden.
När du flyttar ett element behöver du inte först ta bort det från den gamla platsen, insättningsmetoderna gör detta automatiskt.

element.insertAdjacentHTML(where, html) - infoga godtycklig HTML-kod var som helst i dokumentet. Where anger var html ska infogas i förhållande till element - beforeBegin, afterBegin, beforeEnd, afterEnd.
element.insertAdjacentElement(where, newElement)
element.insertAdjacentText(där, text)
de två sista metoderna stöds inte i Firefox

node.append(...noder) - infogar noder i slutet av nod ,
node.prepend(...nodes) - infogar noder i början av nod ,
node.after(...nodes) - infogar noder efter noden ,
node.before(...noder) - infogar noder före nod ,
node.replaceWith(...nodes) - Infogar noder istället för node .
här är noder noder eller strängar, i valfritt antal och kombination, separerade med kommatecken.

var fragment = document.createDocumentFragment() - simulerar en DOM-nod som försvinner när den infogas i ett dokument och bara lämnar dess underordnade. I moderna webbläsare Rekommenderas inte.

element.cloneNode(true) - djup kopia av elementet
element.cloneNode(false) - kopia utan barn

parent.removeChild(element)
parent.replaceChild(newElement, element)
element.remove() - tar bort elementet direkt, utan referens till föräldern.
Metoder returnerar fjärrvärden