How to get all IDs from div element?

  html, javascript

I’m trying to get all IDs within both div elements but I don’t know why the following code is not working (taken example from here How to get ALL id's inside of a DIV using pure javascript). Please advice.

These are my attempts so far

Attempt #1

var everyChild = document.querySelectorAll("#col-x-z.ab.def");
for (var i = 0; i<everyChild.length; i++) {
    everyChild[i].classList.add("anything");
}

Attempt #2

var c = document.querySelectorAll("##col-x-z.ab.def > div");
console.log(c);

HTML sample:

<html>
<body>
<style>
.col-x-z.ab.def {
border: 4px outset red;
background-color: lightblue;
text-align: center;
}
</style>

<style>
.portlet.box.blue {
border: 2px outset blue;
background-color: lightblue;
text-align: center;
}
</style>
<div class="col-x-z ab def" id="sortable_portlets">
        <div class="col-x-z ab def" id="col_1" col="1">
            <div id="353" class=" portlet box blue">x</div>
            <div id="355" class=" portlet box blue">x</div>
            <div id="358" class=" portlet box blue">x</div>
            <div id="353" class=" portlet box blue">x</div>
            <div id="360" class=" portlet box blue">x</div>
            <div id="363" class=" portlet box blue">x</div>
            <div id="365" class=" portlet box blue">x</div>
            <div id="367" class=" portlet box blue">x</div>
        </div>
</div>      
    <div class="col-x-z ab def" id="col_2" col="2">
            <div id="473" class=" portlet box blue">y</div>
            <div id="475" class=" portlet box blue">y</div>
            <div id="478" class=" portlet box blue">y</div>
            <div id="473" class=" portlet box blue">y</div>
            <div id="480" class=" portlet box blue">y</div>
            <div id="483" class=" portlet box blue">y</div>
            <div id="485" class=" portlet box blue">y</div>
            <div id="487" class=" portlet box blue">y</div>
        </div>
</div>
</body>
<html>

Source: Ask Javascript Questions

LEAVE A COMMENT