DOM

Question 1

How to get the element on the page if you know the id?

Answer 1

getElementById() method of document’s object.

var myEl = document.getElementById(“idOfTheElement”);

Question 2

How to access the HTML that is inside of the tags of an HTML element?

Answer 2

innerHTML property of element object.

var innHTML = document.getElementById(“myElem”).innerHTML;

Question 3

How to set the value of an HTML element’s attribute?

For example, if you have a tag <div> </div>
How can you make the html like so:

<div></div>

?

Answer 3

Use setAttribute() method of the html element’s object.

document.getElementById(“myDiv”).setAttribute(“class”, “myClass”);

Question 4

How to get the value of a certain HTML element’s attribute?

For example, if you have a tag <div class="someClass"> </div>

How can you get the value “someClass”?

Answer 4

Use getAttribute() method of html’s element object:

var attrValue = document.getElementById(“coolDiv”).getAttribute(“class”);

Question 5

How can you execute the function after the html page loads?

Answer 5

Use window’s object onload property.

Like so

function executeWhenPageLoaded(){
//function's code
}

window.onload = executeWhenPageLoaded;

Question 6

What will be displayed in the console and why?

console.log(document.getElementById(“board”).getAttribute(“class”));

<div class="myClass"> </div>

Answer 6

Uncaught TypeError: Cannot read property ‘getAttribute’ of null

JavaScript code in this case runs before the page is loaded, so document.getElementById(“board”) is null

To fix this, you need to make the JavaScript code run after the page is loaded.