在contenteditable div中選擇范圍（第2輪）

Question

作為對contenteditable div中的Select范圍的跟進

Stackoverflow不允許我評論Tim的“答案”，但我剛剛嘗試了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拋出控制台錯誤“無效參數”指向range.setStart命令（第6行），Chrome控制台顯示“未捕獲TypeError：無法在'Range'上執行'setStart'：參數1不是'Node'類型“在相同的range.setStart行上。

有沒有人建議如何在“現代”瀏覽器上進行這項工作？ （Chrome版本62.0.3202.94（官方版）（64位））

謝謝安倍晉三

Answer 1

實際上startNode和endNode是undefined ，因為通過mainDiv.firstChild和mainDiv.childNodes[2]你指向了2個沒有子元素的文本節點，這就是為什么你會通過調用firstChild來undefined它們的原因。

實際上，這些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> 

Answer 2

請記住，HTML中標記之間的空格會在元素之間創建textNode ，並且在使用childNodes時childNodes這些空格視為子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/