DOM

Question 1

DOM

Answer 1

• DOM is the interface between your JavaScript and HTML + CSS
• The browser turns every HTML tag into a JS object that we can manipulate.
• document object model connects your JavaScript to HTML & CSS
• JavaScript objects that’s modeling your HTML elements
• Document is the root node where everything other object lives.

• each HTML element is modeled into JS objects behind the scene

Question 2

document.getElementByid()

Answer 2

• selects an element by id

Question 3

document.getElementsByClassName()

Answer 3

• selects an element by class

Question 4

document.getElementsByTagName()

Answer 4

• selects elements by tag name.. li, h1, etc

Question 5

document.querySelector()

Answer 5

• returns the first element that matches a given CSS style selector
• must use “#name” when selecting and id
• must use “.name” when selecting a class
• must use “name” when selecting an element.

Question 6

document.querySelectorAll()

Answer 6

• returns a list of elements that matches a given CSS-style selector

Question 7

style

Answer 7

• is a property to manipulate an elements style.

//select
var tag = document.getElementById("highlight");

//Manipulate
tag.style.color = "blue";
tag.style.border = "10px solid red"; 
etc etc

Question 8

classlist

Answer 8

• A read-only list that contains the classes for a given element. It is not an array
• better solution than style object

var tag = document.querySelector(“h1”);

//Add A class to the selected element
tag.classList.add("another-class");

//remove a class
tag.classList.remove("another-class");

//Toggle a class
tag.classList.toggle("another-class");

Question 9

textContent

Answer 9

• Returns a string of all the text contained in a given element.
• treats everything as text. Even if passed text with tags in it the tags won’t render.

//select the <p> tag:
var tag = document.querySelector("p");

//retrieve the textContent:
tag.textContent //"This is great"

//alter the textContent:
tag.textContent = "blah blah blah";</p>

Question 10

innerHTML

Answer 10

• similar to textContent, except it returns a string of all the HTML contained in a given element.
• will render the tags if tags are in the string.

Question 11

getAttribute()

setAttribute()

Answer 11

• used to read and write attributes like src or href

Question 12

addEventListener

Answer 12

• a method that adds a listener to a user event

element.addEventListener(type, functionToCall);

var button = document.querySelector("button");
button.addEventListener("click", function() {
   console.log("someone clicked the button!");
});