Discovering DOM elements positioned between two other well-established DOM elements can be achieved by utilizing a variety of methods

Question

Discovering DOM elements positioned between two other well-established DOM elements can be achieved by utilizing a variety of methods

What is the most efficient and elegant way to select all elements between two specified elements using vanilla JavaScript? For instance, how can I target all elements between:

<h2> and <hr> .. and the result should be an [ p, p, ul ] ... but

<p>this should not be found</p>

should not be included since there is no

after it.

While I could potentially write a script to check siblings and iterate through them, I am hoping for a more elegant solution that I may not be aware of. It would be ideal if there was some sort of querySelectorAll(..) selector manipulation that I could utilize, perhaps through an intersection of two invocations.

<div>
<h1>Title</h1>
<h2>Subitle</h2>
<p>Para 1 <a href="#">link</a></p>
<p>Para 2</p>
<ul><li>A list</li></ul>
<hr/>
<h2>Another subtitle</h2>
<p>this should not be found</p>
</div>

javascript html css

Answer 1

Answer №1

Here are a few potential solutions to consider:

const getChildElementsInRange1 = (parentElement, firstChildSelector, lastChildSelector) => {
  const elementsInRange = [];
  let currentElement = parentElement.querySelector(firstChildSelector)?.nextElementSibling;

  while (currentElement) {
    if (currentElement.matches(lastChildSelector)) {
      return elementsInRange;
    }

    elementsInRange.push(currentElement);
    currentElement = currentElement.nextElementSibling;
  }
  
  return [];
}

const getChildElementsInRange2 = (parentElement, firstChildSelector, lastChildSelector) => {
  const elementsAfterLastChild = parentElement
    .querySelectorAll(`${firstChildSelector} ~ ${lastChildSelector} ~ *`);
  
  if (elementsAfterLastChild.length === 0) {
    return [];
  }
  
  const elementsAfterFirstWithoutLast = parentElement
    .querySelectorAll(`${firstChildSelector} ~ *:not(${lastChildSelector})`);
  
  return _.difference(elementsAfterFirstWithoutLast, elementsAfterLastChild);
}

const containerElement = document.getElementById('container');

console.log(getChildElementsInRange1(containerElement, 'h2', 'hr'));
console.log(getChildElementsInRange2(containerElement, 'h2', 'hr'));

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0bcbfb4b1a3b890e4fee1e7fee2e1">[email protected]</a>/lodash.min.js"></script>

<div id="container">
  <h1>Title</h1>
  <h2>Subtitle</h2>
  <p>Paragraph 1 <a href="#">link</a></p>
  <p>Paragraph 2</p>
  <ul><li>A list</li></ul>
  <hr/>
  <h2>Another subtitle</h2>
  <p>This should not be found</p>
</div>

Answer 2

Here are a few potential solutions to consider:

const getChildElementsInRange1 = (parentElement, firstChildSelector, lastChildSelector) => {
  const elementsInRange = [];
  let currentElement = parentElement.querySelector(firstChildSelector)?.nextElementSibling;

  while (currentElement) {
    if (currentElement.matches(lastChildSelector)) {
      return elementsInRange;
    }

    elementsInRange.push(currentElement);
    currentElement = currentElement.nextElementSibling;
  }
  
  return [];
}

const getChildElementsInRange2 = (parentElement, firstChildSelector, lastChildSelector) => {
  const elementsAfterLastChild = parentElement
    .querySelectorAll(`${firstChildSelector} ~ ${lastChildSelector} ~ *`);
  
  if (elementsAfterLastChild.length === 0) {
    return [];
  }
  
  const elementsAfterFirstWithoutLast = parentElement
    .querySelectorAll(`${firstChildSelector} ~ *:not(${lastChildSelector})`);
  
  return _.difference(elementsAfterFirstWithoutLast, elementsAfterLastChild);
}

const containerElement = document.getElementById('container');

console.log(getChildElementsInRange1(containerElement, 'h2', 'hr'));
console.log(getChildElementsInRange2(containerElement, 'h2', 'hr'));

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0bcbfb4b1a3b890e4fee1e7fee2e1">[email protected]</a>/lodash.min.js"></script>

<div id="container">
  <h1>Title</h1>
  <h2>Subtitle</h2>
  <p>Paragraph 1 <a href="#">link</a></p>
  <p>Paragraph 2</p>
  <ul><li>A list</li></ul>
  <hr/>
  <h2>Another subtitle</h2>
  <p>This should not be found</p>
</div>

Discovering DOM elements positioned between two other well-established DOM elements can be achieved by utilizing a variety of methods

Answer №1

Similar questions

What could be causing my CSS dropdown menu to not display properly?

How can I display a Bootstrap modal in Ember.js after rendering it in an outlet?

`Ensuring uniform height for card titles`

Seeking assistance with basic Javascript/Jquery for Ajax on Rails 3 - can anyone help?

Select three random items from a string array list along with their corresponding indexes using TypeScript in Angular

Ways to loop through a collection of indexed elements

How shouldjs makes value verification effortless for unordered arrays

How to achieve the functionality of multiple inheritance using Object.create()

Open the .exe file using an HTML link in Firefox browser

Incorporate Vue into a template using variables and props

Avoid displaying the homepage link in the menu on Grav

Accessing data in JSON format from a URL

unable to display loading image prior to upload

The Struggle with Bootstrap Accordion

When submitting an Asp net mvc Form, some fields may not be posted as expected

Slow rotation in CSS styling

Retrieve the previous cost from an Amazon product listing

Is the npm mqtt module continuously running but not performing any tasks?

Is there a way to manage specific HTML elements in Angular?

Is it possible for style sheets to malfunction due to the presence of the TITLE attribute on <link> tags?