74 lines
1.2 KiB
Markdown
74 lines
1.2 KiB
Markdown
---
|
|
title: DOM Range
|
|
category: JavaScript
|
|
layout: 2017/sheet
|
|
intro: |
|
|
Quick reference to the HTML [DOM createRange API](https://devdocs.io/dom/range).
|
|
---
|
|
|
|
## Reference
|
|
{:.-three-column}
|
|
|
|
### Creating ranges
|
|
|
|
```js
|
|
var range = document.createRange()
|
|
```
|
|
|
|
See: <https://devdocs.io/dom/document/createrange>
|
|
|
|
## Methods
|
|
|
|
```js
|
|
range
|
|
.setStart(startNode, startOffset)
|
|
.setEnd(endNode, endOffset)
|
|
|
|
.setStartBefore(node)
|
|
.setStartAfter(node)
|
|
.setEndBefore(node)
|
|
.setEndAfter(node)
|
|
|
|
.selectNode(node)
|
|
.selectNodeContents(node)
|
|
```
|
|
|
|
See: <https://devdocs.io/dom/range>
|
|
|
|
### Collapsing
|
|
|
|
```js
|
|
range.collapse() // to end (a single point)
|
|
range.collapse(true) // to start (a single point)
|
|
range.collapsed // true | false
|
|
```
|
|
|
|
### Operations
|
|
|
|
```js
|
|
range.cloneContents() // copy => DocumentFragment
|
|
range.extractContents() // cut => DocumentFragment
|
|
range.deleteContents() // delete
|
|
```
|
|
|
|
```js
|
|
range.insertNode(node)
|
|
```
|
|
|
|
### String
|
|
|
|
```js
|
|
range.toString()
|
|
```
|
|
|
|
### Read-only attributes
|
|
|
|
```js
|
|
range.collapsed // => true/false
|
|
range.startContainer // => Node
|
|
range.startOffset
|
|
range.endContainer // => Node
|
|
range.endOffset
|
|
range.commonAncestorContainer // closest of start and end containers
|
|
```
|