Question

我想通过搜索innerHtml文本来提取相邻的DOM元素。元素不是包装父级的子级。一个示例将使其更易于理解：

<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>

我想通过查找内部文本“ 1”来找到第一个元素。然后提取其所有同级，直到到达第一个元素的内部文本为“ 2”。

然后使用2和3进行操作，依此类推。所有元素都是兄弟姐妹。例如，摘录可能会将元素移动到纯文本形式的数组中。

有可能实现吗？提前谢谢

Answer 1

如果我正确理解了您的问题，可以通过使用DOM节点上的.nextSibling字段来实现。

这将允许您访问下一个同级节点到正在处理的当前节点（即文档中的第一个p元素）。您可以使用它来遍历所有有效的同级，搜索符合条件的innerText并将其添加到提取的节点列表中，例如：

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

您可以使用nextElementSibling来检查while，如下所示：

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>

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

2 个答案: