+---

+title: range.collapsed

+slug: Web/API/Range/collapsed

+translation_of: Web/API/Range/collapsed

+---

+<p>{{ APIRef("DOM") }}</p>

+

+<h3 id="Resumen" name="Resumen">Resumen</h3>

+

+<p>Devuelve un valor booleano verdadero indicando si los puntos de inicio y fin de un rango están en la misma posición.</p>

+

+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>

+

+<pre class="eval">isCollapsed = range.collapsed;

+</pre>

+

+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>

+

+<pre class="eval">range = document.createRange();

+range.setStart(startNode,startOffset);

+range.setEnd(endNode,endOffset);

+isCollapsed = range.collapsed;

+</pre>

+

+<h3 id="Notas" name="Notas">Notas</h3>

+

+<p>Devuelve un valor boleano verdadero si los puntos límite inicial y final del rango están en el mismo punto en el DOM, y devuelve un valor falso si no lo están.</p>

+

+<p>Un rango plegado está vacío, sin tener algún contenido, especificando un simple punto en el árbol del DOM. La propiedad plegada es de sólo lectura. Para plegar un rango, vea el método <a href="es/DOM/range.collapse"> collapse</a>.</p>

+

+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>

+

+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-collapsed">collapsed</a></p>

+

+<p>{{ languages( { "en": "en/DOM/range.collapsed", "ja": "ja/DOM/range.collapsed" } ) }}</p>

+---

+title: range.commonAncestorContainer

+slug: Web/API/Range/commonAncestorContainer

+translation_of: Web/API/Range/commonAncestorContainer

+---

+<div>{{ApiRef("DOM")}}</div>

+

+<h3 id="Resumen" name="Resumen">Resumen</h3>

+

+<p>Devuelve el nodo más profundo que contienen los nodos <a href="es/DOM/range.startContainer"> startContainer</a> y <a href="es/DOM/range.endContainer"> endContainer</a>.</p>

+

+<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3>

+

+<pre class="eval">rangeAncestor = range.commonAncestorContainer;

+</pre>

+

+<h3 id="Ejemplo" name="Ejemplo">Ejemplo</h3>

+

+<pre class="eval">range = document.createRange();

+range.setStart(startNode,startOffset);

+range.setEnd(endNode,endOffset);

+rangeAncestor = range.commonAncestorContainer;

+</pre>

+

+<h3 id="Notas" name="Notas">Notas</h3>

+

+<p>Devuelve el último nodo, o el más lejano a lo largo del árbol del documento, que contienen los nodos <a href="es/DOM/range.startContainer"> startContainer</a> y <a href="es/DOM/range.endContainer"> endContainer</a>. Ya que un rango no necesita ser contínuo y puede seleccionar nodos parcialmente, ésta es una forma conveniente para encontrar un nodo que encierra un rango.</p>

+

+<p>Esta propiedad es de sólo lectura. Para cambiar el contenedor ancestro de un nodo, considere usar varios métodos para definir las posiciones iniciales y finales de el rango.</p>

+

+<h3 id="Especificaci.C3.B3n" name="Especificaci.C3.B3n">Especificación</h3>

+

+<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level-2-Range-attr-commonParent">commonAncestorContainer</a></p>

+

+<p>{{ languages( { "en": "en/DOM/range.commonAncestorContainer" } ) }}</p>

+---

+title: Range.getClientRects()

+slug: Web/API/Range/getClientRects

+tags:

+ - API

+ - Experimental

+ - Rango

+ - Vista CSSOM

+ - metodo

+translation_of: Web/API/Range/getClientRects

+---

+<p>{{ApiRef("DOM")}}{{ seeCompatTable }}</p>

+

+<p>El método <strong><code>Range.getClientRects()</code></strong><strong> </strong>regresa una lista de objetos {{ domxref("DOMRect") }} los cuales representan el área de la pantalla ocupada por el <a href="/es/DOM/range" title="https://developer.mozilla.org/es/dom:range">rango</a>. El resultado es generado al agregar los resultados de las llamadas a {{ domxref("Element.getClientRects()") }} para cada uno de los elementos dentro del rango.</p>

+

+<h2 id="Syntax" name="Syntax">Sintaxis</h2>

+

