3.3.6. Assignment

[mserykh]

Assignment

Work a bit more with the DOM

Instructions

Research the DOM a little more by 'adopting' a DOM element. Visit the MSDN's list of DOM interfaces and pick one. Find it being used on a web site in the web, and write an explanation of how it is used.

Rubric

Criteria	Exemplary	Adequate	Needs Improvement
	Paragraph write-up is presented, with example	Paragraph write-up is presented, without example	No writeup is presented

[mserykh]

@dev-experience while reading about NodeList I decided to try to implement usage of childNodes. And find out a property children while I wanted to use childNodes. Anyway, could you review this https://codepen.io/trifle-on-a-stick/pen/PoGxxOJ please ?

Idea: Show an example of Live NodeLists

I upgraded an example from MDN:

const parent = document.getElementById('parent');
let child_nodes = parent.childNodes;
console.log(child_nodes.length); // let's assume "2"
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // outputs "3"

[mserykh]

Finally, I almost got a difference between the property children and childNodes: childNodes contain all nodes, including text nodes and comment nodes, while children only contain element nodes.

In this code snippet div id="myDIV" contains 5 child nodes:

<div id="myDIV">
  <p>First p element</p>
  <p>Second p element</p>
</div>

I found this good explanation:

Whitespace inside elements is considered as text, and text is considered as nodes. In this example, index 0, 2 and 4 in DIV are text nodes.

[mserykh]

An example for a method item() for the page: https://developer.mozilla.org/en-US/docs/Web/API/NodeList/item

document.getElementsByTagName('h2').item(1);

[mserykh]

[mserykh]

I worked a bit more with DOM and completed a task "Select all diagonal cells". Please check my solution on codepen: https://codepen.io/trifle-on-a-stick/pen/gOwZPzQ

[mserykh]

I picked NodeList to dive deeper.

NodeList

NodeList objests are collections (not arrays!) of nodes usually returned by properties Node.childNodes and Node.children or a method document.querySelectorAll(), for example. It is convertible to array using Array.from and can be iterated with forEach(). upd: NodeList is similar to HTMLCollection, but JavaScript NodeList items can only be accessed with their index number, while an HTMLCollection item can be accessed with a name, ID, or an index number.

There are 2 varieties of NodeList:

• Live: changes in the DOM will be added to the collection, e.g. Node.childNodes
• Static: changes in the DOM do not change the collection, e.g. document.querySelectorAll()

Properties NodeList.length: the number of nodes of the NodeList. It is very useful in looping.

Methods

• NodeList.item(): returns an item in the list by its index or null. Alternative syntax: nodeList[i] but returns undefined when i is out-of-bounds
• NodeList.entries(): returns an iterator (index of the item, nodes: Array [0 #text "hey"])
• NodeList.forEach(): executes a provided function once per NodeList element, passing the element as an argument to the function
• NodeList.keys(): returns an iterator (indexes of the child elements)
• NodeList.values(): returns an iterator (node objects such as

  , #text, )

NodeList with its methods is really useful for DOM walking and styling DOM elements, for example.

Above I provided a link to an example where I used it.

Here it is https://codepen.io/trifle-on-a-stick/pen/PoGxxOJ

[mserykh]

[mserykh]

Here is an example how it can be used:

Webpage https://docs.github.com/en/free-pro-team@latest/rest/reference/billing

Code snippet

export default function () {
  const printButtons = document.querySelectorAll('.js-print')

  Array.from(printButtons).forEach(btn => {
    // Open the print dialog when the button is clicked
    btn.addEventListener('click', () => {
      window.print()
    })
  })

  // Track print events
  window.onbeforeprint = function () {
    sendEvent({ type: 'print' })
  }
}

Explanation technical

1. A method querySelectorAll('.js-print') creates a static collection of all elements (buttons) with a class= "js-print".
2. Then it is converted to an array.
3. The array is being iterated with forEach() method to add an event listener (a click on the button) to every button on the page.
4. So that event listener will fire a method print().

Explanation to human beings A click on any printer icon on the page will open a pop-up to print out the page.

[mserykh]

I wrongly estimated that children returns NodeList. It returns HTMLCollection. Thus it has different methods. All HTMLCollections are live.