我正在尝试使用
创建一个范围对象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');
但是如何获取段落内的文本节点?
我希望它作为文本节点,而不只是一个字符串。请帮忙。
答案 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,请考虑将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>
答案 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];