GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
GeezerVison is showing github.com — DOM tree by dev-balza · Pull Request #264 · javascript-tutorial/es.javascript.info ConversationFirst translation translation #2
|
There was an error while loading. Please reload this page.
|
Please make the requested changes. After it, add a comment "/done". |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
@cortizg estoy revisando... |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
digo para no hacer 2 revisiones a la vez |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
algunos cambios
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| document.body.style.background = 'red'; // establece un color de fondo rojo | ||
|
|
||
| setTimeout(() => document.body.style.background = '', 3000); // return back | ||
| setTimeout(() => document.body.style.background = '', 3000); // devolución |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| setTimeout(() => document.body.style.background = '', 3000); // devolución | |
| setTimeout(() => document.body.style.background = '', 3000); // volver atrás |
en este caso no se trata de una devolución, sino de volver al color original
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| - `offsetWidth` -- the node width (in pixels) | ||
| - ...and so on. | ||
| - `innerHTML` -- contenido HTML del nodo. | ||
| - `offsetWidth` -- anchura del nodo (en píxeles). |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| - `offsetWidth` -- anchura del nodo (en píxeles). | |
| - `offsetWidth` -- ancho del nodo (en píxeles). |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| ## Un ejemplo del DOM | ||
|
|
||
| Let's start with the following simple document: | ||
| Comencemos con un documento sencillo, descrito a continuación: |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Comencemos con un documento sencillo, descrito a continuación: | |
| Comencemos con el siguiente documento simple: |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| Comencemos con un documento sencillo, descrito a continuación: | ||
|
|
||
| ```html run no-beautify | ||
| ```ejecución html sin formatear |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| ```ejecución html sin formatear | |
| ```html run no-beautify |
éste código no se debe traducir, es código interno
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
|
||
| ```online | ||
| On the picture above, you can click on element nodes and their children will open/collapse. | ||
| ```conectado |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| ```conectado | |
| ```online |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| 1. `document` -- el "punto de entrada" en el DOM. | ||
| 2. nodos de elementos -- Etiquetas-HTML, los bloques construcción del árbol. | ||
| 3. nodos de texto -- contienen texto. | ||
| 4. comentarios -- a veces podemos colocar ocasiones información allí, no se mostrará, pero JS puede leerla desde el DOM. |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| 4. comentarios -- a veces podemos colocar ocasiones información allí, no se mostrará, pero JS puede leerla desde el DOM. | |
| 4. comentarios -- a veces podemos colocar información allí, no se mostrará, pero JS puede leerla desde el DOM. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| ## Véalo usted mismo | ||
|
|
||
| To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant. | ||
| Para ver la estructura del DOM en tiempo real, intente [visor en vivo del DOM](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante. |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Para ver la estructura del DOM en tiempo real, intente [visor en vivo del DOM](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante. | |
| Para ver la estructura del DOM en tiempo real, intente [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|  | ||
|
|
||
| You can see the DOM, click on elements, see their details and so on. | ||
| Puedes mirar el DOM, hacer clic sobre los elementos, ver sus detalles, etc. |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Puedes mirar el DOM, hacer clic sobre los elementos, ver sus detalles, etc. | |
| Puedes ver el DOM, hacer clic sobre los elementos, ver sus detalles, etc. |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| Hacer clic en el botón <span class="devtools" style="background-position:-328px -124px"></span> ubicado en la esquina superior izquierda nos permite elegir un nodo desde la página web utilizando un "mouse" (u otros dispositivos de puntero) e "inspeccionar" (desplazarse hasta él en la pestaña elementos). Esto funciona muy bien cuando tenemmos una página HTML enorme (y el DOM correspondiente es enorme) y nos gustaría ver la posición de un elemento en particular. | ||
|
|
||
| Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu. | ||
| Otra forma de realizarlo sería hacer clic derecho en la página web y en el menú contextual elegir la opción "inspeccionar". |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| Otra forma de realizarlo sería hacer clic derecho en la página web y en el menú contextual elegir la opción "inspeccionar". | |
| Otra forma de realizarlo sería hacer clic derecho en la página web y en el menú contextual elegir la opción "Inspeccionar Elemento". |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
nótese que la palabra fue escrita con mayúscula en el documento original, denotando que se trata de el nombre oficial o predeterminado en el navegador Chrome. "Inspect" en la versión español el navegador tiene "Inspeccionar Elemento"
Sorry, something went wrong.
There was an error while loading. Please reload this page.
| En la parte derecha de las herramientos encontramos las siguientes sub-pestañas: | ||
| - **Styles** -- podemos ver CSS aplicado al elemento actual regla por regla, incluidas las reglas integradas (gris). Casi todo puede ser editado en el lugar, incluyendo las dimensiones/márgenes/relleno de la siguiente caja. | ||
| - **Computed** -- nos permite ver cada propiedad CSS aplicada al elemento: para cada propiedad podemos ver la regla que la provee (inluida la herencia CSS y demás). | ||
| - **Event Listeners** -- nos ayuda a ver los escuchadores de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial). |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| - **Event Listeners** -- nos ayuda a ver los escuchadores de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial). | |
| - **Event Listeners** -- nos ayuda a ver los listener de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial). |
Estoy viendo que en MDN están usando listener
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Please make the requested changes. After it, add a comment "/done". |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
hay comentario y cambios necesarios
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Please make the requested changes. After it, add a comment "/done". |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
otras observaciones
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
| <!-- comment --> | ||
| <!-- comentario --> | ||
| */!* | ||
| <li>...and cunning animal!</li> |
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
| <li>...and cunning animal!</li> | |
| <li>...y el astuto animal!</li> |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Please make the requested changes. After it, add a comment "/done". |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
mejor como review
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
|
Please make the requested changes. After it, add a comment "/done". |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>
Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>
Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>
Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>
Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>
Co-authored-by: Carlos Ortiz Gutiérrez <[email protected]>
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
necesito una segunda opinión
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Please make the requested changes. After it, add a comment "/done". |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
/done
/done
|
/done |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Una vez vean aceptados los cambios, por favor denle a "aprobar" para así poder hacer merge |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
/done |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
The reason will be displayed to describe this comment to others. Learn more.
ok
Sorry, something went wrong.
There was an error while loading. Please reload this page.
|
Thank you 💖 I updated the Progress Issue #17 🎉 🎉 🎉 |
Sorry, something went wrong.
There was an error while loading. Please reload this page.
There was an error while loading. Please reload this page.
Successfully merging this pull request may close these issues.
There was an error while loading. Please reload this page.