1.1 Basic DOM Concepts
The Document Object Model (DOM) is a programming interface for web documents. It represents the structure of a document as a tree of nodes, where each node is a part of the document, such as an element, text, comment, and so on. Understanding the DOM and its nodes is a fundamental aspect of working with web technologies.
Key DOM Concepts
What is the DOM?
The DOM (Document Object Model) is a hierarchical structure that describes the content of an HTML document. It allows programs and scripts to dynamically access and modify the document's structure, style, and content.
Nodes and Elements
In the context of the DOM, all parts of a document are considered nodes. Nodes come in several types:
- Element nodes: represent HTML tags.
- Text nodes: represent the text inside element nodes.
- Comment nodes: represent comments in HTML.
- Document nodes: represent the document itself.
Node Tree
The DOM is a tree-like structure where each node can have descendants (child nodes). The root node is the document object, which represents the entire HTML document.
Example of DOM Structure:
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
For this document, the DOM tree will look like this:
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 Types of Nodes
1. Element Nodes
Element nodes correspond to HTML tags. For example, a node for the <body> tag is called an element node.
Example:
In this example, <body> and <h1> are element nodes.
<body>
<h1>Hello, World!</h1>
</body>
2. Text Nodes
Text nodes contain the text inside element nodes. Text nodes are children of element nodes and contain string data.
Example:
In this example, the text "Hello, World!" is a text node, a child of the <h1> node.
<h1>Hello, World!</h1>
3. Comment Nodes
Comment nodes represent comments in HTML, starting with <!-- and ending with -->.
Example:
In this example, <!-- This is a comment --> is a comment node.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. Document Nodes
The document node represents the root node of the DOM tree and is the parent node for all other nodes in the document.
Example:
The document object in JavaScript represents a document node:
console.log(document);
1.3 Interacting with DOM Nodes
1. Getting Node Information
Node object properties allow you to get information about a specific node. For example, you can find out the node type, its name, and content.
Example:
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Output: H1
console.log(heading.nodeType); // Output: 1 (Element node)
console.log(heading.textContent); // Output: "Hello, World!"
2. Modifying Node Content
The content of nodes can be changed using DOM properties and methods.
Example:
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. Working with Child Nodes
Each DOM node can have child nodes that you can access and modify.
Example:
<html>
<head>
<title>My Website</title>
</head>
<body>
<ul>
<li>About Us</li>
<li>Career</li>
<li>Contact</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // Output the text of the first list item
console.log(lastItem.textContent); // Output the text of the last list item
1.4 Useful Properties
1. Properties nodeName and nodeType
nodeNamereturns the name of a nodenodeTypereturns the type of a node (e.g., 1 for element nodes, 3 for text nodes)
Example:
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // Output: H1
console.log(element.nodeType); // Output: 1
2. Properties textContent and innerHTML
textContentreturns or sets the textual content of a nodeinnerHTMLreturns or sets the HTML content of a node
Example:
<html>
<head>
<title>My Website</title>
</head>
<body>
<p>A really <b>interesting</b> and <b>useful</b> paragraph!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // Output the text content of the paragraph
console.log(element.innerHTML); // Output the HTML content of the paragraph
3. Properties parentNode, childNodes, firstChild, and lastChild
parentNodereturns the parent nodechildNodesreturns a collection of all child nodesfirstChildreturns the first child nodelastChildreturns the last child node
Example:
<html>
<head>
<title>My Website</title>
</head>
<body>
<ul>
<li>About Us</li>
<li>Career</li>
<li>Contact</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // Output the parent node
console.log(element.childNodes); // Output the collection of child nodes
console.log(element.firstChild); // Output the first child node
console.log(element.lastChild); // Output the last child node
GO TO FULL VERSION