+<pre class="syntaxbox"><em>rectList</em> = <em>range</em>.getClientRects()

+</pre>

+

+<h2 id="Example" name="Example">Ejemplo</h2>

+

+<pre class="brush: js">range = document.createRange();

+range.selectNode(document.getElementsByTagName("div").item(0));

+rectList = range.getClientRects();

+</pre>

+

+<h2 id="Specification" name="Specification">Especificación</h2>

+

+<table class="standard-table">

+ <tbody>

+ <tr>

+ <th scope="col">Especificación</th>

+ <th scope="col">Estatus</th>

+ <th scope="col">Comentario</th>

+ </tr>

+ <tr>

+ <td>{{SpecName('CSSOM View', '#dom-range-getclientrects', 'Range.getClientRects()')}}</td>

+ <td>{{Spec2('CSSOM View')}}</td>

+ <td>Especificación inicial.</td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Compatibilidad_en_los_Navegadores">Compatibilidad en los Navegadores</h2>

+

+<p>{{CompatibilityTable}}</p>

+

+<div id="compat-desktop">

+<table class="compat-table">

+ <tbody>

+ <tr>

+ <th>Característica</th>

+ <th>Chrome</th>

+ <th>Edge</th>

+ <th>Firefox (Gecko)</th>

+ <th>Internet Explorer</th>

+ <th>Opera</th>

+ <th>Safari</th>

+ </tr>

+ <tr>

+ <td>Soporte básico</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatGeckoDesktop("2.0")}}</td>

+ <td>9</td>

+ <td>15.0</td>

+ <td>5</td>

+ </tr>

+ </tbody>

+</table>

+</div>

+

+<div id="compat-mobile">

+<table class="compat-table">

+ <tbody>

+ <tr>

+ <th>Característica</th>

+ <th>Android</th>

+ <th>Edge</th>

+ <th>Firefox Mobile (Gecko)</th>

+ <th>IE Mobile</th>

+ <th>Opera Mobile</th>

+ <th>Safari Mobile</th>

+ </tr>

+ <tr>

+ <td>Soporte básico</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatGeckoMobile("2.0")}}</td>

+ <td>{{CompatNo}}</td>

+ <td>15.0</td>

+ <td>{{CompatUnknown}}</td>

+ </tr>

+ </tbody>

+</table>

+</div>

+

+<h2 id="Ver_también">Ver también</h2>

+

+<ul>

+ <li>{{domxref("Range")}}</li>

+</ul>

+---

+title: range

+slug: Web/API/Range

+tags:

+ - DOM

+ - Todas_las_Categorías

+translation_of: Web/API/Range

+---

+<p>{{ APIRef("DOM") }}</p>

+

+<h3 id="Introducci.C3.B3n" name="Introducci.C3.B3n">Introducción</h3>

+

+<p>El objeto <code>Range</code> representa un fragmento de un documento que puede contener nodos y partes de nodos de texto en un documento dado.</p>

+

+<p>Un rango puede ser creado usando el método <code><a href="es/DOM/document.createRange">createRange</a></code> del objeto <code><a href="es/DOM/document">document</a></code>. Los objetos rango pueden ser recuperados usando el método <code><a href="es/DOM/Selection/getRangeAt">getRangeAt</a></code> del objeto <code><a href="es/DOM/selection">Selection</a></code>.</p>

+

+<h3 id="Propiedades" name="Propiedades">Propiedades</h3>

+

+<dl>

+ <dt><a href="es/DOM/range.collapsed">collapsed</a></dt>

+ <dd>Devuelve un valor booleano indicando si los puntos de inicio y fin están en la misma posición.</dd>

+ <dt><a href="es/DOM/range.commonAncestorContainer">commonAncestorContainer</a></dt>

+ <dd>Devuelve el nodo más profundo que contiene los nodos <strong>startContainer</strong> y <strong>endContainer</strong>.</dd>

+ <dt><a href="es/DOM/range.endContainer">endContainer</a></dt>

+ <dd>Devuelve el nodo dentro del cual termina el rango.</dd>

+ <dt><a href="es/DOM/range.endOffset">endOffset</a></dt>

+ <dd>Devuelve un número representando donde termina el <code>Range</code> en el <code>endContainer</code>.</dd>

