如何通过内部HTML提取dom中的邻接元素

Question

I would like to extract adjacent DOM elements by searching for innerHtml text. The elements are not children of a wrapping parent. An example will make it easier to understand:

<p>1.</p>
<h1>This is the first paragraph..</h1>
<button>click</button>

<p>2.</p>
<h3>And this is the second...</h3>
<img src="" alt=""/>

<p>3.</p>
<h5>this is the last paragraph</h5>

I would like to find the first element by looking for the inner text of "1." and then extract all its siblings until I reach the first element with the inner text of "2."

And then do it with 2 and 3 and so on. All the elements are siblings. The extract could be moving the elements into an array as plain text for example.

Is it possible to achieve? Thanks a lot in advance

Answer 1

If I understand your question correctly, this could be achieved via the use of the .nextSibling field on DOM nodes.

This would allow you to access the next sibling node to the current node being processed (ie the first p element in your document). You could use this to iterate through all valid siblings, searching for any with innerText matching your the criteria and adding those to a list of extracted nodes like so:

 var extracted = []; /* Get starting node for search. In this case we'll start with the first p element */ var p = document.querySelector('p'); /* Iterate through each sibiling of p */ do { /* If this sibling node has innerText that matches the number pattern required, add this node to the list of extracted nodes */ if(p.innerText && p.innerText.match(/\\d+./gi)) { extracted.push(p.innerText); } /* Move to next sibling */ p = p.nextSibling; } while(p) /* Iterate while sibing is valid */ console.log('Extracted plain text for nodes with number string for innerText:', extracted); 

 <p>1.</p> <h1>This is the first paragraph..</h1> <button>click</button> <p>2.</p> <h3>And this is the second...</h3> <img src="" alt="" /> <p>3.</p> <h5>this is the last paragraph</h5> 

Answer 2

You can check the nextElementSibling with while like the following way:

 var arrP = ['1.','2.','3.']; var allP = document.querySelectorAll('p'); allP.forEach(function(p){ if(arrP.includes(p.textContent)){ var siblings = []; elem = p.nextElementSibling; while(elem) { if (elem.nodeName == 'P' || elem.nodeName == 'SCRIPT') break; siblings.push(elem); elem = elem.nextElementSibling; } console.log(siblings); } }); 

 <p>1.</p> <h1>This is the first paragraph..</h1> <button>click</button> <p>2.</p> <h3>And this is the second...</h3> <img src="" alt=""/> <p>3.</p> <h5>this is the last but one paragraph</h5> <p>Not.</p> <h5>this is the last paragraph</h5>