Innehållsförteckning
I den första delen av denna handledning såg vi hur DOM är uppbyggt och hur det fungerar, i detta kommer vi att fortsätta arbeta med det för att utöka dess funktioner och kunna manipulera alla element i vårt HTML -dokument.Arbetar med DOM
För att komma åt dokumentobjektet använder vi en global dokumentvariabel; Denna variabel är ett av nyckelobjekten som webbläsaren skapar för oss, eftersom det är genom detta dokumentobjekt som vi kan komma åt dokumentinformationen som helhet och det ger oss individuell åtkomst till varje dokumentobjekt.
Som alltid, låt oss se ett exempel som vi kan förena den teori vi känner med hur den tillämpas i verkligheten.
ExempelDet finns massor av olika sorters frukt - det finns över 500 banansorter ensamma. När vi lägger till de otaliga typerna av äpplen, apelsiner och annan välkänd frukt står vi inför tusentals val.
En av de mest intressanta aspekterna av frukt är sorten som finns i varje land. Jag bor nära London, i ett område som är känt för sina äpplen.
Koden som vi använder SOL Det är ganska kort och enkelt, men det fångar de olika användningsområden som vi kan ge det, vi kommer att förklara koden del för del för att se hur vi har använt föremålen.
En av de mest grundläggande åtgärderna vi kan använda är att hämta informationen från HTML -dokumentet som vi arbetar med, så den första raden som vi har placerat i vår kod gör just det och vi kan se det:
document.writeln ("
URL: "+ document.URL);
I det här fallet läser vi fastighetens värde document.URL, som returnerar webbadressen till det aktuella dokumentet, det vill säga webbadressen som webbläsaren använde för att ladda dokumentet där vi har koden.
Vi ser också hur vi använder Writeln -metoden:
document.writeln ("
URL: "+ document.URL);
Denna metod lägger helt enkelt till innehåll i slutet av vårt HTML -dokument, i det här fallet börjar vi med att lägga till en tagg
och sedan URL -egenskapen, med detta har vi redan ändrat strukturen och innehållet i DOM.
Nu var det nästa vi gjorde att välja alla element som har p -taggen i dokumentet, för detta använder vi följande rad:
var elems = document.getElementsByTagName ("p");
Hur vi ser metoden getElementsByTagName Det är den som tjänar vårt syfte, samtidigt tilldelar vi allt som denna metod samlar in till variabeln elem.
På nästa rad gör vi en iteration över elemsvariabeln, för att få de tilldelade objekten, för var och en som vi kommer att iterera kommer vi att lägga till en textrad med dess id och senare kommer vi att ändra dess attribut för att ändra dess utseende .
for (var i = 0; i <elems.length; i ++) {document.writeln ("Element ID:" +elems [i] .id); elems [i] .style.border = "medium dubbel svart"; elems [i] .style.padding = "4px"; }
Som vi kan se lägger vi till en ram till varje element som vi har lagrat i våra variabla elem och dessutom lägger vi till en stoppning.
Efter allt detta, låt oss äntligen se hur allt detta ser ut i webbläsaren:
FÖRSTORA
Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng 
