From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/api/mutationobserver/index.html | 330 +++++++++++++++++++++ .../mutationobserver/mutationobserver/index.html | 98 ++++++ .../es/web/api/mutationobserver/observe/index.html | 95 ++++++ 3 files changed, 523 insertions(+) create mode 100644 files/es/web/api/mutationobserver/index.html create mode 100644 files/es/web/api/mutationobserver/mutationobserver/index.html create mode 100644 files/es/web/api/mutationobserver/observe/index.html (limited to 'files/es/web/api/mutationobserver') diff --git a/files/es/web/api/mutationobserver/index.html b/files/es/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..f0fe2a4b01 --- /dev/null +++ b/files/es/web/api/mutationobserver/index.html @@ -0,0 +1,330 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

MutationObserver establece un mecanismo para reaccionar ante cambios en el DOM. Ha sido diseñado como un sustituto de los Mutation Events definidos en las especificaciones de DOM3 Events.

+ +

Constructor

+ +

MutationObserver()

+ +

Constructor para la instaciación de nuevos DOM mutation observers.

+ +
MutationObserver(
+  function callback
+);
+
+ +
Parámetros
+ +
+
callback
+
La función que será llamada en cada mutación del DOM. El observer llamará a esta función con dos argumentos. El primero es un array de objetos, cada uno del tipo MutationRecord. El segundo es la propia instancia del MutationObserver.
+
+ +

Métodos

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +

observe()

+ +

Registra la instancia del MutationObserver  para recibir notificaciones de las mutaciones del DOM sobre el nodo especificado.

+ +
void observe(
+  {{domxref("Node")}} target,
+  MutationObserverInit options
+);
+
+ +
Parámetros
+ +
+
target
+
El {{domxref("Node")}} sobre el que observar las mutaciones del DOM.
+
options
+
Un objeto MutationObserverInit, que especifica que mutaciones del DOM deben ser informadas.
+
+ +
NOTA: Añadir un observador a un elemento es igual que addEventListener, si usted observa el elemento múltiples veces no hace ninguna diferencia. Si se observa dos veces un elemento, el observe callback no se ejecutará dos veces, ni tampoco tendrá que ejecutar disconnect() dos veces. En otras palabras, una vez el elemento es observado, observarlo de nuevo con la misma instancia del observador no hará nada. Sin embargo, si el callback es diferente por supuesto se le añadirá otro observador.
+ +

disconnect()

+ +

Evita que la instancia de MutationObserver continue recibiendo notificaciones de modificaciones del DOM. Hasta que el método observe() sea usado de nuevo, la función callback no será invocada.

+ +
void disconnect();
+
+ +

takeRecords()

+ +

Vacía la cola de registros de la instancia de MutationObserver devolviendo su contenido.

+ +
Array takeRecords();
+
+ +
Return value
+ +

Returns an Array of MutationRecords.

+ +

MutationObserverInit

+ +

MutationObserverInit es un objeto para el que se pueden especificar las siguientes propiedades:

+ +
NOTA: Como mínimo las propiedades childList, attributes, o characterData deben ser true. En caso contrario, se producirá un error "An invalid or illegal string was specified"
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadDescripción
childList +

Establecer a true si la adición y/o eliminación de elementos hijo del nodo (incluso los nodos text) han se ser observados.

+
attributes +

Establecer a true si los cambios en los atributos deben ser observados

+
characterData +

Establecer a true si los cambios en los datos deben ser observados

+
subtree +

Establecer a true si los cambios tambien deben ser observados en los descendientes.

+
attributeOldValue +

Establecer a true si attributes es true y el valor anterior al cambio debe ser guardado.

+
characterDataOldValue +

Establecer a true si characterData vale true y el dato anterior al cambio de be ser guardado.

+
attributeFilter +

Asigne un array de nombres de atributos locales (sin su espacio de nombres) si no necesita observar los cambios en todos los atributos

+
+ +

MutationRecord

+ +

MutationRecord es el objeto que será pasado a la funcion "callback" del observador. Tiene las siguientes propiedades:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropiedadTipoDescripción
typeString +

Devuelve:

+ +
    +
  • attributes si el cambio fué en un atributo
    • +
  • characterData si se produjo en un nodo.
    • +
  • childList si se produjo en los nodos del árbol.
    • +
+ +
+
+
target{{domxref("Node")}} +

Devuelve el nodo afectado por el cambio, dependiendo del type:

+ +
    +
  • Para attributes, el elemento cuyos atributos han cambiado.
    • +
  • Para characterData, el nodo CharacterData.
    • +
  • Para childList, El nodo padre cuyos hijos han cambiado.
    • +
+
addedNodes{{domxref("NodeList")}} +

Devuelve los nodos añadidos. Si no tiene nodos añadidos devuelve un NodeList vacio.

+
removedNodes{{domxref("NodeList")}} +

Devuelve los nodos eliminados. Si no tiene nodos eliminados devuelve un NodeList vacio.

