javascript - 如何从 DOM 节点获取文本节点？

Question

我正在尝试使用

创建一个 Range 对象

let range = document.createRange();

众所周知，我们必须打电话

range.setStart(startNode,startOffset) ;

和

range.setEnd(endNode,endOffset);

我想为 startNode 和 endNode 传递文本节点，因为如果传递 DOM 节点，则无法指定自定义偏移量。我的问题是如何获取元素的文本节点。

我只是不想要字符串形式的文本，我想要文本节点。

假设我有一个段落

<p id="para">This is a paragraph</p>

我可以通过调用获取DOM节点

let para = document.getElementById('para');

但是我如何获取段落内的文本节点？

我希望它作为一个文本节点，而不仅仅是一个字符串。请帮忙。

jsfiddle

Answer 1

从

获取 TextNode

 <p id="para">This is a paragraph</p>

你只需要para.childNodes[0]。

console.log(para.childNodes[0].nodeName, para.childNodes[0].textContent);

<p id="para">This is a paragraph</p>

但是请注意，如果您确实有

<p id="para"><!--some comment-->
This is a paragraph
</p>

然后这将返回 CommentNode:

console.log(para.childNodes[0].nodeName, para.childNodes[0].textContent);

<p id="para"><!--some comment-->
This is a paragraph
</p>

甚至，根据元素的填充方式，同一元素中很可能有不同的 TextNode:

para.append('This ', 'is ', 'a ', 'paragraph');
console.log(para.childNodes[0].nodeName, para.childNodes[0].textContent);

<p id="para"></p>

因此您可能想要迭代 childNodes 的每个节点NodeList，或者只需在您的元素上调用 setStart，因为它也是允许的:

const range = document.createRange();
range.setStart(para,0);
range.setEnd(para, para.childNodes.length);
// which is actually the same as range.selectNode(para)

getSelection().addRange(range);

<p id="para">This is a paragraph</p>

<小时/>

如果您确实需要沿着元素的 TextNode 行走，请考虑使用 TreeWalker使用 NodeFilter.SHOW_TEXT 过滤器:

para.append('This ', 'is ', 'a ', 'paragraph');
function getNodeAtTextIndex(elem, index) {
  const treeWalker = document.createTreeWalker(
    elem,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );
  let str = '';
  while(treeWalker.nextNode()) {
    const node = treeWalker.currentNode;
    str += node.textContent;
    if(str.length >= index) return {
      node: node,
      index: node.length - (str.length - index)
    };
  }
  return null;
}

const start = getNodeAtTextIndex(para, 2);
const end = getNodeAtTextIndex(para, 9);
const range = document.createRange();
range.setStart(start.node, start.index);
range.setEnd(end.node, end.index);
getSelection().addRange(range);

<p id="para"></p>