Selector excluding nested values

Question

nodejs: 24.7

jsdom: 26.1.0

Basically, I want to create a selector, that would exclude nested elements - it should find only elements at the first level of nesting. I have this:

it('Test selector non-nested', () => {
  const mainAttribute = 'data-main';
  const itemAttribute = 'data-item';
  const sideAttribute = 'data-side';
  document.body.innerHTML = `
<div>
    <div ${mainAttribute}>
        <div ${itemAttribute}>
            <div ${sideAttribute}>
                <div ${mainAttribute}>
                    <div ${itemAttribute}>
                        <div ${sideAttribute}></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
`;

  const result = [];
  const foundElements = document.querySelectorAll(`[${mainAttribute}]`);
  for (const element of foundElements) {
    result.push(element);
  }

  for (const element of result) {
    const selector = `:scope [${sideAttribute}]:not(:scope [${itemAttribute}] [${itemAttribute}] [${sideAttribute}])`;
    element.innerHTML = element.innerHTML; // It makes it work!
    const results = element.querySelectorAll(selector);
    expect(results.length).toEqual(1);
  }
});

As you can see, I want to find elements having sideAttribute, but only in the top element having the itemAttribute. It means that in this case I want to have 1 result for both iterations of the loop.

It doesn't work UNLESS I will throw element.innerHTML = element.innerHTML; in there, then it magically starts working. What's going on here?

The problem happens in jsdom, but not in a browser. I created an issue ticket here: https://github.com/jsdom/jsdom/issues/3924 but maybe someone will find a workaround for that.

Why not use querySelector() instead of querySelectorAll()? — mykaf
– mykaf, Commented Sep 2 at 16:52
@mykaf It doesn't matter for the result. If I would change to querySelector() I would just get null the second time. — Łukasz Zaroda
– Łukasz Zaroda, Commented Sep 2 at 17:09
I'm unable to recreate the problem; when I remove element.innerHTML = element.innerHTML;, I get results.length = 1. — mykaf
– mykaf, Commented Sep 2 at 17:15
It works in the browser, but doesn't work in jsdom. Sorry I missed this piece of information, will add it shortly. — Łukasz Zaroda
– Łukasz Zaroda, Commented Sep 2 at 17:20
I suggest providing context on why you want to do this in the first place; there may be a more straightforward solution than this. — ggorlen
– ggorlen, Commented Sep 2 at 19:40

Pete · Accepted Answer · 2025-09-03 08:44:47Z

0

You could use a filter to check if there are any parents with that attribute:

const divs = Array.from(document.querySelectorAll('[data-main]'));
const topLevelDivs = divs.filter(d =>  d.parentNode.closest('[data-main]') === null); // you would need to use parentNode here so it doesn't return itself

console.log(topLevelDivs.length)

<div data-main="main">
  <div data-item="item">
    <div data-side="side">
      <div data-main="main">
        <div data-item="item">
          <div data-side="side"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<div data-main="main">
  <div data-item="item">
    <div data-side="side">
      <div data-main="main">
        <div data-item="item">
          <div data-side="side"></div>
        </div>
      </div>
    </div>
  </div>
</div>

answered Sep 3 at 8:44

Pete

58.8k31 gold badges132 silver badges187 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Selector excluding nested values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related