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

时间:2019-06-11 02:10:20

标签: javascript

我正在尝试使用

创建一个范围对象
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

3 个答案:

答案 0 :(得分:2)

要从

获取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,请考虑将TreeWalkerNodeFilter.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>

答案 1 :(得分:0)

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

更新:这应该对您有用。

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

答案 2 :(得分:0)

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

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