DOM Manipulation

Question 1

What does DOM stand for?

Answer 1

Document Object Model

Question 2

What does the following code do?

document.getElementById(‘aboutMe’);

Answer 2

This will select the element with the id of aboutMe from the HTML document.

Question 3

What does the following code do?

document.querySelector(‘ol li’);

Answer 3

This will select the first li element inside of the first ol element.

Question 4

What does the following code do?

document.querySelectorAll(‘p’);

Answer 4

This will select all paragraph elements within the HTML document.

Question 5

What will the following code do?

let liTag = document.getElementsByTagName('li');
for(tag of liTag) {
  tag.style.fontFamily = 'cursive';
}

Answer 5

This will change the font family to cursive for each item with the li tag.

Question 6

What are two methods that can change text on the DOM

Answer 6

1. ) innerText : specifies the text content of the specified node
2. ) innerHTML : specifies the HTML content of an element

Question 7

What is the syntax for creating a new h1 element on a page?

Answer 7

document.createElement(‘h1’)

Question 8

What will the following code display on the page?

let toDoTitle = document.createElement('h2');
let toDoDiv = document.getElementById('toDoDiv');

toDoDiv.appendChild(toDoTitle);
toDoTitle.innerText = ‘Needs to be done’;

Answer 8

This will place a new h2 element within the div with an id of “toDoDiv”. The h2 element text will be “Needs to be Done”
The only thing that will currently be displayed on the page is:

Needs to be Done

Question 9

What document method can you use to select the first matching element within a document?

Answer 9

querySelector( )

Example Usage: 
document.querySelector('h1');
//this will select the first h1 element that appears in a document

Question 10

What document method can you use to select all matching elements within a document?

Answer 10

querySelectorAll( )

Example Usage:
document.querySelectorAll('li');
//this will select all elements within a document that have an li tag

Question 11

What method can you use to select an element with its id?

Answer 11

getElementById( )

Example Usage:
document.getElementById('animals');
//this would select the element with the id of 'animals'

Question 12

Using this code to start, what would you need to do to add styling that changes the font color to blue and align the text to the center?

let para = document.querySelectorAll(‘p’);

Answer 12

let para = document.querySelectorAll(‘p’);

para. style.textAlign = ‘center’;
para. style.color = ‘blue’;