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"]
Default image
Sriram Mannava

I'm a full-stack developer and a software enthusiast who likes to play around with cloud and tech stack out of curiosity.

Leave a Reply