+ <dt><a href="es/DOM/range.startContainer">startContainer</a></dt>

+ <dd>Devuelve el nodo dentro del cual comienza el rango.</dd>

+ <dt><a href="es/DOM/range.startOffset">startOffset</a></dt>

+ <dd>Devuelve un número representando donde empieza el <code>Range</code> en el <code>endContainer</code>.</dd>

+</dl>

+

+<h3 id="M.C3.A9todos" name="M.C3.A9todos">Métodos</h3>

+

+<h4 id="M.C3.A9todos_de_ubicaci.C3.B3n" name="M.C3.A9todos_de_ubicaci.C3.B3n">Métodos de ubicación</h4>

+

+<p>Estos métodos definen el punto de inicio y fin de un rango.</p>

+

+<dl>

+ <dt><a href="es/DOM/range.setStart">setStart</a></dt>

+ <dd>Define la posición inicial de un rango.</dd>

+ <dt><a href="es/DOM/range.setEnd">setEnd</a></dt>

+ <dd>Define la posición final de un rango.</dd>

+ <dt><a href="es/DOM/range.setStartBefore">setStartBefore</a></dt>

+ <dd>Define la posición inicial de un rango relativa a otro nodo.</dd>

+ <dt><a href="es/DOM/range.setStartAfter">setStartAfter</a></dt>

+ <dd>Define la posición inicial de un rango relativa a otro nodo.</dd>

+ <dt><a href="es/DOM/range.setEndBefore">setEndBefore</a></dt>

+ <dd>Define la posición final de un rango relativa a otro nodo.</dd>

+ <dt><a href="es/DOM/range.setEndAfter">setEndAfter</a></dt>

+ <dd>Define la posición final de un rango relativa a otro nodo.</dd>

+ <dt><a href="es/DOM/range.selectNode">selectNode</a></dt>

+ <dd>Define el rango a contener el nodo y sus contenidos.</dd>

+ <dt><a href="es/DOM/range.selectNodeContents">selectNodeContents</a></dt>

+ <dd>Define el rango a contener los contenidos de un nodo.</dd>

+ <dt><a href="es/DOM/range.collapse">collapse</a></dt>

+ <dd>Pliega el Rango a uno de sus puntos límite.</dd>

+</dl>

+

+<h4 id="Editando_m.C3.A9todos" name="Editando_m.C3.A9todos">Editando métodos</h4>

+

+<p>Estos métodos recuperan nodos de un rango y modifican los contenidos de un rango.</p>

+

+<dl>

+ <dt><a href="es/DOM/range.cloneContents">cloneContents</a></dt>

+ <dd>Devuelve un fragmento de documento copiando los nodos de un rango.</dd>

+ <dt><a href="es/DOM/range.deleteContents">deleteContents</a></dt>

+ <dd>Elimina del documento los contenidos de un rango.</dd>

+ <dt><a href="es/DOM/range.extractContents">extractContents</a></dt>

+ <dd>Mueve los contenidos de un rango del árbol de documento a un fragmento del documento.</dd>

+ <dt><a href="es/DOM/range.insertNode">insertNode</a></dt>

+ <dd>Inserta un nodo al comienzo de un rango.</dd>

+ <dt><a href="es/DOM/range.surroundContents">surroundContents</a></dt>

+ <dd>Mueve el contenido de un rango a un nodo nuevo.</dd>

+</dl>

+

+<h4 id="Otros_m.C3.A9todos" name="Otros_m.C3.A9todos">Otros métodos</h4>

+

+<dl>

+ <dt><a href="es/DOM/range.compareBoundaryPoints">compareBoundaryPoints</a></dt>

+ <dd>Compara los puntos límite de dos rangos.</dd>

+ <dt><a href="es/DOM/range.cloneRange">cloneRange</a></dt>

+ <dd>Devuelve un objeto rango con puntos límites idénticos al rango clonado.</dd>

+ <dt><a href="es/DOM/range.detach">detach</a></dt>

+ <dd>Libera el Rango desde el uso para mejorar el rendimiento.</dd>

+ <dt><a href="es/DOM/range.toString">toString</a></dt>

+ <dd>Devuelve el texto del rango.</dd>

+</dl>

+

