Question

我正在尝试使用

创建一个范围对象

let range = document.createRange();

众所周知，我们必须致电

range.setStart(startNode,startOffset) ;

和

range.setEnd(endNode,endOffset);

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

我只是不想只将文本作为String，而是想要文本节点。

假设我有一个段落

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

Answer 2

您可以使用para.innerText来获取值This is a paragraph。

更新：这应该对您有用。

const textNode = document.querySelector('#para').childNodes[0];

Answer 3

每个DOMElement都有一个childNodes类似数组的对象，您可以访问该对象。尝试使用{p>更改textNode的值

const textNode = document.querySelector('#para').childNodes[0];

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

3 个答案: