We can do it in three steps.
- Pull all the elements in the document irrespective of their Tag.
- Loop through all the Elements and see if the element has an attribute id
- 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"]
Found this article helpful? Please consider supporting!
