Ebooks

Document.all tutorial

Document.all tutorial shows how to use the all property to select all HTML elements in JavaScript.

Document.all

The Document's all property return an HTMLAllCollection rooted at the document node -- it returns the entire contents of the page. The property is read-only.

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.

index.html
<!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.

In this tutorial, we have worked with the document's all property.

You might also be interested in the following related tutorials: JavaScript queryselector tutorial, Element.innerHtml tutorial, JavaScript Lodash tutorial, JQuery tutorial, Ramda tutorial, or Using jQuery DatePicker.