DOM Manipulation, Nodes and Events

Question 1

How do the css query selector methods work?

Answer 1

They retrieve a snapshot of a NodeList — that is, they aren’t updated every time they’re used.

Question 2

How would you find all elements with a class of “block” using a query selector method?

Answer 2

var blocks = document.querySelectorAll(“.block”);

Question 3

use a query selector to find one element by ID ‘myID’.

Answer 3

document.querySelector(“#myId”);

Question 4

What’s a way to toggle a class on and off that doesn’t use jQuery and works only in the latest browsers? (all of them)

Answer 4

someNode.classList.toggle(“myClass”);

Question 5

What HTML5 property tells you if a document is loading or has loaded?

Answer 5

document.readyState; // “loading” or “complete”

Question 6

How can you see if one node contains another?

Answer 6

someNode.contains( otherNode ).

Question 7

What’s the difference between someNode.children and someNode.childNodes?

Answer 7

children are only elements; childNodes are any type of node (text, whitespace, comments)

Question 8

How can you create an event handler for DOM Level 2 such that you can also remove it?

Answer 8

Use a function statement and refer to the variable name.

btn.addEventListener(“click”, funcName, false);

Question 9

What is event.target vs event.currentTarget?

Answer 9

target is the node that fired the event (like a menu item in a list).
currentTarget is the node to which the eventListener is attached (like the menu wrapper, the parent of the menu item)

Question 10

What is event.stopPropagation() vs event.stopImmediatePropagation()?

Answer 10

stopPropagation() stops an event from bubbling or capturing (e.g,, so a listener on the body won’t respond to a button click).
stopImmediatePropagation() does this and also prevents other handlers from firing on the event.

Question 11

What is the event.type property? Why would you use it?

Answer 11

It’s the type of event (mouseover, click, etc). Useful for handling multiple events with one handler – if (event.type == “mouseover”) …

Question 12

If you want to know when mouse goes over a menu area but don’t want to know every time it goes over a descendent menu item, use what event type?

Answer 12

mouseenter. Mouseover would fire on descendents.

Question 13

What are the ways to get mouse coordinates on the browser screen and on the page?

Answer 13

event.clientX event.clientY give coordinates on the screen (scrolling not taken into account).
event.pageX and .pageY take scrolling into account.
They are the same if page isn’t scrolled.

Question 14

What is relatedTarget and why might you use it?

Answer 14

It’s an event property of the mouseover and mouseout events. Using it, you could tell if mouse left a menu item for another menu item, say, or if it left the menu altogether.
event.relatedTarget.classList.contains(“someclass”) will check if the related target has a class.

Question 15

How could you check if a given element, div, has a class of “block”?

Answer 15

div.classList.contains(“block”);

Question 16

How could you map, filter or otherwise iterate through a nodelist using an array function (e.g. filter or map)?

Answer 16

Array.prototype.forEach.call(myNodeList, func(el,i,list));

Question 17

What is event delegation?

Answer 17

It’s a way to optimize performance by not attaching too many event handlers. Since events bubble, a parent element (or even the document) can handle events, responding appropriately to each one based on event.target or other information.

Question 18

Using element traversal method, find the previous sibling to an element, myElement.

Answer 18

myElement.previousElementSibling()

Question 19

using element traversal method, find the last child of myElement that’s an element and change text to “Yo!”

Answer 19

myElement.lastElementChild.textContent = “Yo!”;

Question 20

Check if an element has a class; add, remove, or toggle a class.

Answer 20

element.classList.contains(‘someclass’); // add(), remove(), toggle();

Question 21

How can you get or set a data attribute called data-details on myElement

Answer 21

myElement.dataset.details = newValue; // no ‘data-‘

myElement.setAttribute(‘data-details’, newValue);

Question 22

What’s a good way to access the html tag?

Answer 22

document.documentElement;

Question 23

How can you remove a node from the DOM?

Answer 23

someNode.removeChild(childNode);
// This returns a reference to that node.

Question 24

What does someNode.normalize() do?

Answer 24

Combines adjacent text nodes into one and removes empty text nodes.

Question 25

What is a common way to retrieve radio buttons using a document method?

Answer 25

document.getElementsByName(“name”);

Radio buttons are usually named. Note: this returns an HTML collection.

Question 26

What are the five special collections that provide quick access to common parts of the document?

Answer 26

document.anchors (all a elements with a name attribute); document.applets; document.forms; document.images; document.links (all a elements with an href attribute).

Question 27

Name the methods that help find and change attributes on an HTML element.

Answer 27

getAttribute(attributeName), setAttribute(name, value), and removeAttribute(attrName); hasAttribute(attrName);

Question 28

If iterating a list of attributes for a given node called myDiv, how would you get each attribute and it’s value?

Answer 28

myDiv.attributes[i].nodeName; // “id”

myDiv.attributes[i].nodeValue; // “container”

Question 29

What are three ways to get or change text such as in a paragraph node?

Answer 29

textContent, innerText, node.firstChild.nodeValue, or innerHTML. These are properties, not functions. nodeValue fastest; MDN says textContent often has better performance than innerHTML.

Question 30

How do you use a document fragment node type and why?

Answer 30

Use it to reduce the number of times DOM needs to be re-rendered.
var frag = document.createDocumentFragment();
Add anything you want to frag then append it to the DOM when ready.

Question 31

What's wrong with this loop:
var blocks = document.getElementsByTagName("block");
for (var i = 0; i

Answer 31

blocks is a nodeList or HTML collection, which is "live" so it gets looked up every time it's accessed. Better to set a different variable and iterate over that:
var len = blocks.length.

Question 32

How can you find whether a node is ‘p’ or ‘div’ or something else?

Answer 32

someElement.nodeName;

Question 33

Summarize nodeValue, innerHTML, textContent, and innerText. How is each distinct?

Answer 33

nodeValue is faster than innerHTML but requires that a node already exists;
innerHTML parses content as HTML and takes longer.
textContent uses straight text, does not parse HTML, and is faster.
innerText Takes styles into consideration. It won’t get hidden text for instance.

Question 34

Replace an element (el) with an element (newEl)

Answer 34

el.parentNode.replaceChild(newChild, oldChild);

Question 35

Copy a node and all of it’s children

Answer 35

var newNode = someNode.cloneNode(true);