+
previousSibling{{domxref("Node")}} +

Devuelve el nodo hermano anterior añadido o eliminado, o el valor null.

+
nextSibling{{domxref("Node")}} +

Devuelve el siguiente nodo hermano añadido o eliminado, o el valor null.

+
attributeNameString +

Devuelve el nombre local del atributo cambiado, o el valor null.

+
attributeNamespaceString +

Devuelve espacio de nombres (namespace) del atributo cambiado, o el valor null.

+
oldValueString +

El valor devuelto depende del type:

+ +
    +
  • Para attributes,el valor anterior del atributo.
    • +
  • Para characterData,los datos antes del cambio
    • +
  • Para childList,devuelve null.
    • +
+
+ +

Ejemplo de uso

+ +

El siguiente ejemplo fué tomado de: this blog post.

+ +
// selecciona el nodo target
+var target = document.querySelector('#some-id');
+
+// Crea una instancia de observer
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// Configura el observer:
+var config = { attributes: true, childList: true, characterData: true };
+
+// pasa al observer el nodo y la configuracion
+observer.observe(target, config);
+
+// Posteriormente, puede detener la observacion
+observer.disconnect();
+
+ +

Lectura adicional

+ + + +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support18 {{ property_prefix("-webkit") }}
+ 26		{{ CompatGeckoDesktop(14) }}11156.0 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE  (Windows Phone) Opera MobileSafari Mobile
Basic support{{ CompatUnknown() }}18 {{ property_prefix("-webkit") }}
+ 26		{{ CompatGeckoMobile(14) }}11 (8.1)15 +

6 {{ property_prefix("-webkit")}}

+ +

7

+
+
+ +

 

diff --git a/files/es/web/api/mutationobserver/mutationobserver/index.html b/files/es/web/api/mutationobserver/mutationobserver/index.html new file mode 100644 index 0000000000..faf72f1db3 --- /dev/null +++ b/files/es/web/api/mutationobserver/mutationobserver/index.html @@ -0,0 +1,98 @@ +--- +title: MutationObserver.MutationObserver() +slug: Web/API/MutationObserver/MutationObserver +translation_of: Web/API/MutationObserver/MutationObserver +--- +
{{APIRef("DOM WHATWG")}}
+ +

El constructor DOM MutationObserver() — parte del interface {{domxref("MutationObserver")}} — crea y devuelve un nuevo objeto observer que llamará a la función especificada (callback), cuando tengan lugar cambios sobre el DOM. Estos observadores no se inician inmediatamente; en primer lugar debemos llamar al método {{domxref("MutationObserver.observe", "observe()")}} para establecer qué parte del DOM observar y que tipo de cambios comunicar.

+ +

Sintaxis

+ +
var observer = new MutationObserver(callback);
+ +

Parámetros

+ +
+
callback
+
La función que será llamada con cada cambio en el DOM, determinado por el nodo, subárbol y opciones. Esta función toma dos parámetros de entrada: un array de objetos {{domxref("MutationRecord")}}, con los cambios producidos, y el MutationObserver que llamó a la función. Para mas detalles vea {{anch("Example", "example")}}
+
 
+
+ +

Valor devuelto

+ +

Un nuevo objeto {{domxref("MutationObserver")}}, configurado para llamar a una determinada función cuando se producca un cambio en el DOM.

+ +

Ejemplo

+ +

Este ejemplo crea un nuevo MutationObserver configurado para observar a un nodo y a sus hijos (subárbol), cuando se añadan o eliminen elementos al mismo; tambien observa cualquier cambio en los atributos de los elementos del árbol.

+ +

La función callback

+ +
function callback(mutationList, observer) {
+  mutationList.forEach((mutation) => {
+    switch(mutation.type) {
+      case 'childList':
+        /* Uno o mas hijos han sido añadidos y/o eliminados del árbol;
+           vea mutation.addedNodes y mutation.removedNodes */
+        break;
+      case 'attributes':
+        /* El valor de un atributo en mutation.target ha cambiado;
+           El nombre del atributo esta en mutation.attributeName y
+           su valor anterior en mutation.oldValue */
+        break;
+    }
+  });
+}
+
+ +

La función callback() es llamada cuando el observer detecta cambios que coinciden con la configuración de consulta especificada cuando llamamos a {{domxref("MutationObserver.observe", "observe()")}} para que inicie la observación.

+ +

El tipo de cambio que se produjo (tanto en la lista de hijos como en los atributos) es detectado observando la propiedad {{domxref("MutationRecord.type", "mutation.type")}}

+ +

Crear e iniciar un  "observer"

+ +

Este código establece el proceso de observación

+ +
var targetNode = document.querySelector("#someElement");
+var observerOptions = {
+  childList: true,
+  attributes: true,
+  subtree: true //Omita o ponga false si no quiere controlar los cambios en los hijos
+}
+
+var observer = new MutationObserver(callback);
+observer.observe(targetNode, observerOptions);
+ +

