CODEWITHSUNDEEP
javascriptdomrange
youngrrrr
youngrrrr

Reputation: 3276

What's the difference between document.createRange() and new Range()?

In Javascript, there seems to be two ways to create Range objects:

  1. var range = document.createRange(): calling createRange() on a Document object. More info
  2. var range = new Range(): using the Range() constructor. More info

The MDN for style #1 notes:

Once a Range is created, you need to set its boundary points before you can make use of most of its methods.

The MDN for style #2 says:

The Range() constructor returns a newly created Range object whose start and end is the global Document object.

But that doesn't exactly tell me what the difference between the two are.

At the time of this post, however, there was a note on top of the MDN for style #2 that said:

This is an experimental technology

and, importantly, it currently seems IE does not yet support style #2's syntax for creating a Range object.

Aside from that, are there any (subtle) differences between the two in either how the Range is created or what is returned by either of these ways of creating a Range object?

Apologies in advance if I've misused any terms -- please correct me if I have as I'm still quite new to these concepts.

Thanks!

Upvotes: 7

Views: 2589

Answers (1)

syntagma
syntagma

Reputation: 24334

Based on the DOM Standard W3C specification, there are no differences between the two (emphasis mine):

The createRange() method, when invoked, must return a new live range with (this, 0) as its start an end.

Note: The Range() constructor can be used instead.

And indeed both document.createRange() and new Range() return an object with startOffset and endOffset set to 0:

{
  collapsed: true,
  commonAncestorContainer: /* object of type document */,
  endContainer: /* object of type document */,
  endOffset: 0,
  startContainer: /* object of type document */,
  startOffset: 0
}

Upvotes: 3

Related Questions