Traversing and Manipulating the DOM

Question 1

ParentNode.children

Answer 1

• The ParentNode.children read-only property returns a live HTMLCollection of child elements of the given object

Question 2

variable i

Answer 2

short for “index”

Question 3

Element.querySelector

Answer 3

• returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors
• element and baseElement are element objects
• selectors is a group of selectors to match on

Question 4

listItems should be the children of the navigation unordered list. Fix it.

var listItems = navigation;

Answer 4

var listItems = navigation.children;

Question 5

We want to get the anchor (the a element) from inside the listItem. Use a method to traverse and select the anchor.

var anchor = listItem;

Answer 5

var anchor = listItem.querySelector(“a”);

Question 6

document.createElement

Answer 6

• in an HTML document creates the specified HTML element or HTMLUnknownElement if the element is not known
• element is the created element object
• tagName is a string that specifies the type of element to be created
  
  • the nodeName of the created element is initialized with the value of tagName
  • don’t use qualified names (like “html:a”) with this method

Question 7

Create a new div element and assign it to newDiv

var newDiv

Answer 7

var newDiv = document.createElement(“div”);

Question 8

Create a new span element and assign it to newSpan

var newSpan

Answer 8

var newSpan = document.createElement(“span”);

Question 9

Node.parentNode

Answer 9

• returns the parent of the specified node in the DOM tree
• parentNode is the parent of the current node
• the parent of an element is an Element node, a Document node, or a DocumentFragment node

Question 10

Node.appendChild

Answer 10

• adds a node to the end of the list of children of a specified parent node. If the node already exists it is removed from current parent node, then added to new parent node

var child = element.appendChild(child);

• element is the parent element
• child is the node to append underneath element
  
  • also returned

Question 11

Node.removeChild

Answer 11

• removes a child node from the DOM. Returns removed node
• child is the child node to be removed from the DOM
• element is the parent node of child
• oldChild holds a reference to the removed child node. oldChild === child

Question 13

Remove the pleaseEnableParagraph from the body

Answer 13

body.removeChild(pleaseEnableParagraph);

Question 15

Append the newParagraph to the body

Answer 15

body.appendChild(newParagraph);

Question 16

We’re removing a paragraph and adding a new one to the body. The newParagraph has no text in it. Modify the newParagraph element’s text to say “JavaScript is enabled”.

var body = document.body;
var newParagraph = document.createElement("p");
var pleaseEnableParagraph = document.querySelector("#please\_enable");

body. removeChild(pleaseEnableParagraph);
body. appendChild(newParagraph);

Answer 16

newParagraph.textContent = “JavaScript is enabled”;

Question 17

Element.classList

Answer 17

• classList returns a token list of the class attribute of the element
• add - Adds a class to an element’s list of classes
• remove - Removes a class from an element’s list of classes
• toggle - Toggles the existence of a class in an element’s list of classes
• See below about the optional second argument
• contains - Checks if an element’s list of classes contains a specific class

Question 18

Use the classList property on the anchor to add a new class of “selected” to it

var anchor = document.querySelector(“a”);

Answer 18

anchor.classList.add(“selected”);

Question 19

Use classList to toggle the “live” class on the anchor element

var anchor = document.querySelector(“a”);

Answer 19

anchor.classList.toggle(“live”);

Question 20

EventTarget.addEventListener

Answer 20

• the EventTarget.addEventListener() method registers the specified listener on the EventTargetit’s called on
• it allows adding more than a single handler for an event

target.addEventListener(type, listener

• type
  
  • a string representing the event type to listen for
• listener
  
  • the object that receives a notification when an event of the specified type occurs
  • this must be an object implementing the EventListener interface, or simply a JavaScript function

Question 21

fix it so that both of the handlers trigger on “change” rather than just the last function assigned to onchange

navigationSelect.onchange = navigateToValue;
navigationSelect.onchange = sendAnalytics;

Answer 21

navigationSelect.addEventListener(“change”, navigateToValue);
navigationSelect.addEventListener(“change”, sendAnalytics);