Dorokhov.codes

Document Object Model

Access to all methods of the DOM is implemented using the document object.

Getting DOM elements

document.getElementById("main-header");
document.getElementsByTagName("p");                 // HTMLCollection object
document.getElementsByClassName("article-item");    // HTMLCollection object

Query-style:

document.querySelectorAll('.article');  // NodeList object
document.querySelector('.article');     // First element

// These methods work for nodes as well:
someNode.querySelectorAll('p.article-item');
someNode.querySelector('p.article-item');

NodeList object has the forEach() method.

Accessing DOM elements

We don’t need to search for the html, body, head nodes, we can access them through the document:

document.documentElement;   // html node
document.body;              // body node
document.head;              // head node

Node can be a text node or en element node (element).

Accessing nodes:

obj.childNodes;     // NodeList object. All child nodes.
obj.firstChild;     // The first node.
obj.lastChild;      // The last node.

obj.parentNode;
obj.parentNode.parentNode;  // Example how to get a parent of a parent.
obj.nextSibling;            // Next node.
obj.previousSibling;        // Previous node.

Accessing elements:

obj.children;           // NodeList object. Child element nodes.
obj.firstElementChild;  // The first element.
obj.lastElementChild;   // The last element.

obj.parentElement;
obj.nextElementSibling;     // Next element.
obj.previousElementSibling; // Previous element.

DOM object properties

Property	Description
innerHTML	Sets or returns the HTML content (inner HTML) of an element.
textContent	Sets or returns a text content of elements.
style	Inline styles of a node.

Creating DOM elements

There are two types of objects on the page: elements with wrapping tags (element node) and elements without wrapping tags (text node).

document.createElement('div');
document.createTextNode('Test text');

How to create a block with inner HTML using plain text:

const div = document.createElement('div');
div.innerHTML = ''; // All HTML code is here.

Working with CSS

`style` property

Every DOM object has a style property.

Property	Description
obj.style	Inline styles of a node. It’s also an object.
obj.style.backgroundColor	Example: `red`.
obj.style.width	Example: `100px`
obj.style.cssText	The most interesting property. We can assign a string with CSS. Example: `background-color: black; width: 100px;`

`className` property

obj.className; // all classes as a string. Old format.

API to work with classes

obj.classList.length; // Number of classes.

obj.classList.item(index); // get class by an indnex
obj.classList.add('active');
obj.classList.add('active', 'hovered', 'test');
obj.classList.toggle('active');
obj.classList.remove('active');
obj.classList.contains('active');

obj.matches('.active'); // another check
obj.closest('.wrapper'); // closest parent with some selector

Working with computed styles

Get styles of an element:

window.getComputedStyle(element);
window.getComputedStyle(element).fontSize;

API to manipulate elements

node.append(div);       // to the end
node.prepend(div);      // to the beginning
node.before(div);       // insert before someNode
node.after(div);        // insert after someNode
node.remove();          // Remove the node
node.replaceWith(div);  // Replace the node.

// Old methods:
someNode.appendChild(div);
someParentNode.insertBefore(div, anotherNode);
someParentNode.removeChild(childNode);
someParentNode.replaceChild(initialNode, newNode);

Adding HTML to some position:

node.insertAdjacentHTML('beforebegin', '<h3>Test</h3>');
node.insertAdjacentHTML('beforeend', '<h3>Test</h3>');
node.insertAdjacentHTML('afterbegin', '<h3>Test</h3>');
node.insertAdjacentHTML('afterend', '<h3>Test</h3>');

Direct writing

Functions: write().

document.open();
document.write();
document.close();