0

DOM Range cheatsheet

 2 years ago
source link: https://devhints.io/dom-range
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Quick reference to the HTML DOM createRange API.

Creating ranges

var range = document.createRange()

See: https://devdocs.io/dom/document/createrange

#Methods

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

range.collapse() // to end (a single point)
range.collapse(true) // to start (a single point)
range.collapsed // true | false

Operations

range.cloneContents() // copy => DocumentFragment
range.extractContents() // cut  => DocumentFragment
range.deleteContents() // delete

range.insertNode(node)

String

range.toString()

Read-only attributes

range.collapsed //       => true/false
range.startContainer //  => Node
range.startOffset
range.endContainer //    => Node
range.endOffset
range.commonAncestorContainer // closest of start and end containers

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK