Föreläsning 7: Document Object Model (DOM) ME152A
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Föreläsning 7: Document Object Model (DOM)
ME152A
Document Object Model
Föreläsning 7
• Strukturerad representation av ett dokument (HTML, XML, etc.)
• Genom JavaScript-objektet document
• Möjliggör åtkomst och manipulation av ett dokument
• Hierarkisk trädstruktur (parent, child, sibling)
Föreläsning 7
<!doctype html> <html> <head> <title>My home page</title> </head> <body> <h1>My home page</h1> <p>Hello, I am Marijn and this is my home page.</p> <p>I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html>
Föreläsning 7<!doctype html> <html> <head> <title>My home page</title> </head> <body> <h1>My home page</h1> <p>Hello, I am Marijn and this is my home page.</p> <p>I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html>
Föreläsning 7<!doctype html> <html> <head> <title>My home page</title> </head> <body> <h1>My home page</h1> <p>Hello, I am Marijn and this is my home page.</p> <p>I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html>
Föreläsning 7
Navigera genom DOM
• document.documentElement - vårt rotelement, dvs. <html> • document.head & document.body - <head> och <body> • .childNodes - alla noder inom ett element (barn) • .firstChild & .lastChild - det första och sista elementet • .parentNode - det nuvarande elementets förälder • .previousSibling & .nextSibling - noder bredvid ett element
på samma nivå (syskon)
Föreläsning 7
Navigera genom DOM
Föreläsning 7
Nodtyper• .nodeType - en siffra representerar typen av en nod
• 1 = element • 3 = text • 8 = HTML kommentar
• För att slippa komma ihåg dessa kan vi använda oss av: • document.ELEMENT_NODE (1) • document.TEXT_NODE (3) • document.COMMENT_NODE (8)
Föreläsning 7
// Exempel, vi hämtar en nod från vårt dokument var node = document.body.childNodes[3];
// Kontrollera typen av en nod if (node.nodeType == document.TEXT_NODE) { console.log("This is a text node.”);
} else if (node.nodeType == document.COMMENT_NODE) { console.log("This is a comment node.”);
} else if (node.nodeType == document.ELEMENT_NODE) { // Oftast vill vi försäkra oss om att det är // ett element vi har hittat/hämtat console.log("This is an element node."); }
Föreläsning 7
// De noder vi vill gå igenom var nodes = document.body.childNodes;
// Loopa igenom alla for (var i = 0; i < nodes.length; i++) { var current = nodes[i]; // Gör en utskrift om det är ett element if (current.nodeType == document.ELEMENT_NODE) { console.log("This is an element!"); } }
Föreläsning 7
Hitta ett eller flera element
• document.getElementsByTagName - hämtar alla element av en typ • document.getElementById - hämtar ett element baserat på id • document.getElementsByClassName - hämtar alla element med en klass
Föreläsning 7
<!doctype html> <html> <head> <title>My home page</title> </head> <body> <h1 id="headline">My home page</h1> <p class="info">Hello, I am Marijn and this is my home page.</p> <p class="info">I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html>
Föreläsning 7
<!doctype html> <html> <head> <title>My home page</title> </head> <body> <h1 id="headline">My home page</h1> <p class="info">Hello, I am Marijn and this is my home page.</p> <p class="info">I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html>
// Vår rubrik var header = document.getElementById("headline"); console.log(header);
// Vår länk var anchors = document.getElementsByTagName("a"); console.log(anchors[0]);
// Våra paragrafer var paragraphs = document.getElementsByClassName("info"); console.log(paragraphs);
Föreläsning 7
Hitta element baserat på elektor
• En selektor är samma sak som skrivs när CSS ska appliceras på ett element • document.querySelectorAll - hämtar alla element baserat på en selektor • document.querySelector - hämtar ett element baserat på en selektor
Föreläsning 7
<!doctype html> <html> <head> <title>My home page</title> </head> <body> <h1 id="headline">My home page</h1> <p class="info">Hello, I am Marijn and this is my home page.</p> <p class="info">I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html>
var header = document.querySelector("#headline"); console.log(header);
var anchor = document.querySelector("a"); console.log(anchor);
var paragraphs = document.querySelectorAll(".info"); console.log(paragraphs);
Föreläsning 7
Element
• .id - en sträng innehållande elementets id • .className - en sträng innehållande elementets klass(er) • .textContent - en sträng innehållande elementets text • .style - ett objekt innehållande alla CSS attribut
• CSS attribut som skrivs med bindestreck (t.ex. “font-family”) skrivs istället
som .style.fontFamily
Några av de vanligaste attributen som vi kan ändra på
För att hitta fler attribut kan ni utforska ett element i webbkonsollen
Föreläsning 7
<img src=“images/cat.jpg” alt=“Picture of a funny cat”>
<a href=“http://google.com” title=“Go to google">Google</a>
De attribut ett HTML element har kan vi även
komma åt genom vanliga attribut på ett objekt.
T.ex .src, .alt, .href, .title, osv.
Element
Föreläsning 7<!doctype html> <html> <head> <title>My home page</title> </head> <body> <h1 id="headline">My home page</h1> <p class="info">Hello, I am Marijn and this is my home page.</p> <p class="info">I also wrote a book! Read it <a href="http://eloquentjavascript.net">here</a>.</p> </body> </html>
var header = document.querySelector("#headline"); // Lägg till / ändra på klasserna header.className = "important"; // Ändra färgen på texten header.style.color = "red";
var anchor = document.querySelector("a"); // Skriv ut adressen console.log(anchor.href);
var paragraphs = document.querySelectorAll(".info"); // Ändra innehållet i den första paragrafen paragraphs[0].textContent = "Content has changed!";
// Lägg till klassen important på andra paragrafen paragraphs[1].className = "info important";
Föreläsning 7
Element
• document.createElement(typ) - skapa ett element av en typ
• document.createTextNode(text) - skapa en textnod • (nod).appendChild(barn) - lägg till en nod på en annan • (nod).insertBefore(ny, befintlig) - placera en nod innan en annan • (nod).replaceChild(ny, befintlig) - byt ut en befintlig nod mot en ny • (nod).removeChild(barn) - radera en nod
Föreläsning 7
// Skapa en paragraf med text var paragraph = document.createElement("p"); var paragraphText = document.createTextNode("Go to "); paragraph.appendChild(paragraphText);
// Modifiera attribut paragraph.className = "info";
// Skapa en länk med text var anchor = document.createElement("a"); var anchorText = document.createTextNode("google"); anchor.appendChild(anchorText);
// Modifiera attribut anchor.href = "http://google.com";
// Lägg till länken i paragrafen paragraph.appendChild(anchor);
Föreläsning 7
// Radera länken paragraph.removeChild(anchor);
// Skapa ett <i> element med text var italic = document.createElement("i"); var italicText = document.createTextNode("This is italic!"); italic.appendChild(italicText);
// Byt ut länken mot en kursiv text paragraph.replaceChild(italic, anchor);
// Eller placera den kursiva texten innan länken paragraph.insertBefore(italic, anchor);
Föreläsning 7
PositioneringAnimera positionen av ett element
• Kräver att ett element har position: relative/absolute/fixed • Kan använda oss av attributen .top/.bottom/.left/.right för
att ändra positionen • T.ex (nod).style.top = “200px”;
Föreläsning 7
<!doctype html> <html> <head> <title>Positionering</title> <style> #box { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: yellow; } </style> </head> <body> <div id="box"></div> </body> </html>
var box = document.getElementById("box");
// Positionera vår <div> box.style.top = "50px"; box.style.left = "50px";
// Positionera vår <div> box.style.top = "100px"; box.style.left = "100px";
Föreläsning 7
// Den <div> vi vill positionera var box = document.getElementById("box"); // Variabel som styr positionen i animationen var position = 0;
function moveBox() { // Vi måste avsluta vår animation någon gång if (position > 300) { return false; } // Öka positionen med något värde position += 10; // Positionera vår <div> box.style.top = position + "px"; box.style.left = position + "px";
window.requestAnimationFrame(moveBox); }
window.requestAnimationFrame(moveBox);
Läs mer på: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
Föreläsning 7
Events
• Ett event är saker som när en användare klickar på en knapp,
trycker ner en tangent, för musen ovanför ett element, osv.
• (nod).addEventListener(event, funktion) - vi kan ange
att på en nod så ska en funktion anropas när ett event sker • Exempel på events: “click”, “mousedown”, “keydown”, “submit”, etc. • (nod).removeEventListener(event, funktion)
Föreläsning 7
var box = document.getElementById("box");
function clickMe() { console.log("You clicked on the box!"); }
box.addEventListener("click", clickMe);
// Alternativt box.addEventListener("click", function() { console.log("You clicked on the box!"); });
Föreläsning 7
var box = document.getElementById("box");
box.addEventListener("click", function(event) { // Parametern "event" skickas alltid med som // innehåller information eventet // T.ex vilket element klickades? console.log(event.target); // Utför någonting på elementet event.target.style.background = "red"; });
Föreläsning 7
Läs kapitel 13 & 14 i Eloquent JavaScript: • http://eloquentjavascript.net/13_dom.html • http://eloquentjavascript.net/14_event.html
Related Documents
