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

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的每个节点，或者仅在Element上调用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数组的对象。 尝试使用以下方法更改textNode值

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