Aug 9, 2020 · Aug 7, 2020 · Aug 9, 2020 · Aug 9, 2020 · Aug 9, 2020 · Aug 9, 2020
diff --git a/2-ui/99-ui-misc/01-mutation-observer/article.md b/2-ui/99-ui-misc/01-mutation-observer/article.md

 # Mutation observer

 `MutationObserver`is a built-in object that observes aDOMelement and fires acallbackin case of changes.
 `MutationObserver`es un objeto incorporado que observa un elementoDOMy dispara uncallbackcuando hay cambios en él.

 We'll first take a look at the syntax, and then explore areal-world use case, to see where such thing may be useful.
 Primero veremos su sintaxis, luego exploraremos un caso de la vidareal para ver dónde puede ser útil.

 ##Syntax
 ##Sintaxis

 `MutationObserver`is easy to use.
 `MutationObserver`es fácil de usar.

 First, we create an observer with a callback-function:
 Primero creamos un observador con una función callback:

 ```js
 let observer = new MutationObserver(callback);
 ```

 And then attach it to a DOM node:
 Y luego lo vinculamos a un nodo DOM:

 ```js
 observer.observe(node, config);
 ```

 `config`is an object with boolean options "what kind of changes to react on":
 - `childList` --changes in the direct children of `node`,
 - `subtree` --in all descendants of `node`,
 - `attributes` --attributes of `node`,
 - `attributeFilter` --an arrayof attribute names, to observe only selected ones.
 - `characterData` --whether to observe`node.data`(text content),
 `config`es un objeto con opciones booleanas "a qué clase de cambios reaccionar":
 - `childList` --cambios en los hijos directos de `node`,
 - `subtree` --en todos los descendientes de `node`,
 - `attributes` --atributos de `node`,
 - `attributeFilter` --un arrayde nombres de atributos, para observar solamente a los seleccionados,
 - `characterData` --establece si debe observar cambios de texto en`node.data`o no,

 Few other options:
 - `attributeOldValue` --if`true`,pass both the old and the new value of attribute tocallback (see below),otherwise only the new one (needs`attributes` option),
 - `characterDataOldValue` --if`true`,pass both the old and the new value of`node.data`tocallback (see below),otherwise only the new one (needs`characterData` option).
 Algunas otras opciones:
 - `attributeOldValue` --si es`true`,tanto el valor viejo como el nuevo del atributo son pasados alcallback (ver abajo),de otro modo pasa solamente el nuevo (necesita la opción`attributes`),
 - `characterDataOldValue` --si es`true`,tanto el valor viejo como el nuevo de`node.data`son pasados alcallback (ver abajo),de otro modo pasa solamente el nuevo (necesita la opción`characterData`).

 Then after any changes, the `callback`is executed: changes are passed in the first argument as a list of[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects, and the observer itself as the second argument.
 Entonces, después de cualquier cambio, el `callback`es ejecutado: los cambios son pasados en el primer argumento como una lista objetos[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord), y el observador en sí mismo como segundo argumento.

 [MutationRecord](https://dom.spec.whatwg.org/#mutationrecord)objects have properties:
 Los objetos[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord)tienen como propiedades:

 - `type` --mutation type, one of
    - `"attributes"`:attribute modified
    - `"characterData"`:data modified, used for text nodes,
    - `"childList"`:child elements added/removed,
 - `target` --where the change occurred: an element for `"attributes"`,or text node for`"characterData"`,or an element for a`"childList"` mutation,
 - `addedNodes/removedNodes`--nodes that were added/removed,
 - `previousSibling/nextSibling` --the previous and next sibling to added/removed nodes,
 - `attributeName/attributeNamespace` --the name/namespace (for XML)of the changed attribute,
 - `oldValue` --the previous value, only for attribute or text changes, if the corresponding option is set `attributeOldValue`/`characterDataOldValue`.
 - `type` --tipo de mutación, uno de:
    - `"attributes"`:atributo modificado,
    - `"characterData"`:dato modificado, usado para nodos de texto,
    - `"childList"`:elementos hijos agregados o quitados,
 - `target` --dónde ocurrió el cambio: un elemento para `"attributes"`,o un nodo de texto para`"characterData"`,o un elemento para una mutación de`"childList"`,
 - `addedNodes/removedNodes` --nodos que fueron agregados o quitados,
 - `previousSibling/nextSibling` --los nodos "hermanos", previos y siguientes a los nodos agregados y quitados,
 - `attributeName/attributeNamespace` --el nombre onamespace (para XML)del atributo cambiado,
 - `oldValue` --el valor previo, solamente cambios de atributo o cambios de texto si se establece la opción correspondiente `attributeOldValue`/`characterDataOldValue`.

 For example, here's a`<div>`with a`contentEditable` attribute. That attribute allows us to focus on it and edit.
 Por ejemplo, aquí hay un`<div>`con un atributo`contentEditable`. Ese atributo nos permite poner el foco en él y editarlo.

 ```html run
 <div contentEditable id="elem">Click and <b>edit</b>, please</div>

 <script>
 let observer = new MutationObserver(mutationRecords => {
  console.log(mutationRecords); // console.log(the changes)
  console.log(mutationRecords); // console.log(los cambios)
 });

 //observe everything except attributes
 //observa todo exceptuando atributos
 observer.observe(elem, {
  childList: true, //observe direct children
  subtree: true, //and lower descendants too
  characterDataOldValue: true //pass old data tocallback
  childList: true, //observa hijos directos
  subtree: true, //y descendientes inferiores también
  characterDataOldValue: true //pasa el dato viejo alcallback
 });
 </script>
 ```

 If we run this code in the browser, then focus on the given`<div>`and change the text inside`<b>edit</b>`, `console.log`will show one mutation:
 Si ejecutamos este código en el navegador, el foco en el`<div>`dado y el cambio en texto dentro de`<b>edit</b>`, `console.log`mostrará una mutación:

 ```js
 mutationRecords = [{
  type: "characterData",
  oldValue: "edit",
  target: <text node>,
  //other properties empty
  //otras propiedades vacías
 }];
 ```

 If we make more complex editing operations, e.g. remove the `<b>edit</b>`,the mutation event may contain multiple mutation records:
 Si hacemos operaciones de edición más complejas, como eliminar el `<b>edit</b>`,el evento de mutación puede contener múltiples registros de mutación:

 ```js
 mutationRecords = [{
  removedNodes: [<b>],
  nextSibling: <text node>,
  previousSibling: <text node>
  //other properties empty
  //otras propiedades vacías
 }, {
  type: "characterData"
  target: <text node>
  // ...mutation details depend on how the browser handles such removal
  //it may coalesce two adjacent text nodes "edit "and ", please"into one node
  //or it may leave them separate text nodes
  // ...detalles de mutación dependen de cómo el navegador maneja tal eliminación
  //puede unir dos nodos de texto adyacentes "edit "y ", please"en un nodo
  //o puede dejarlos como nodos de texto separados
 }];
 ```

 So, `MutationObserver`allows to react on any changes within DOM subtree.
 Así, `MutationObserver`permite reaccionar a cualquier cambio dentro del subárbol DOM.

 ##Usage for integration
 ##Uso para integración

 When such thing may be useful?
 ¿Cuándo puede ser práctico esto?

 Imagine the situation when you need to add a third-party script that contains useful functionality, but also does something unwanted, e.g. shows ads `<div class="ads">Unwanted ads</div>`.
 Imagina la situación cuando necesitas añadir un script de terceros que contiene funcionalidad útil pero que también hace algo no deseado, por ejemplo añadir publicidad `<div class="ads">Unwanted ads</div>`.

 Naturally, the third-partyscriptprovidesnomechanisms to remove it.
 Naturalmente elscriptde terceras partesnoproporciona mecanismos para removerlo.

 Using `MutationObserver`, we can detect when the unwanted element appears in our DOMand remove it.
 Usando `MutationObserver` podemos detectar cuándo aparece el elemento no deseado en nuestro DOMy removerlo.

 There are other situations when a third-partyscriptadds something into our document, and we'd like to detect, when it happens, to adapt our page, dynamically resize something etc.
 Hay otras situaciones, como cuando unscriptde terceras partes agrega algo en nuestro documento y quisiéramos detectarlo para adaptar nuestra página y cambiar el tamaño de algo dinámicamente, etc.

 `MutationObserver`allows to implement this.
 `MutationObserver`permite implementarlo.

 ##Usage for architecture
 ##Uso para arquitectura

 There are also situations when`MutationObserver`is good from architectural standpoint.
 Hay también situaciones donde`MutationObserver`es bueno desde el punto de vista de la arquitectura.

 Let's say we're making a website about programming. Naturally, articles and other materials may contain source code snippets.
 Digamos que estamos haciendo un sitio web acerca de programación. Naturalmente, los artículos y otros materiales pueden contener fragmentos de código.

 Such snippet in anHTMLmarkup looks like this:
 Tal fragmento en un markupHTMLse ve como esto:

 ```html
 ...
 <pre class="language-javascript"><code>
  //here's the code
  //aquí el código
  let hello = "world";
 </code></pre>
 ...
 ```

 Also we'll use a JavaScript highlighting library on our site, e.g.[Prism.js](https://prismjs.com/).A call to `Prism.highlightElem(pre)`examines the contents of such`pre`elements and adds into them specialtagsand stylesfor colored syntax highlighting, similar to what you see in examples here, at this page.
 También usaremos una librería JavaScriptde "highlighting" para resaltar elementos en nuestro sitio, por ejemplo[Prism.js](https://prismjs.com/).Una llamada a `Prism.highlightElem(pre)`examina el contenido de tales elementos`pre`y les agregatagsy stylesespeciales para obtener sintaxis resaltada con color, similares a los que ves en esta página.

 When exactly to run that highlighting method? We can do it on `DOMContentLoaded` event, or at the bottom of the page. At that moment we have ourDOMready, can search for elements`pre[class*="language"]`and call `Prism.highlightElem`on them:
 ¿Exactamente cuándo ejecutar tal método de highlighting? Podemos hacerlo en el evento `DOMContentLoaded`, o al final de la página. En el momento en que tenemos nuestroDOMlisto buscamos los elementos`pre[class*="language"]`y llamamos `Prism.highlightElem`en ellos:

 ```js
 //highlight all code snippets on the page
 //resaltar todos los fragmentos de código en la página
 document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
 ```

 Everything'ssimpleso far, right? There are`<pre>`code snippets inHTML, we highlight them.
 Todo essimplehasta ahora, ¿verdad? Hay fragmentos de código`<pre>`enHTML y los resaltamos.

 Now let's go on. Let's say we're going to dynamically fetch materials from a server. We'll study methods for that [later in the tutorial](info:fetch). For now it only matters that we fetch anHTMLarticle from a webserver and display it on demand:
 Continuemos. Digamos que vamos a buscar dinámicamente material desde un servidor. Estudiaremos métodos para ello [más adelante](info:fetch) en el tutorial. Por ahora solamente importa que buscamos un artículoHTMLdesde un servidor web y lo mostramos bajo demanda:

 ```js
 let article = /*fetch new content from server */
 let article = /*busca contenido nuevo desde un servidor */
 articleElem.innerHTML = article;
 ```

 The new`article`HTML may contain code snippets. We need to call`Prism.highlightElem`on them, otherwise they won't get highlighted.
 El nuevo elemento HTML`article`puede contener fragmentos de código. Necesitamos llamar`Prism.highlightElem`en ellos, de otro modo no se resaltarían.

 **Where and when to call`Prism.highlightElem`for a dynamically loaded article?**
 **¿Dónde y cuándo llamar`Prism.highlightElem`en un artículo cargado dinámicamente?**

 We could append that call to the code that loads anarticle, like this:
 Podríamos agregar el llamado al código que carga un "article", como esto:

 ```js
 let article = /*fetch new content from server */
 let article = /*busca contenido nuevo desde un servidor */
 articleElem.innerHTML = article;

 *!*
 */!*
 ```

 ...But imagine, we have many places in the code where we load contents: articles, quizzes, forum posts. Do we need to put thehighlighting call everywhere? That's not very convenient, and also easy to forget.
 ...Pero imagina que tenemos muchos lugares en el código donde cargamos contenido: artículos, cuestionarios, entradas de foros. ¿Necesitamos poner el llamado al "highlighting" en todos lugares? No es muy conveniente, y es fácil de olvidar además.

 And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads contents dynamically, and we'd like to add syntaxhighlighting to it. No one likes to patch third-party scripts.
 ¿Y si el contenido es cargado por un módulo de terceras partes? Por ejemplo tenemos un foro, escrito por algún otro, que carga contenido dinámicamente y quisiéramos añadirle sintaxis dehighlighting. A nadie le gusta emparchar scripts de terceras partes.

 Luckily, there's another option.
 Afortunadamente hay otra opción.

 We can use`MutationObserver`to automatically detect when code snippets are inserted in the page and highlight them.
 Podemos usar`MutationObserver`para detectar automáticamente cuándo los fragmentos de código son insertados en la página y resaltarlos.

 So we'll handle thehighlighting functionality in one place, relieving us from the need to integrate it.
 Entonces manejaremos la funcionalidad de "highlighting" en un único lugar, liberándonos de la necesidad de integrarlo.

 ###Dynamichighlightdemo
 ###Demo dehighlightdinámico

 Here's the working example.
 Aquí el ejemplo funcionando.

 If you run this code, it starts observing the element below and highlighting any code snippets that appear there:
 Si ejecutas el código, este comienza a observar el elemento debajo y resalta cualquier fragmento de código que aparezca allí:

 ```js run
 let observer = new MutationObserver(mutations => {

  for(let mutation of mutations) {
    // examinenew nodes, is there anything to highlight?
    // examinenodos nuevos, ¿hay algo para resaltar?

    for(let node of mutation.addedNodes) {
      //we track only elements, skip other nodes (e.g. text nodes)
      //seguimos elementos solamente, saltamos los otros nodos (es decir nodos de texto)
      if (!(node instanceof HTMLElement)) continue;

      //check the inserted element for being a code snippet
      //verificamos que el elemento insertado sea un fragmento de código
      if (node.matches('pre[class*="language-"]')) {
        Prism.highlightElement(node);
      }

      //or maybe there's a code snippet somewhere in its subtree?
      //¿o tal vez haya un fragmento de código en su sub-árbol?
      for(let elem of node.querySelectorAll('pre[class*="language-"]')) {
        Prism.highlightElement(elem);
      }
 observer.observe(demoElem, {childList: true, subtree: true});
 ```

 Here, below, there's anHTML-element and JavaScriptthat dynamically fills it using `innerHTML`.
 Aquí, abajo, hay un elementoHTML y JavaScriptque lo llena dinámicamente usando `innerHTML`.

 Please run the previous code (above, observes that element), and then the code below. You'll see how`MutationObserver`detects and highlights the snippet.
 Por favor ejecuta el código anterior (arriba, que observa aquel elemento) y luego el código de abajo. Verás cómo`MutationObserver`detecta y resalta el fragmento.

 <p id="highlight-demo" style="border: 1px solid #ddd">A demo-element with <code>id="highlight-demo"</code>, run the code above to observe it.</p>

 The following code populates its `innerHTML`,that causes the`MutationObserver`to react and highlight its contents:
 El siguiente código llena su `innerHTML`,lo que causa que`MutationObserver`reaccione y resalte su contenido:

 ```js run
 let demoElem = document.getElementById('highlight-demo');

 //dynamically insert content with code snippets
 //inserta contenido con fragmentos de código
 demoElem.innerHTML = `A code snippet is below:
  <pre class="language-javascript"><code> let hello = "world!"; </code></pre>
  <div>Another one:</div>
 `;
 ```

 Now we have `MutationObserver`that can track allhighlighting in observed elements or the whole`document`. We can add/remove code snippets inHTMLwithout thinking about it.
 Ahora tenemos un `MutationObserver`que puede rastrear todo el "highlighting" en los elementos observados del`document` entero. Podemos agregar o quitar fragmentos de código en elHTMLsin siquiera pensar en ello.

 ##Additional methods
 ##Métodos adicionales

 There's a method to stop observing the node:
 Hay un método para detener la observación del nodo:

 - `observer.disconnect()` --stops the observation.
 - `observer.disconnect()` --detiene la observación.

 When we stop the observing, it might be possible that some changes were not processed by the observer yet.
 Cuando detenemos la observación, algunos cambios todavía podrían quedar sin ser procesados por el observador.

 - `observer.takeRecords()` --gets a list of unprocessed mutation records, those that happened, but the callback did not handle them.
 - `observer.takeRecords()` --obtiene una lista de registros de mutaciones sin procesar, aquellos que ocurrieron pero el callback no manejó.

 These methods can be used together, like this:
 Estos métodos pueden ser usados juntos, como esto:

 ```js
 //we'd like to stop tracking changes
 //quisiéramos detener el rastreo de cambios
 observer.disconnect();

 //handle unprocessed some mutations
 //manejar algunas mutaciones que no fueron procesadas
 let mutationRecords = observer.takeRecords();
 ...
 ```

 ```smart header="Garbage collection interaction"
 Observers use weak references to nodes internally. That is: if a node is removed from DOM, and becomes unreachable, then it becomes garbage collected.
 ```smart header="Interacción con la recolección de basura"
 Los observadores usan internamente referencias débiles. Esto es: si un nodo es quitado del DOM y se hace inalcanzable, se vuelve basura a ser recolectada.

 The mere fact that aDOMnode is observed doesn't prevent the garbage collection.
 El mero hecho de que un nodoDOMsea observado no evita la recolección de basura.
 ```

 ##Summary
 ##Resumen

 `MutationObserver`can react on changes inDOM:attributes, added/removed elements, text content.
 `MutationObserver`puede reaccionar a cambios en elDOM:atributos, elementos añadidos y quitados, contenido de texto.

 We can use it to track changes introduced by other parts of our code, as well as to integrate with third-party scripts.
 Podemos usarlo para rastrear cambios introducidos por otras partes de nuestro código o bien para integrarlo con scripts de terceras partes.

 `MutationObserver`can track any changes. The config "what to observe" options are used for optimizations, not to spend resources on unneededcallbackinvocations.
 `MutationObserver`puede rastrear cualquier cambio. Las opciones de `config` permiten establecer qué se va a observar, se usa para optimización y no desperdiciar recursos en llamados alcallbackinnecesarios.
Original file line number	Diff line number	Diff line change
		@@ -1,82 +1,82 @@

		# Mutation observer

		`MutationObserver`is a built-in object that observes aDOMelement and fires acallbackin case of changes.
		`MutationObserver`es un objeto incorporado que observa un elementoDOMy dispara uncallbackcuando hay cambios en él.

		We'll first take a look at the syntax, and then explore areal-world use case, to see where such thing may be useful.
		Primero veremos su sintaxis, luego exploraremos un caso de la vidareal para ver dónde puede ser útil.

		##Syntax
		##Sintaxis

		`MutationObserver`is easy to use.
		`MutationObserver`es fácil de usar.

		First, we create an observer with a callback-function:
		Primero creamos un observador con una función callback:

		```js
		let observer = new MutationObserver(callback);
		```

		And then attach it to a DOM node:
		Y luego lo vinculamos a un nodo DOM:

		```js
		observer.observe(node, config);
		```

		`config`is an object with boolean options "what kind of changes to react on":
		- `childList` --changes in the direct children of `node`,
		- `subtree` --in all descendants of `node`,
		- `attributes` --attributes of `node`,
		- `attributeFilter` --an arrayof attribute names, to observe only selected ones.
		- `characterData` --whether to observe`node.data`(text content),
		`config`es un objeto con opciones booleanas "a qué clase de cambios reaccionar":
joaquinelio marked this conversation as resolved. Show resolvedHide resolved
		- `childList` --cambios en los hijos directos de `node`,
		- `subtree` --en todos los descendientes de `node`,
		- `attributes` --atributos de `node`,
		- `attributeFilter` --un arrayde nombres de atributos, para observar solamente a los seleccionados,
		- `characterData` --establece si debe observar cambios de texto en`node.data`o no,

		Few other options:
		- `attributeOldValue` --if`true`,pass both the old and the new value of attribute tocallback (see below),otherwise only the new one (needs`attributes` option),
		- `characterDataOldValue` --if`true`,pass both the old and the new value of`node.data`tocallback (see below),otherwise only the new one (needs`characterData` option).
		Algunas otras opciones:
		- `attributeOldValue` --si es`true`,tanto el valor viejo como el nuevo del atributo son pasados alcallback (ver abajo),de otro modo pasa solamente el nuevo (necesita la opción`attributes`),
		- `characterDataOldValue` --si es`true`,tanto el valor viejo como el nuevo de`node.data`son pasados alcallback (ver abajo),de otro modo pasa solamente el nuevo (necesita la opción`characterData`).

		Then after any changes, the `callback`is executed: changes are passed in the first argument as a list of[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord) objects, and the observer itself as the second argument.
		Entonces, después de cualquier cambio, el `callback`es ejecutado: los cambios son pasados en el primer argumento como una lista objetos[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord), y el observador en sí mismo como segundo argumento.

		[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord)objects have properties:
		Los objetos[MutationRecord](https://dom.spec.whatwg.org/#mutationrecord)tienen como propiedades:

		- `type` --mutation type, one of
		- `"attributes"`:attribute modified
		- `"characterData"`:data modified, used for text nodes,
		- `"childList"`:child elements added/removed,
		- `target` --where the change occurred: an element for `"attributes"`,or text node for`"characterData"`,or an element for a`"childList"` mutation,
		- `addedNodes/removedNodes`--nodes that were added/removed,
		- `previousSibling/nextSibling` --the previous and next sibling to added/removed nodes,
		- `attributeName/attributeNamespace` --the name/namespace (for XML)of the changed attribute,
		- `oldValue` --the previous value, only for attribute or text changes, if the corresponding option is set `attributeOldValue`/`characterDataOldValue`.
		- `type` --tipo de mutación, uno de:
		- `"attributes"`:atributo modificado,
		- `"characterData"`:dato modificado, usado para nodos de texto,
		- `"childList"`:elementos hijos agregados o quitados,
		- `target` --dónde ocurrió el cambio: un elemento para `"attributes"`,o un nodo de texto para`"characterData"`,o un elemento para una mutación de`"childList"`,
		- `addedNodes/removedNodes` --nodos que fueron agregados o quitados,
		- `previousSibling/nextSibling` --los nodos "hermanos", previos y siguientes a los nodos agregados y quitados,
		- `attributeName/attributeNamespace` --el nombre onamespace (para XML)del atributo cambiado,
		- `oldValue` --el valor previo, solamente cambios de atributo o cambios de texto si se establece la opción correspondiente `attributeOldValue`/`characterDataOldValue`.

		For example, here's a`<div>`with a`contentEditable` attribute. That attribute allows us to focus on it and edit.
		Por ejemplo, aquí hay un`<div>`con un atributo`contentEditable`. Ese atributo nos permite poner el foco en él y editarlo.

		```html run
		<div contentEditable id="elem">Click and <b>edit</b>, please</div>

		<script>
		let observer = new MutationObserver(mutationRecords => {
		console.log(mutationRecords); // console.log(the changes)
		console.log(mutationRecords); // console.log(los cambios)
		});

		//observe everything except attributes
		//observa todo exceptuando atributos
		observer.observe(elem, {
		childList: true, //observe direct children
		subtree: true, //and lower descendants too
		characterDataOldValue: true //pass old data tocallback
		childList: true, //observa hijos directos
		subtree: true, //y descendientes inferiores también
		characterDataOldValue: true //pasa el dato viejo alcallback
		});
		</script>
		```

		If we run this code in the browser, then focus on the given`<div>`and change the text inside`<b>edit</b>`, `console.log`will show one mutation:
		Si ejecutamos este código en el navegador, el foco en el`<div>`dado y el cambio en texto dentro de`<b>edit</b>`, `console.log`mostrará una mutación:

		```js
		mutationRecords = [{
		type: "characterData",
		oldValue: "edit",
		target: <text node>,
		//other properties empty
		//otras propiedades vacías
		}];
		```

		If we make more complex editing operations, e.g. remove the `<b>edit</b>`,the mutation event may contain multiple mutation records:
		Si hacemos operaciones de edición más complejas, como eliminar el `<b>edit</b>`,el evento de mutación puede contener múltiples registros de mutación:

		```js
		mutationRecords = [{
Expand All		@@ -85,75 +85,75 @@ mutationRecords = [{
		removedNodes: [<b>],
		nextSibling: <text node>,
		previousSibling: <text node>
		//other properties empty
		//otras propiedades vacías
		}, {
		type: "characterData"
		target: <text node>
		// ...mutation details depend on how the browser handles such removal
		//it may coalesce two adjacent text nodes "edit "and ", please"into one node
		//or it may leave them separate text nodes
		// ...detalles de mutación dependen de cómo el navegador maneja tal eliminación
		//puede unir dos nodos de texto adyacentes "edit "y ", please"en un nodo
		//o puede dejarlos como nodos de texto separados
		}];
		```

		So, `MutationObserver`allows to react on any changes within DOM subtree.
		Así, `MutationObserver`permite reaccionar a cualquier cambio dentro del subárbol DOM.

		##Usage for integration
		##Uso para integración

		When such thing may be useful?
		¿Cuándo puede ser práctico esto?

		Imagine the situation when you need to add a third-party script that contains useful functionality, but also does something unwanted, e.g. shows ads `<div class="ads">Unwanted ads</div>`.
		Imagina la situación cuando necesitas añadir un script de terceros que contiene funcionalidad útil pero que también hace algo no deseado, por ejemplo añadir publicidad `<div class="ads">Unwanted ads</div>`.

		Naturally, the third-partyscriptprovidesnomechanisms to remove it.
		Naturalmente elscriptde terceras partesnoproporciona mecanismos para removerlo.

		Using `MutationObserver`, we can detect when the unwanted element appears in our DOMand remove it.
		Usando `MutationObserver` podemos detectar cuándo aparece el elemento no deseado en nuestro DOMy removerlo.

		There are other situations when a third-partyscriptadds something into our document, and we'd like to detect, when it happens, to adapt our page, dynamically resize something etc.
		Hay otras situaciones, como cuando unscriptde terceras partes agrega algo en nuestro documento y quisiéramos detectarlo para adaptar nuestra página y cambiar el tamaño de algo dinámicamente, etc.

		`MutationObserver`allows to implement this.
		`MutationObserver`permite implementarlo.

		##Usage for architecture
		##Uso para arquitectura

		There are also situations when`MutationObserver`is good from architectural standpoint.
		Hay también situaciones donde`MutationObserver`es bueno desde el punto de vista de la arquitectura.

		Let's say we're making a website about programming. Naturally, articles and other materials may contain source code snippets.
		Digamos que estamos haciendo un sitio web acerca de programación. Naturalmente, los artículos y otros materiales pueden contener fragmentos de código.

		Such snippet in anHTMLmarkup looks like this:
		Tal fragmento en un markupHTMLse ve como esto:

		```html
		...
		<pre class="language-javascript"><code>
		//here's the code
		//aquí el código
		let hello = "world";
		</code></pre>
		...
		```

		Also we'll use a JavaScript highlighting library on our site, e.g.[Prism.js](https://prismjs.com/).A call to `Prism.highlightElem(pre)`examines the contents of such`pre`elements and adds into them specialtagsand stylesfor colored syntax highlighting, similar to what you see in examples here, at this page.
		También usaremos una librería JavaScriptde "highlighting" para resaltar elementos en nuestro sitio, por ejemplo[Prism.js](https://prismjs.com/).Una llamada a `Prism.highlightElem(pre)`examina el contenido de tales elementos`pre`y les agregatagsy stylesespeciales para obtener sintaxis resaltada con color, similares a los que ves en esta página.

		When exactly to run that highlighting method? We can do it on `DOMContentLoaded` event, or at the bottom of the page. At that moment we have ourDOMready, can search for elements`pre[class*="language"]`and call `Prism.highlightElem`on them:
		¿Exactamente cuándo ejecutar tal método de highlighting? Podemos hacerlo en el evento `DOMContentLoaded`, o al final de la página. En el momento en que tenemos nuestroDOMlisto buscamos los elementos`pre[class*="language"]`y llamamos `Prism.highlightElem`en ellos:

		```js
		//highlight all code snippets on the page
		//resaltar todos los fragmentos de código en la página
		document.querySelectorAll('pre[class*="language"]').forEach(Prism.highlightElem);
		```

		Everything'ssimpleso far, right? There are`<pre>`code snippets inHTML, we highlight them.
		Todo essimplehasta ahora, ¿verdad? Hay fragmentos de código`<pre>`enHTML y los resaltamos.

		Now let's go on. Let's say we're going to dynamically fetch materials from a server. We'll study methods for that [later in the tutorial](info:fetch). For now it only matters that we fetch anHTMLarticle from a webserver and display it on demand:
		Continuemos. Digamos que vamos a buscar dinámicamente material desde un servidor. Estudiaremos métodos para ello [más adelante](info:fetch) en el tutorial. Por ahora solamente importa que buscamos un artículoHTMLdesde un servidor web y lo mostramos bajo demanda:

		```js
		let article = /fetch new content from server /
		let article = /busca contenido nuevo desde un servidor /
		articleElem.innerHTML = article;
		```

		The new`article`HTML may contain code snippets. We need to call`Prism.highlightElem`on them, otherwise they won't get highlighted.
		El nuevo elemento HTML`article`puede contener fragmentos de código. Necesitamos llamar`Prism.highlightElem`en ellos, de otro modo no se resaltarían.

		Where and when to call`Prism.highlightElem`for a dynamically loaded article?
		¿Dónde y cuándo llamar`Prism.highlightElem`en un artículo cargado dinámicamente?

		We could append that call to the code that loads anarticle, like this:
		Podríamos agregar el llamado al código que carga un "article", como esto:

		```js
		let article = /fetch new content from server /
		let article = /busca contenido nuevo desde un servidor /
		articleElem.innerHTML = article;

		!
Expand All		@@ -162,38 +162,38 @@ snippets.forEach(Prism.highlightElem);
		/!
		```

		...But imagine, we have many places in the code where we load contents: articles, quizzes, forum posts. Do we need to put thehighlighting call everywhere? That's not very convenient, and also easy to forget.
		...Pero imagina que tenemos muchos lugares en el código donde cargamos contenido: artículos, cuestionarios, entradas de foros. ¿Necesitamos poner el llamado al "highlighting" en todos lugares? No es muy conveniente, y es fácil de olvidar además.

		And what if the content is loaded by a third-party module? E.g. we have a forum written by someone else, that loads contents dynamically, and we'd like to add syntaxhighlighting to it. No one likes to patch third-party scripts.
		¿Y si el contenido es cargado por un módulo de terceras partes? Por ejemplo tenemos un foro, escrito por algún otro, que carga contenido dinámicamente y quisiéramos añadirle sintaxis dehighlighting. A nadie le gusta emparchar scripts de terceras partes.

		Luckily, there's another option.
		Afortunadamente hay otra opción.

		We can use`MutationObserver`to automatically detect when code snippets are inserted in the page and highlight them.
		Podemos usar`MutationObserver`para detectar automáticamente cuándo los fragmentos de código son insertados en la página y resaltarlos.

		So we'll handle thehighlighting functionality in one place, relieving us from the need to integrate it.
		Entonces manejaremos la funcionalidad de "highlighting" en un único lugar, liberándonos de la necesidad de integrarlo.

		###Dynamichighlightdemo
		###Demo dehighlightdinámico

		Here's the working example.
		Aquí el ejemplo funcionando.

		If you run this code, it starts observing the element below and highlighting any code snippets that appear there:
		Si ejecutas el código, este comienza a observar el elemento debajo y resalta cualquier fragmento de código que aparezca allí:

		```js run
		let observer = new MutationObserver(mutations => {

		for(let mutation of mutations) {
		// examinenew nodes, is there anything to highlight?
		// examinenodos nuevos, ¿hay algo para resaltar?

		for(let node of mutation.addedNodes) {
		//we track only elements, skip other nodes (e.g. text nodes)
		//seguimos elementos solamente, saltamos los otros nodos (es decir nodos de texto)
		if (!(node instanceof HTMLElement)) continue;

		//check the inserted element for being a code snippet
		//verificamos que el elemento insertado sea un fragmento de código
		if (node.matches('pre[class*="language-"]')) {
		Prism.highlightElement(node);
		}

		//or maybe there's a code snippet somewhere in its subtree?
		//¿o tal vez haya un fragmento de código en su sub-árbol?
		for(let elem of node.querySelectorAll('pre[class*="language-"]')) {
		Prism.highlightElement(elem);
		}
Expand All		@@ -207,18 +207,18 @@ let demoElem = document.getElementById('highlight-demo');
		observer.observe(demoElem, {childList: true, subtree: true});
		```

		Here, below, there's anHTML-element and JavaScriptthat dynamically fills it using `innerHTML`.
		Aquí, abajo, hay un elementoHTML y JavaScriptque lo llena dinámicamente usando `innerHTML`.

		Please run the previous code (above, observes that element), and then the code below. You'll see how`MutationObserver`detects and highlights the snippet.
		Por favor ejecuta el código anterior (arriba, que observa aquel elemento) y luego el código de abajo. Verás cómo`MutationObserver`detecta y resalta el fragmento.

		<p id="highlight-demo" style="border: 1px solid #ddd">A demo-element with <code>id="highlight-demo"</code>, run the code above to observe it.</p>

		The following code populates its `innerHTML`,that causes the`MutationObserver`to react and highlight its contents:
		El siguiente código llena su `innerHTML`,lo que causa que`MutationObserver`reaccione y resalte su contenido:

		```js run
		let demoElem = document.getElementById('highlight-demo');

		//dynamically insert content with code snippets
		//inserta contenido con fragmentos de código
		demoElem.innerHTML = `A code snippet is below:
		<pre class="language-javascript"><code> let hello = "world!"; </code></pre>
		<div>Another one:</div>
Expand All		@@ -228,39 +228,39 @@ demoElem.innerHTML = `A code snippet is below:
		`;
		```

		Now we have `MutationObserver`that can track allhighlighting in observed elements or the whole`document`. We can add/remove code snippets inHTMLwithout thinking about it.
		Ahora tenemos un `MutationObserver`que puede rastrear todo el "highlighting" en los elementos observados del`document` entero. Podemos agregar o quitar fragmentos de código en elHTMLsin siquiera pensar en ello.

		##Additional methods
		##Métodos adicionales

		There's a method to stop observing the node:
		Hay un método para detener la observación del nodo:

		- `observer.disconnect()` --stops the observation.
		- `observer.disconnect()` --detiene la observación.

		When we stop the observing, it might be possible that some changes were not processed by the observer yet.
		Cuando detenemos la observación, algunos cambios todavía podrían quedar sin ser procesados por el observador.

		- `observer.takeRecords()` --gets a list of unprocessed mutation records, those that happened, but the callback did not handle them.
		- `observer.takeRecords()` --obtiene una lista de registros de mutaciones sin procesar, aquellos que ocurrieron pero el callback no manejó.

		These methods can be used together, like this:
		Estos métodos pueden ser usados juntos, como esto:

		```js
		//we'd like to stop tracking changes
		//quisiéramos detener el rastreo de cambios
		observer.disconnect();

		//handle unprocessed some mutations
		//manejar algunas mutaciones que no fueron procesadas
		let mutationRecords = observer.takeRecords();
		...
		```

		```smart header="Garbage collection interaction"
		Observers use weak references to nodes internally. That is: if a node is removed from DOM, and becomes unreachable, then it becomes garbage collected.
		```smart header="Interacción con la recolección de basura"
		Los observadores usan internamente referencias débiles. Esto es: si un nodo es quitado del DOM y se hace inalcanzable, se vuelve basura a ser recolectada.

		The mere fact that aDOMnode is observed doesn't prevent the garbage collection.
		El mero hecho de que un nodoDOMsea observado no evita la recolección de basura.
		```

		##Summary
		##Resumen

		`MutationObserver`can react on changes inDOM:attributes, added/removed elements, text content.
		`MutationObserver`puede reaccionar a cambios en elDOM:atributos, elementos añadidos y quitados, contenido de texto.

		We can use it to track changes introduced by other parts of our code, as well as to integrate with third-party scripts.
		Podemos usarlo para rastrear cambios introducidos por otras partes de nuestro código o bien para integrarlo con scripts de terceras partes.

		`MutationObserver`can track any changes. The config "what to observe" options are used for optimizations, not to spend resources on unneededcallbackinvocations.
		`MutationObserver`puede rastrear cualquier cambio. Las opciones de `config` permiten establecer qué se va a observar, se usa para optimización y no desperdiciar recursos en llamados alcallbackinnecesarios.