Range: setStart() 方法
Range.setStart() 方法用於設定一個 Range 的起始位置。
如果 startNode 是型別為 Text、Comment 或 CDataSection 的 Node，則 startOffset 是從 startNode 開始的字元數。對於其他 Node 型別，startOffset 是從 startNode 開始的子節點數。
將起始點設定在（文件中更低的位置）結束點以下，將導致一個摺疊的範圍，起始點和結束點都設定為指定的起始位置。
語法
js
setStart(startNode, startOffset)
引數
返回值
無（undefined）。
示例
高亮顯示元素的一部分
此示例使用 Range.setStart() 和 Range.setEnd() 方法將地址的一部分新增到範圍中。然後使用 Range.surroundContents() 方法高亮顯示選定的範圍。
地址包含九個節點：五個文字節點和四個 <br> 元素。
HTML
html
<p id="address">
Wyatt Earp<br />
101 E. Main St.<br />
Dodge City, KS<br />
67801<br />
USA
</p>
<hr />
<p>Nodes in the original address:</p>
<ol id="log"></ol>
JavaScript
js
const address = document.getElementById("address");
const log = document.getElementById("log");
// Log info
address.childNodes.forEach((node) => {
const li = document.createElement("li");
li.textContent = `${node.nodeName}, ${node.nodeValue}`;
log.appendChild(li);
});
// Highlight the street and city
const startOffset = 2; // Start at third node: 101 E. Main St.
const endOffset = 5; // End at fifth node: Dodge City, KS
const range = document.createRange();
range.setStart(address, startOffset);
range.setEnd(address, endOffset);
const mark = document.createElement("mark");
range.surroundContents(mark);
結果
從文字節點獲取字元
此示例使用 Range.setStart() 和 Range.setEnd() 方法來定義範圍的內容。生成的範圍包含文字節點中的第一個到第五個字元。
HTML
html
<p id="content">0123456789</p>
<p id="log"></p>
JavaScript
js
const element = document.getElementById("content");
const textNode = element.childNodes[0];
const range = document.createRange();
range.setStart(textNode, 0); // Start at first character
range.setEnd(textNode, 5); // End at fifth character
document.getElementById("log").textContent = range;
結果
規範
| 規範 |
|---|
| DOM # dom-range-setstart |
瀏覽器相容性
載入中…