+<h4 id="M.C3.A9todos_de_Gecko" name="M.C3.A9todos_de_Gecko">Métodos de Gecko</h4>

+

+<p>Esta sección describe métodos de <code>Range</code> que son particulares a Mozilla y no son parte de las especificaciones DOM W3C.</p>

+

+<dl>

+ <dt><a href="es/DOM/range.compareNode">compareNode</a> {{obsolete_inline}}</dt>

+ <dd>Devuelve una constante representando si el nodo está antes, después, dentro o alrededor del rango.</dd>

+ <dt><a href="es/DOM/range.comparePoint">comparePoint</a></dt>

+ <dd>Devuelve -1, 0, or 1 indicando si el punto ocurre antes, dentro o después del rango.</dd>

+ <dt><a href="es/DOM/range.createContextualFragment">createContextualFragment</a></dt>

+ <dd>Devuelve un fragmenteo de documento creado de un texto de código.</dd>

+ <dt><a href="es/DOM/range.intersectsNode">intersectsNode</a> {{obsolete_inline}}</dt>

+ <dd>Devuelve un valor boleano verdadero si el nodo dado intersecta el rango.</dd>

+ <dt><a href="es/DOM/range.isPointInRange">isPointInRange</a></dt>

+ <dd>Devuelve un valor boleano verdadero indicando si el punto dado está en el rango.</dd>

+</dl>

+

+<p>{{ languages( { "en": "en/DOM/range", "fr": "fr/DOM/range", "ja": "ja/DOM/range", "pl": "pl/DOM/range" } ) }}</p>

+---

+title: range.intersectsNode

+slug: Web/API/Range/intersectsNode

+tags:

+ - Referencia_DOM_de_Gecko

+translation_of: Web/API/Range/intersectsNode

+---

+<p>{{ ApiRef() }}</p>

+<h3 id="Summary" name="Summary">Summary</h3>

+<p>{{ Obsolete_header() }} Returns a boolean indicating whether the given node intersects the range.</p>

+<h3 id="Syntax" name="Syntax">Syntax</h3>

+<pre class="eval">bool = range.intersectsNode( referenceNode )

+</pre>

+<h3 id="Parameters" name="Parameters">Parameters</h3>

+<dl>

+ <dt>

+ referenceNode </dt>

+ <dd>

+ The <code>Node</code> to compare with the <code>Range</code>.</dd>

+</dl>

+<h3 id="Example" name="Example">Example</h3>

+<pre class="eval">range = document.createRange();

+range.selectNode(document.getElementsByTagName("div").item(0));

+bool = range.intersectsNode(document.getElementsByTagName("p").item(0));

+</pre>

+<h3 id="Notes" name="Notes">Notes</h3>

+<p>This method is obsolete; you should instead use the W3C DOM Range methods (see <code><a href="es/DOM/range.compareBoundaryPoints">compareBoundaryPoints()</a></code>).</p>

+<div class="warning">

+ <b>Warning:</b> This method <a href="es/Gecko_1.9_Changes_affecting_websites">has been removed</a> from <a href="es/Gecko">Gecko</a> 1.9 and will not exist in future versions of Firefox; you should switch to <code>compareBoundaryPoints()</code> as soon as possible.</div>

+<p>The following function can be used as replacement:</p>

+<pre class="eval">function rangeIntersectsNode(range, node) {

+ var nodeRange = node.ownerDocument.createRange();

+ try {

+ nodeRange.selectNode(node);

+ }

+ catch (e) {

+ nodeRange.selectNodeContents(node);

+ }

+

+ return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 &amp;&amp;

+ range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;

+}

+</pre>

+<h3 id="Specification" name="Specification">Specification</h3>

+<p>This method is not part of a specification.</p>

+<div class="noinclude">

+  </div>

+<p>{{ languages( { "en": "en/DOM/range.intersectsNode", "pl": "pl/DOM/range.intersectsNode" } ) }}</p>

+---

+title: Range.setStart()

+slug: Web/API/Range/setStart

+translation_of: Web/API/Range/setStart

+---

+<p>{{ApiRef("DOM")}}</p>

+

+<p>El método <strong><code>Range.setStart()</code></strong> establece la posición de inicio de un {{ domxref("Range") }}.</p>

+

