2.1 Methods for Accessing Elements
Navigating the DOM (Document Object Model) is a crucial task when working with web documents. JavaScript provides a ton of methods for finding and accessing document elements. These methods help developers easily locate the elements they need and manipulate them.
1. The getElementById() Method
The getElementById() method returns the element that has an id attribute with the specified value.
It's one of the simplest and most commonly used methods.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Outputs: This is the content
</script>
</body>
</html>
2. The getElementsByClassName() Method
The getElementsByClassName() method returns a collection of all elements with the specified class.
The collection is "live," meaning it automatically updates when the DOM changes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Outputs: 3
</script>
</body>
</html>
3. The getElementsByTagName() Method
The getElementsByTagName() method returns a collection of all elements with the specified tag.
This collection is also "live."
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Outputs: 3
</script>
</body>
</html>
4. The querySelector() Method
The querySelector() method returns the first element that matches the specified CSS selector.
It's a powerful and flexible method for finding elements.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Outputs: Paragraph 2
</script>
</body>
</html>
5. The querySelectorAll() Method
The querySelectorAll() method returns a static (non-changing) collection of all elements
that match the specified CSS selector.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Outputs: 3
</script>
</body>
</html>
2.2 Node Navigation
DOM also provides methods for navigating between nodes relative to the current element.
1. The parentNode Property
The parentNode property returns the parent node of the current node.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Outputs: container
</script>
</body>
</html>
2. The childNodes Property
The childNodes property returns a collection of all child nodes of the current node, including text nodes.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Outputs the number of all child nodes, including text nodes
</script>
</body>
</html>
You might still wonder why the result is 7?
As mentioned above, the childNodes property returns a collection of all child nodes of the current node, including
text nodes (spaces, characters, new lines, etc.). The HTML markup includes spaces and new lines between
<li> elements, which are also considered separate nodes.
In the example above, there's a new line (and possibly a space) between the <ul> tag and the first <li>
— this is counted as a text node. The same goes for between all <li> tags and after the last <li>.
So, instead of three list items, childNodes includes these text nodes, resulting in a total count of 7.
To get only elements (ignoring text nodes), you can use the children property, which returns only child elements:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. The firstChild and lastChild Properties
The firstChild and lastChild properties return the first and last child nodes, respectively.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
You might be surprised that nothing appears in the console. However, this is not the case. The last child node Item 1 and Item 3 (new line) are displayed. If you were caught by this, you should reread section 2, The childNodes Property
4. The nextSibling and previousSibling Properties
The nextSibling and previousSibling properties return the next and previous nodes on the same hierarchy level.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Outputs: Item 3
console.log(prev.textContent); // Outputs: Item 1 (if you skip text nodes)
</script>
</body>
</html>
2.3 Element Node Navigation
5. The nextElementSibling and previousElementSibling Properties
These properties return the next and previous element nodes (skipping text and comments).
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Outputs: Item 3
console.log(prev.textContent); // Outputs: Item 1
</script>
</body>
</html>
6. The firstElementChild and lastElementChild Properties
These properties return the first and last child element nodes (skipping text and comments).
Example:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Outputs: Item 1
console.log(last.textContent); // Outputs: Item 3
</script>
</body>
</html>
GO TO FULL VERSION