javascript : DOM API (concept, node element)

The DOM (Document Object Model) API in JavaScript provides a way to interact with HTML and XML documents. It represents the structure of a document as a tree-like structure, where each node in the tree corresponds to a part of the document, such as elements, attributes, text, etc. The DOM API allows you to manipulate the structure, content, and styling of web documents dynamically.

Here are some key aspects and functionalities provided by the DOM API:

1. Accessing Elements:
   • The DOM API allows you to access elements within an HTML document using methods such as getElementById, getElementsByClassName, getElementsByTagName, querySelector, querySelectorAll, etc. These methods enable you to select specific elements based on their IDs, classes, tag names, or CSS selectors.
2. Modifying Content:
   • You can modify the content of elements by accessing their properties and attributes. For example, you can change the text content of an element using the textContent property, modify HTML content using the innerHTML property, or update attribute values using methods like setAttribute and removeAttribute.
3. Manipulating Styles and Classes:
   • The DOM API allows you to manipulate the styles and classes of elements dynamically. You can access and modify CSS properties using the style property of an element. Additionally, you can add, remove, or toggle classes using methods like classList.add, classList.remove, and classList.toggle.
4. Creating and Modifying Elements:
   • The DOM API enables the creation of new elements dynamically. You can create elements using the createElement method, set their properties and attributes, and append them to the document using methods like appendChild, insertBefore, replaceChild, etc. You can also clone and remove elements as needed.
5. Handling Events:
   • The DOM API allows you to attach event listeners to elements to handle various user interactions such as clicks, keypresses, mouse movements, etc. You can use methods like addEventListener to register event handlers and respond to events triggered by users.
6. Traversing the DOM:
   • The DOM API provides methods for traversing the DOM tree and navigating between elements. You can move between parent and child elements, siblings, and ancestor/descendant relationships using properties like parentNode, childNodes, nextSibling, previousSibling, etc.

const element = document.querySelector('h1');
console.log(element.textContent);

// Node vs Element

// node : Mean everything from html elements, text, comments, etc.
// element : html elements

const parent = document.querySelector('.parent');

// Check all child nodes of parent element
console.log(parent.childNodes);

// Check all child elements of parent element
console.log(parent.children);

// Show html node as object
console.dir(parent);

class N {}
class E extends N {}

console.dir(E); // class E
console.dir(N); // class N
console.dir(E.__proto__); // class N

console.dir(Element); // f Element()
console.dir(Node); // f Node()
console.dir(Element.__proto__); // f Node()