Shulou(Shulou.com)06/02 Report--

What are the knowledge points of this article "javascript's range usage?" most people do not understand, so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this article, "what are the ways to use range in javascript?"

The range object of javascript refers to the area in the html document, which is used as "var elem=range.commonAncestorContainer;if (elem.nodeType! = 1) {...}".

This article operating environment: Windows7 system, javascript1.8.5 version, Dell G3 computer.

What is the use of range for javascript?

The use of JS Range objects

One: what is a Range object

Range refers to the area in the html document, such as the area selected by the user dragging with the mouse, as shown in the following figure:

Through the Range object, you can get the area selected by the user, or specify the selected area, get the start and end of the Range, modify or copy the text inside, or even html. These features are often used in rich text editor development.

Two: get the current selection

Due to compatibility issues, it is necessary to distinguish between ie browsers

Var selection, range;if (window.getSelection) {/ / Modern browser selection = window.getSelection ();} else if (document.selection) {/ / IE selection = document.selection.createRange ();} / / Range object range = selection.getRangeAt (0)

Three: range attribute

> collapsed is true if the start and end points of the range are in the same place in the document, that is, the range is empty or collapsed. > Document nodes with the deepest nesting at the start and end points of the commonAncestorContainer range (that is, their ancestor nodes). > endContainer contains the Document node of the end point of the scope. > the location of the end point in endOffset endContainer. > startContainer contains the Document node of the starting point of the range. > the location of the starting point in startOffset startContainer.

Four: range operation

/ / text var text = range.toString () for the selected region; / / Element element var elem = range.commonAncestorContainer;if (elem.nodeType! = 1) {elem = Elm [XSS _ clean];} / / htmlvar span = document.createElement ('SPAN') for the selected area; span.appendChild (range.cloneContents ()); / / whether the selection is empty var isSelectionEmpty = false;if (range.startContainer = = range.endContainer) {if (range.startOffset = = range.endOffset) {isSelectionEmpty = true }} the above is about the content of this article on "what is the use of range in javascript?" I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.