Document.all tutorial
last modified last modified April 30, 2025
In this article we show how to use the all
property to select all HTML
elements in JavaScript.
Document.all
The all
property of the Document object returns an
HTMLAllCollection
, representing all the elements within the
document. It provides access to the entire contents of the page as a read-only
collection. While this property can be useful for querying document nodes, it is
considered outdated and should be used with caution, as modern best practices
recommend other DOM methods like querySelector
or
getElementById
for element selection.
In our example we are going to traverse the returned HTMLAllCollection
with Ramda library. See Ramda tutorial for more information.
Document.all example
The following example demonstrates the usage of the document's all
property.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script> </head> <body> <p> This is simple web document. </p> <script> let allTags = document.all; let nOfTags = R.length(R.keys(allTags)); console.log(`There are ${nOfTags} tags in the document`); console.log('List of tags:'); R.forEachObjIndexed((value, key) => { console.log(`${key}: ${value.localName}`); }, allTags); </script> </body> </html>
In the document, we display the number of the elements and their list.
<script src="//cdnjs.cloudflare.com/ajax/libs/ramda/0.25.0/ramda.min.js"></script>
We include the Ramda library.
let allTags = document.all;
The get all tags with document.all
.
let nOfTags = R.length(R.keys(allTags)); console.log(`There are ${nOfTags} tags in the document`);
We compute the number of tags and show the message to the console.
R.forEachObjIndexed((value, key) => { console.log(`${key}: ${value.localName}`); }, allTags);
With Ramda's forEachObjIndexed
we go through the collection
and output all tag names.
Highlighting Paragraphs with JavaScript
In this example, we demonstrate how to dynamically highlight all p
elements in a webpage using JavaScript. This is done by toggling a CSS class on
paragraph elements when a button is clicked.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Highlight Paragraphs</title> <style> .highlight { background-color: yellow; font-weight: bold; } </style> </head> <body> <h1>JavaScript Paragraph Highlighter</h1> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> <p>And this is the third paragraph.</p> <button id="highlightBtn">Highlight All Paragraphs</button> <script> document.getElementById("highlightBtn").addEventListener("click", function() { let paragraphs = document.querySelectorAll("p"); paragraphs.forEach(p => p.classList.toggle("highlight")); }); </script> </body> </html>
The example uses the querySelectorAll
method to select all
p
elements. When the button is clicked, the JavaScript code applies
a CSS class (.highlight
) to each paragraph, changing its background
color and text weight.
<style> .highlight { background-color: yellow; font-weight: bold; } </style>
The .highlight
CSS class defines the highlighting effect, using a
yellow background and bold text styling.
document.getElementById("highlightBtn").addEventListener("click", function() { let paragraphs = document.querySelectorAll("p"); paragraphs.forEach(p => p.classList.toggle("highlight")); });
This JavaScript snippet adds an event listener to the button. When
clicked, it selects all p
elements and toggles the highlight class,
effectively turning the highlight effect on and off dynamically.
Source
In this article we have worked with the document's all
property.