How can you extract the id attribute of all the elements in the document with JavaScript?

We can do it in three steps.

  1. Pull all the elements in the document irrespective of their Tag.
  2. Loop through all the Elements and see if the element has an attribute id
  3. If exists collect the attribute value into the output array
<!DOCTYPE html>
<html>
<body id="myBody">
    <div id="mainContainer" class="container-fluid">
        <div id="firstRow" class="row">
            <div id="fullCol" class="col-md-12">
                <h1 id="headingText">Hello World!</h1>
                <p id="subHeadingText">
                This is some sample text you're viewing on the Page.</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        (function () {
            let elements = document.getElementsByTagName("*");
            let ids = [];
            for (let i = 0; i < elements.length; i++) {
                let element = elements[i];
                if (element.id) {
                    ids.push(element.id);
                }
            }
            console.log(JSON.stringify(ids));
        })();
    </script>
</body>
</html>

output:
["myBody","mainContainer","firstRow","fullCol","headingText","subHeadingText"]

We can do it in three steps.

  1. Pull all the elements in the document irrespective of their Tag.
  2. Loop through all the Elements and see if the element has an attribute id
  3. If exists collect the attribute value into the output array
<!DOCTYPE html>
<html>
<body id="myBody">
    <div id="mainContainer" class="container-fluid">
        <div id="firstRow" class="row">
            <div id="fullCol" class="col-md-12">
                <h1 id="headingText">Hello World!</h1>
                <p id="subHeadingText">
                This is some sample text you're viewing on the Page.</p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        (function () {
            let elements = document.getElementsByTagName("*");
            let ids = [];
            for (let i = 0; i < elements.length; i++) {
                let element = elements[i];
                if (element.id) {
                    ids.push(element.id);
                }
            }
            console.log(JSON.stringify(ids));
        })();
    </script>
</body>
</html>

output:
["myBody","mainContainer","firstRow","fullCol","headingText","subHeadingText"]
Ram
Ram

I'm a full-stack developer and a software enthusiast who likes to play around with cloud and tech stack out of curiosity. You can connect with me on Medium, Twitter or LinkedIn.

Privacy Overview
Referbruv

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Strictly Necessary Cookies

Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

3rd Party Cookies

This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.