javascript - 如何在 JavaScript 中获取 DOM 元素中直接包含的文本？

Question

我有一个 div，其中有一些子元素及其直接包含的文本，如下所示:

<div id="price">
   100$
   <span>some ads</span>
   <span>another ads</span>
   for each
</div>

我想获取此 DOM 元素中直接包含的文本“100$”。

我尝试使用innerHTML、innerText和textContent。但它们显示所有文本，包括 child 文本，如下所示:

const element = document.getElementById('price');
console.log(element.innerText);
console.log(element.innerHTML);
console.log(element.textContent);

<div id="price">
   100$
   <span>some ads</span>
   <span>another ads</span>
   for each
</div>

预期结果是100$(我不需要“foreach”)，它直接包含在父元素中的文本。这样我就可以获得价格及其货币。

注意:jquery也可以使用。

Answer 1

.clone() 克隆所选元素。

.children() 从克隆元素中选择子元素

.remove() 删除之前选择的子项

.end() 再次选择所选元素

.text() 从没有子元素的元素中获取文本

const elementText = $("#price").clone()
                                .children()
                                .remove()
                                .end()
                                .text();

console.log(elementText.trim().split("\n")[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  Parent
  <span>Child 1</span>
  <span>Child 2</span>
</div>

<div id="price">
   100$
   <span>some ads</span>
   <span>another ads</span>
   for each
</div>

编辑:您还可以使用此:

$("#price").contents().get(0).nodeValue.trim()