DOM | Chinese Rule of Eight

ref – http://www.w3schools.com/js/js_htmldom.asp
https://javascript.info/dom-navigation

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

html = document.documentElement
The topmost document node is document.documentElement. That’s DOM node of tag.
body = document.body
Another widely used DOM node is the element – document.body.
head = document.head
The head tag is available as document.head.

A script cannot access an element that doesn’t exist at the moment of running.

In particular, if a script is inside , then document.body is unavailable, because the browser did not read it yet.

So, in the example below the first alert shows null:

<html>

<head>

alert( "From HEAD: " + document.body );

// null, there's no <body> yet

</script>

</head>

<body>

alert( "From BODY: " + document.body );

// HTMLBodyElement, now it exists

</script>

</body>

</html>

What is the HTML DOM?

The HTML DOM is a standard object model and programming interface for HTML. It defines:

The HTML elements as objects
The properties of all HTML elements
The methods to access all HTML elements
The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

HTML DOM methods are actions you can perform (on HTML Elements)

HTML DOM properties are values (of HTML Elements) that you can set or change

for example:

<html>

<body>

document.getElementById("demo").innerHTML = "Hello World!";

</script>

</body>

</html>

In the example above, getElementById is a method, while innerHTML is a property.

The getElementById Method

The most common way to access an HTML element is to use the id of the element.

In the example above the getElementById method used id=”demo” to find the element.

The innerHTML Property

The easiest way to get the content of an element is by using the innerHTML property.

The innerHTML property is useful for getting or replacing the content of HTML elements.

The HTML DOM Document

In the HTML DOM object model, the document object represents your web page.

The document object is the owner of all other objects in your web page.

If you want to access objects in an HTML page, you always start with accessing the document object.

Below are some examples of how you can use the document object to access and manipulate HTML.

Event for Elements

Reacting to Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:
onclick=JavaScript

Examples of HTML events:

When a user clicks the mouse
When a web page has loaded
When an image has been loaded
When the mouse moves over an element
When an input field is changed
When an HTML form is submitted
When a user strokes a key

HTML Event Attributes

1	<button onclick="displayDate()">Try it</button>

Assign Events Using the HTML DOM

document.getElementById("myBtn").onclick = displayDate;

</script>

DOM collections are read-only

DOM collections, and even more – all navigation properties listed in this chapter are read-only.

We can’t replace a child by something else assigning childNodes[i] = ….
Changing DOM needs other methods, we’ll see them in the next chapter.

DOM collections are live

Almost all DOM collections with minor exceptions are live. In other words, they reflect the current state of DOM.

If we keep a reference to elem.childNodes, and add/remove nodes into DOM, then they appear in the collection automatically.

Siblings are nodes that are children of the same parent. For instance, and are siblings:

body is said to be the “next” or “right” sibling of head,
head is said to be the “previous” or “left” sibling of body
The parent is available as parentNode.

The next node in the same parent (next sibling) is nextSibling, and the previous one is previousSibling.

For instance:

// HTML is "dense" to evade extra "blank" text nodes.

// parent of <body> is <html>

alert( document.body.parentNode === document.documentElement ); // true

// after <head> goes <body>

alert( document.head.nextSibling ); // HTMLBodyElement

// before <body> goes <head>

alert( document.body.previousSibling ); // HTMLHeadElement

</script></body></html>

Access the div DOM node, ul DOM node, and 2nd li node

<html>

<body>

<div>Users:</div>

<ul>

</ul>

</body>

</html>

console.log("--- the <div> DOM node ---");

console.log(document.body.firstElementChild); // elements are div, ul, li

console.log(document.body.children[0]); // children are elements array. Let's get the first one

console.log(document.body.childNodes[0]);

console.log(document.body.childNodes[1]); // if we are to go down nodes, we get the 2nd one, because 1st is the enter text node

console.log(document.body.childNodes[2]);

console.log(document.body.childNodes[3]);

console.log(document.body.childNodes[3].firstElementChild);

console.log(document.body.childNodes[3].children[0]);

console.log(document.body.childNodes[3].lastElementChild);

console.log(document.body.childNodes[3].children[1]);

console.log("--- the <ul> DOM node ---");

console.log(document.body.children[1]);

</script>

output:

--- the <div> DOM node ---

<div>Users:</div>

#text

<div>Users:</div>

#text

--- the <ul> DOM node ---

Using console.dir to view objects

We want to color the cells in the table diagonally. In order to do this, we must get the rows object from the table first. The rows property is an array with rows.

For each row object, we see that there is an array of td objects. We color 0th td object for the first row, 1st td object for 2nd row…and so forth.

<!DOCTYPE HTML>

<html>

<head>

<style>

table {

border-collapse: collapse;

}

td {

border: 1px solid black;

padding: 3px 5px;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

let table = document.body.firstElementChild;

console.dir(table); // look at the properties, you will see rows, which is an array of row objects

for (var i = 0; i < table.rows.length; i++) { // thus, we can loop through it

var row = table.rows[i];

console.dir(row); // look at the properties, you will see cells, which is an array tr objects

// each row has an array of td cells

row.cells[i].style.backgroundColor = 'red';

}

</script>

</body>

</html>