Range

Range - фрагмент (діапазон) виділення.

Синтаксис:

obRange = document.createRange();

//конструктор
obRange = new Range()

Параметри:

obRange - зміна яка отримує об'єкт Range.

document - об'єкт document.

createRange() - метод createRange() об'єкту document який повертає об'єкт Range.

Опис:

Range об'єкт який представляє собою фрагмент (діапазон) виділення.

При цьому саме виділення (об'єкт Selection) може містити декілька фрагментів (об'єктів Range).

У Internet Explorer до версії 9 об'єкт Range не підтримується, а натомість є об'єкт TextRange.

Range містить початкову позицію і кінцеву.

Зверніть увагу що при створені об'єкту Range і задані початкової і кінцевої точки сам фрагмент тексту НЕ буде виділений у браузері. Щоб фрагмент був виділений у браузері його необхідно додати до об'єкту Selection методом addRange().

Range.collapsed - вказує чи знаходиться початкова і кінцева позиція діапазону в тому ж положенні.
Range.commonAncestorContainer - повертає найглибший елемент в якому існують дві граничні точки.
Range.endContainer - повертає Node межах якого Range знаходиться вкінці.
Range.endOffset - повертає де знаходиться кінець діапазону у Range.endContainer.
Range.startContainer - повертає Node межах якого Range знаходиться напочатку.
Range.startOffset - повертає де знаходиться початок діапазону у Range.startContainer.

Range.setStart() - встановлює початкове положення Range.
Range.setEnd() - встановлює кінцеве положення Range.
Range.setStartBefore() - встановлює початкове положення для Range по відношенню до іншого Node.
Range.setStartAfter() - встановлює початкове положення Range після Node.
Range.setEndBefore() - встановлює кінцеве положення для Range по відношенню до Node.
Range.setEndAfter() - встановлює кінцеве положення Range до кінця Node.
Range.selectNode() - встановлює положення Range відносно Node.
Range.selectNodeContents() - встановлює Range над вмістом Node.
Range.collapse() - згортає Range до однієї з граничних точок.
Range.cloneContents() - копіювання вузлів Range.
Range.deleteContents() - видаляє вміст Range.
Range.extractContents() -переміщення вмісту Range у в DocumentFragment.
Range.insertNode() - вставка Node на початку Range.
Range.surroundContents() - переміщення вмісту Range в новий Node.
Range.compareBoundaryPoints() - порівнює граничні точки Range з іншим Range.
Range.cloneRange() - повертає Range об'єкт з граничними точками, ідентичний клонований Range.
Range.detach() - звільняє Range від використання для підвищення продуктивності.
Range.toString() - повертає текст з Range.
Range.compareNode() - повертає константу , що представляє де зназодиться Node до, після, чи всередині Range.
Range.comparePoint() - де знаходиться вказана точка: перед , всередині, чи після Range.
Range.createContextualFragment() - повертає DocumentFragment створений з рядку тексту і тегами.
Range.getBoundingClientRect() - повертає ClientRect об'єкт який містить внформацію про розташування Range.
Range.getClientRects() - повертає список об'єктів ClientRect щодо розміщення Range.
Range.intersectsNode() - повертає логічне значення що вказує чи перетинає даний вузол Range.
Range.isPointInRange() - повертає логічне значення що вказує чи є дана точка в Range.

Приклад:

Приклад виділення усіх тегів

<p>

на сторінці:

var rang=[], masP=document.getElementsByTagName("p"), sel=getSelection();

for(i=0; i<masP.length; i++){
rang[i]=document.createRange();
rang[i].selectNode(masP[i]);
sel.addRange(rang[i]);
}