Диапазон: метод setStart()

Базовая линия Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с марта 2017 года.

Метод Range.setStart() устанавливает начальную позицию Range.

Если startNode является Node типа Text, Comment или CDataSection, то startOffset — это количество символов с начала startNode. Для других типов Node startOffset — это количество дочерних узлов между началом startNode.

Установка начальной точки ниже (ниже в документе) конечной точки приведет к созданию коллапсируемого диапазона, где начальная и конечная точки будут установлены в указанную начальную позицию.

Синтаксис

setStart(startNode, startOffset)

Параметры

startNode: Node, где должен начинаться Range.
startOffset: Целое число, большее или равное нулю, представляющее смещение начала Range от начала startNode.

Возвращаемое значение

Ничего (undefined).

Примеры

Выделение части элемента

В этом примере используются методы Range.setStart() и Range.setEnd() для добавления части адреса в диапазон. Затем выбранный диапазон выделяется с помощью Range.surroundContents().

Адрес содержит девять узлов: пять текстовых узлов и четыре элемента <br>.

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

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

<p id="content">0123456789</p>
<p id="log"></p>

JavaScript

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

Совместимость с браузерами

	Рабочие столы					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`setStart`	1	12	1	9	1	18	4	10.1	1	1.0	4.4

См. также

Индекс интерфейсов DOM

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Range/setStart