在没有使用JS的孩子的情况下获取父文本

Question

var el = document.getElementById("parentDiv");
console.log(el.textContent);
console.log(el.innerText);
console.log(el.innerHTML);

<div id="parentDiv">
  parent div
  <p>p</p>
  <div>
    this text is in a div

    <span>span</span>
    <a>im a link!</a>
    <div>
      another div
      <div>
        <span><a>link in a span</a></span>
      </div>
    </div>
  </div>
</div>

运行它时,它总是返回'parent div'加上子元素的所有文本.有没有办法只使用js返回'父div'？

Answer 1

遍历所有子节点,跳过任何不是文本节点的节点,从中获取文本.

var el = document.getElementById("parentDiv");
var text = "";
for (let i = 0; i < el.childNodes.length; i++) {
    let node = el.childNodes[i];
    if (node.nodeType  === Node.TEXT_NODE) {
        text += node.data;
    }
}
console.log(text);

<div id="parentDiv">
  parent div
  <p>p</p>
  <div>
    this text is in a div

    <span>span</span>
    <a>im a link!</a>
    <div>
      another div
      <div>
        <span><a>link in a span</a></span>
      </div>
    </div>
  </div>
</div>