El subárbol deseado se localiza buscando un elemento cuyo ID es "someElement". Un conjunto de opciones para el "observer" es establecido en el registro observerOptions. En él, especificamos los valores true tanto para childList como attributes, para obtener la información deseada.

+ +

Posteriormente instanciamos el objeto observer, especificando la función callback(), e iniciamos la observación de los nodos del DOM llamando al método observe(), pasandole el nodo y las opciones.

+ +

Desde este momento y hasta que se llame al método {{domxref("MutationObserver.disconnect", "disconnect()")}}, la funcion callback() será llamada cada vez que un elemento sea añadido o eliminado del árbol del DOM, cuya raiz es  targetNode, o uno de sus atributos sea cambiado.

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{SpecName('DOM WHATWG', '#dom-mutationobserver-mutationobserver', 'MutationObserver()')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilidad

+ + + +

{{Compat("api.MutationObserver.MutationObserver")}}

diff --git a/files/es/web/api/mutationobserver/observe/index.html b/files/es/web/api/mutationobserver/observe/index.html new file mode 100644 index 0000000000..607af27cd0 --- /dev/null +++ b/files/es/web/api/mutationobserver/observe/index.html @@ -0,0 +1,95 @@ +--- +title: MutationObserver.observe() +slug: Web/API/MutationObserver/observe +translation_of: Web/API/MutationObserver/observe +--- +
{{APIRef("DOM WHATWG")}}
+ +

El método {{domxref("MutationObserver")}} observe() configura la funcion MutationObserver para que inicie la recepción de cambios en el DOM que coincidan con las opciones dadas.

+ +

Según la configuración, el observador verá un solo {{domxref("Node")}} del árbol del DOM, o ese nodo y alguno o todos los nodos descendientes.

+ +

Para detener al MutationObserver (de modo que la funcion no sea llamada), llame al método {{domxref("MutationObserver.disconnect()")}}.

+ + + +

Sintaxis

+ +
mutationObserver.observe(target[, options])
+
+ +

Parámetros

+ +
+
target
+
 Un {{domxref("Node")}} del DOM (que puede ser un {{domxref("Element")}}) perteneciente al  árbol DOM, o la raiz de un subárbol de nodos, donde observar cambios.
+
options {{optional_inline}}
+
Un objeto {{domxref("MutationObserverInit")}} opcional, que decribe qué cambios en el DOM deben ser enviados a la función callback del observador.
+
+ +

Valor devuelto

+ +

undefined.

+ +

Excepciones

+ +
+
TypeError
+
llamado en cualquiera de las siguientes circunstancias
+
+
    +
  • Las opciones han sido configuradas de tal modo que no existe nada que monitorizar (por ejemplo, si {{domxref("MutationObserverInit.childList")}}, {{domxref("MutationObserverInit.attributes")}}, y {{domxref("MutationObserverInit.characterData")}} son false)
    • +
  • La opcion attributes es  false (indicando que los cambios en los atributos no son monitorizados) y attributeOldValue es true y/o attributeFilter está presente.
    • +
  • Las opciones {{domxref("MutaitonObserverInit.characterDataOldValue", "characterDataOldValue")}} son true pero {{domxref("MutationObserverInit.characterData")}} es false (indicando que los cambios en los caracteres no se guardan).
    • +
+
+
+ +

Notas de uso

+ +

Reutilizar MutationObservers

+ +

Puede llamar varias veces al método observe() del mismo objeto MutationObserver  para ver los cambios en diferentes partes del árbol del DOM y/o diferentes tipos de cambios. Sin embargo ha de tener en cuenta:

+ + + +

La observación sigue a los nodos cuando se desconecta

+ +

Los observadores de cambios tienen como objetivo permitirle ver un conjunto de nodos a lo largo del tiempo, incluso si la conexion entre estos nodos desaparece. Si esta observando un subárbol de nodos, y una parte del subárbol es desconectado y llevado a otra parte del DOM, continuará viendo ese mismo segmento de nodos, recibiendo las mismas llamadas a la función que antes de ser desconectado.

+ +

En otras palabras, hasta que se le haya notificado que los nodos se están separando de su subárbol monitoreado, recibirá notificaciones de los cambios en ese subárbol y sus nodos. Esto evita que pierda los cambios producidos despues de que la conexion se corte y antes de que tenga la oportunidad de especificar un nuevo monitoreo sobre los cambios en el nodo o subárbol movido.

+ +

De manera que en teoria si mantiene la pista de los objetos {{domxref("MutationRecord")}} que describen los cambios, podrá "deshacer" los mismos, devolviendo el DOM a su estado inicial.

+ +

Ejemplo

+ +

 

+ +

Especificaciones

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-mutationobserver-observe', 'MutationObserver.observe()')}}{{ Spec2('DOM WHATWG') }} 
+ +

Compatibilidad

+ + + +

{{Compat("api.MutationObserver.observe")}}

-- cgit v1.2.3-54-g00ecf