Question

的后续行动

Stackoverflow不允许我评论蒂姆的答案＆＃34;但是我只是尝试了Tims代码进入jsfiddle并且我没有看到它工作现在在Chrome或Edge上，也许它可以在早期的浏览器上运行

var mainDiv = document.getElementById("main");
var startNode = mainDiv.firstChild.firstChild;
var endNode = mainDiv.childNodes[2].firstChild;

var range = document.createRange();
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world"
range.setEnd(endNode, 7); // 7 is the length of "this is"
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

https://jsfiddle.net/Abeeee/zc7kwar8/1/

Edge抛出控制台错误＆＃34;无效的参数＆＃34;指向range.setStart命令（第6行），Chrome控制台说＆＃34; Uncaught TypeError：无法执行＆＃39; setStart＆＃39;在＆＃39;范围＆＃39;：参数1不是类型＆＃39;节点＆＃39;＆＃34;在相同的range.setStart行。

有没有人建议如何在现代＆＃34;浏览器吗？（Chrome版本62.0.3202.94（官方版本）（64位））

谢谢安倍

Answer 1

请注意，HTML中标记之间的空格会在元素之间创建textNode，并且在使用childNodes时会将这些空格视为子项。您的startNode和endNode变量实际上是null，因为mainDiv.firstChild指的是textNode，而textNodes没有子节点。您的变量应该是：

var startNode = mainDiv.childNodes[1].firstChild;
var endNode = mainDiv.childNodes[5].firstChild;

请参阅更新后的JSFiddle：https://jsfiddle.net/zc7kwar8/3/

Answer 2

实际上startNode和endNode是undefined，因为mainDiv.firstChild和mainDiv.childNodes[2]指向了2个没有孩子的文本节点元素，这就是为什么你会通过调用undefined来获得firstChild。

事实上，这些text节点是通过您在所有代码之间换行来创建的，因此您需要指向右侧elements。

这是您应该如何定义startNode和endNode：

var mainDiv = document.getElementById("main");
var startNode = mainDiv.childNodes[1].firstChild;
var endNode = mainDiv.childNodes[5].firstChild;

<强>演示：

var mainDiv = document.getElementById("main");
var startNode = mainDiv.childNodes[1].firstChild;
var endNode = mainDiv.childNodes[5].firstChild;
console.dir(mainDiv.childNodes);
console.log(endNode);
var range = document.createRange();
range.setStart(startNode, 6); // 6 is the offset of "world" within "Hello world"
range.setEnd(endNode, 7); // 7 is the length of "this is"
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);

<div id="main" contenteditable="true" style="border:solid 1px black; width:300px; height:300px">
  <div id='one'>Hello world!</div>
  <div id='two'>
    <br>
  </div>
  <div id='three'>This is a paragraph</div>
</div>

在contenteditable div中选择范围（第2轮）

2 个答案: