dom range.setStart / setEnd

dom range.setStart / setEnd

本文关键字：setEnd setStart range dom      更新时间：2023-09-26

我试图只加粗这个小提琴 http://jsfiddle.net/yarkpakv/中hel的文本，但它似乎不起作用，我做错了什么??? 

var range = document.createRange();
var root_node = document.getElementById("test");
range.setStart(root_node,0);
range.setEnd(root_node,3);
var newNode = document.createElement("b");
range.surroundContents(newNode);
<div id="test">
    <p>h</p>ello    
</div>

您需要可视化<div id="test">元素的 DOM 结构。它包含三个子项：

  1. 仅包含空格的文本节点。

  2. 包含值为 h 的文本节点的 <p> 元素

    3. 。

  3. 值为 ello 的文本节点。

因此，范围必须从 <p> 元素开始，并在两个l字符之间的ello文本节点结束。因此：

var range = document.createRange();
var root_node = document.getElementById("test");
// Start at the `<p>` element.
range.setStart(root_node, 1); 
// End in the `ello` text node, between the two `l`s.
range.setEnd(root_node.childNodes[2], 2); 
var newNode = document.createElement("b");
range.surroundContents(newNode);

这是一个小提琴。

知道了...

var range = document.createRange();
var root_node = document.getElementById("test");
range.setStart(root_node.firstChild,0);
range.setEnd(root_node.firstChild,3);
var newNode = document.createElement("b");
range.surroundContents(newNode);

在所有文档中，他们都引用了"孩子"......这就解决了这个问题。 对于您的小提琴，它将包装字母"h"和两个<p>和</p>标签。 把它们拿出来，赫尔变得大胆。

更新：

显然，空格会导致问题...

.HTML。。。

测试

在这里工作...js小提琴

参考。。。这里

相关文章：