Issues selecting HTML element with JavaScript, only returns script nodes

NelsonAndr233
November 27, 2024
111 views
0 votes
2 Answers

I have this block of HTML:

<div data-list="" class=""list list-group" OSFillParent" style="position: relative;">
<script style="display: flex; height: 0px; width: 100%;"></script>
<div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_0-AppsMenu"></div>
<div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_1-AppsMenu"></div>
<div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_2-AppsMenu"></div>
<div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_3-AppsMenu"></div>
<script style="display: flex; height: 0px; width: 100%;"></script>
</div>

This is the content of listGroup in var listGroup = menuAuthorization.children[0];.

When I do var mainMenu = listGroup.children[1]; I was expecting on getting that first Navigation.SubMenu element, but I always get the script element.

listGroup.children.length returns 2. listGroup.children returns:

var i = 0;
while (i < listGroup.children.length)
{
    console.log(listGroup.children[i]);
    i++;
}

returns just the 2 script elements.

What must I do to be able to select any of those Navigation.SubMenu elements?
I already tried with querySelector('OSBlockWidget') to at least get the list without the script elements but returns empty/undefined.

I don’t know the IDs at runtime.

var listGroup = menuAuthorization.children[0];
var i = 0;

while (i < listGroup.children.length) {
  console.log(listGroup.children[i]);
  i++;
}

<div data-list="" class="" list list-group " OSFillParent" style="position: relative;">
  <script style="display: flex; height: 0px; width: 100%;"></script>
  <div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_0-AppsMenu"></div>
  <div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_1-AppsMenu"></div>
  <div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_2-AppsMenu"></div>
  <div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_3-AppsMenu"></div>
  <script style="display: flex; height: 0px; width: 100%;"></script>
</div>

Answers

Fix your class quotes as mentioned by wolfsblu and use querySelectorAll()

If you do a querySelector() on ".list-group" then its .children will include the <script> elements. So I used ".OSBlockWidget" instead. No .children needed in this case.

let menuElements = document.querySelectorAll( ".OSBlockWidget" );

for( let next = 0; next < menuElements.length; ++next ) {
    console.log(menuElements[next].id);
}

<div data-list="" class="list list-group OSFillParent" style="position: relative;">
  <script style="display: flex; height: 0px; width: 100%;"></script>
  <div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_0-AppsMenu"></div>
  <div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_1-AppsMenu"></div>
  <div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_2-AppsMenu"></div>
  <div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_3-AppsMenu"></div>
  <script style="display: flex; height: 0px; width: 100%;"></script>
</div>

Your code is working fine for me.
Make sure that menuAuthorization.children[0] is the right element, you might be working on another element.

var listGroup = document.body.children[0];
console.log(listGroup.children.length);
var i = 0;
while (i < listGroup.children.length)
{
    console.log(listGroup.children[i]);
    i++;
}

<div data-list="" class=""list list-group" OSFillParent" style="position: relative;">
<script style="display: flex; height: 0px; width: 100%;"></script>
<div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_0-AppsMenu"></div>
<div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_1-AppsMenu"></div>
<div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_2-AppsMenu"></div>
<div data-block="Navigation.Submenu" class="OSBlockWidget" id="b3-b2-l2-12_3-AppsMenu"></div>
<script style="display: flex; height: 0px; width: 100%;"></script>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.