+<p>Si <code>startNode</code> es un {{ domxref("Node") }} de tipo <code>Text</code>, <code>Comment</code>, o <code>CDATASection</code>, entonces <code>startOffset</code> es el número de caracteres de partida de <code>startNode</code>. Para otros tiposde nodos, <code>startOffset</code> es el número de nodos hijos entre el inicio de los <code>startNode</code>.</p>

+

+<p>Setting the start point below (lower in the document) the end point will result in a collapsed range with the start and end points both set to the specified start position.</p>

+

+<p>Definiendo el punto de partida abajo (más abajo en el documento) el punto final resultará en un rango colapsado con el punto tanto de inicio como de entrada establecidos a la posición de partida especificada.</p>

+

+<h2 id="Sintaxis">Sintaxis</h2>

+

+<pre class="syntaxbox"><em>range</em>.setStart(<em>startNode</em>, <em>startOffset</em>);

+</pre>

+

+<h3 id="Parameters" name="Parameters">Parámetros</h3>

+

+<dl>

+ <dt><em>startNode</em></dt>

+ <dd>El {{ domxref("Node") }} donde {{ domxref("Range") }} debe empezar.</dd>

+ <dt><em>startOffset</em><code> </code></dt>

+ <dd>Un entero mayor o igual a cero representando el offset o desplazamiento de caracteres para el inicio del {{ domxref("Range") }} desde el comienzo de <code>startNode</code>.</dd>

+</dl>

+

+<h2 id="Example" name="Example">Ejemplo</h2>

+

+<pre class="brush: js">var range = document.createRange();

+var startNode = document.getElementsByTagName("p").item(2);

+var startOffset = 0;

+range.setStart(startNode,startOffset);

+</pre>

+

+<h2 id="Specification" name="Specification">Especificaciones</h2>

+

+<table class="standard-table">

+ <tbody>

+ <tr>

+ <th scope="col">Especificación</th>

+ <th scope="col">Estatus</th>

+ <th scope="col">Comentario</th>

+ </tr>

+ <tr>

+ <td>{{SpecName('DOM WHATWG', '#dom-range-setstart', 'Range.setStart()')}}</td>

+ <td>{{Spec2('DOM WHATWG')}}</td>

+ <td>Sin cambio.</td>

+ </tr>

+ <tr>

+ <td>{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level2-Range-method-setStart', 'Range.setStart()')}}</td>

+ <td>{{Spec2('DOM2 Traversal_Range')}}</td>

+ <td>Especificación inicial.</td>

+ </tr>

+ </tbody>

+</table>

+

+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>

+

+<p>{{CompatibilityTable}}</p>

+

+<div id="compat-desktop">

+<table class="compat-table">

+ <tbody>

+ <tr>

+ <th>Feature</th>

+ <th>Chrome</th>

+ <th>Edge</th>

+ <th>Firefox (Gecko)</th>

+ <th>Internet Explorer</th>

+ <th>Opera</th>

+ <th>Safari</th>

+ </tr>

+ <tr>

+ <td>Basic support</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatGeckoDesktop("1.0")}}</td>

+ <td>9.0</td>

+ <td>9.0</td>

+ <td>{{CompatVersionUnknown}}</td>

+ </tr>

+ </tbody>

+</table>

+</div>

+

+<div id="compat-mobile">

+<table class="compat-table">

+ <tbody>

+ <tr>

+ <th>Feature</th>

+ <th>Android</th>

+ <th>Edge</th>

+ <th>Firefox Mobile (Gecko)</th>

+ <th>IE Mobile</th>

+ <th>Opera Mobile</th>

+ <th>Safari Mobile</th>

+ </tr>

+ <tr>

+ <td>Basic support</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatGeckoMobile("1.0")}}</td>

+ <td>9.0</td>

+ <td>9.0</td>

+ <td>{{CompatVersionUnknown}}</td>

+ </tr>

+ </tbody>

+</table>

+</div>

+

+<h2 id="sect1"> </h2>

+

+<h2 id="Ver_también">Ver también</h2>

+

+<ul>

+ <li><a href="/en-US/docs/DOM/DOM_Reference" title="/en-US/docs/DOM/DOM_Reference">The DOM interfaces index</a></li>

+</ul>