Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

DOM tree#264

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
EzequielCaste merged 16 commits intojavascript-tutorial:masterfromdev-balza:rama-primera
Jun 24, 2020
Merged

DOM tree#264

EzequielCaste merged 16 commits intojavascript-tutorial:masterfromdev-balza:rama-primera
Jun 24, 2020

Conversation

dev-balza
Copy link
Contributor

Listo la traducción de los archivos contenidos en la carpeta asignada

@CLAassistant
Copy link

CLAassistant commentedJun 19, 2020•
edited
Loading

CLA assistant check
All committers have signed the CLA.

@vplentinaxvplentinax changed the titleRama primeraDOM treeJun 20, 2020
@EzequielCasteEzequielCaste self-requested a reviewJune 20, 2020 12:34
@javascript-translate-bot

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

@EzequielCaste
Copy link
Contributor

@cortizg estoy revisando...

@EzequielCaste
Copy link
Contributor

digo para no hacer 2 revisiones a la vez

Copy link
Contributor

@EzequielCasteEzequielCaste left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

algunos cambios


setTimeout(() => document.body.style.background = '', 3000); //return back
setTimeout(() => document.body.style.background = '', 3000); //devolución
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
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

- `offsetWidth` -- the node width (in pixels)
- ...and so on.
- `innerHTML` -- contenido HTML del nodo.
- `offsetWidth` -- anchura del nodo (en píxeles).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
-`offsetWidth` --anchura del nodo (en píxeles).
-`offsetWidth` --ancho del nodo (en píxeles).


Let's start with the following simple document:
Comencemos con un documento sencillo, descrito a continuación:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
Comencemos conundocumentosencillo, descrito a continuación:
Comencemos conel siguientedocumentosimple:


```htmlrun no-beautify
```ejecuciónhtmlsin formatear
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
```ejecuciónhtmlsin formatear
```htmlrun no-beautify

éste código no se debe traducir, es código interno

@@ -56,34 +56,34 @@ let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,
drawHtmlTree(node1, 'div.domtree', 690, 320);
</script>

```online
On the picture above, you can click on element nodes and their children will open/collapse.
```conectado
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
```conectado
```online

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 JSpuede leerla desde el DOM.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
4. comentarios -- a veces podemos colocar ocasionesinformació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.


To see theDOMstructure 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 aDOMat an instant.
Para ver la estructura delDOMen 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 unDOMal instante.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
Para ver la estructura del DOM en tiempo real, intente[visor en vivo delDOM](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[LiveDOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Simplemente escriba el documento, y se mostrará como un DOM al instante.


![](elk.svg)

You can see theDOM,click on elements, see their details and so on.
Puedes mirar elDOM,hacer clic sobre los elementos, ver sus detalles, etc.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
Puedesmirar el DOM, hacer clic sobre los elementos, ver sus detalles, etc.
Puedesver el DOM, hacer clic sobre los elementos, ver sus detalles, etc.


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".
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
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".

Copy link
Contributor

Choose a reason for 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"

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).
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
-**Event Listeners** -- nos ayuda a ver losescuchadores de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial).
-**Event Listeners** -- nos ayuda a ver loslistener de eventos adjuntos a elementos del DOM (los cubriremos en la siguiente parte del tutorial).

Estoy viendo que en MDN están usandolistener

@javascript-translate-bot

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

Copy link
Contributor

@cortizgcortizg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

hay comentario y cambios necesarios

@javascript-translate-bot

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

Copy link
Contributor

@cortizgcortizg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

otras observaciones

@@ -177,7 +175,7 @@ For example, comments:
<ol>
<li>An elk is a smart</li>
*!*
<!--comment -->
<!--comentario -->
*/!*
<li>...and cunning animal!</li>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

Suggested change
<li>...and cunning animal!</li>
<li>...y el astuto animal!</li>

@javascript-translate-bot

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

Copy link
Contributor

@cortizgcortizg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

mejor como review

@javascript-translate-bot

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
EzequielCasteand others added6 commitsJune 20, 2020 17:21
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Co-authored-by: Carlos Ortiz Gutiérrez <56600925+cortizg@users.noreply.github.com>
Copy link
Contributor

@EzequielCasteEzequielCaste left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

necesito una segunda opinión

@javascript-translate-bot

Please make the requested changes. After it, add a comment "/done".
Then I'll ask for a new review 👻

@cortizg
Copy link
Contributor

/done

@vplentinax
Copy link
Contributor

Una vez vean aceptados los cambios, por favor denle a "aprobar" para así poder hacer merge

@vplentinax
Copy link
Contributor

/done

Copy link
Contributor

@EzequielCasteEzequielCaste left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

ok

@EzequielCasteEzequielCaste merged commitdc48bfc intojavascript-tutorial:masterJun 24, 2020
@javascript-translate-bot

Thank you 💖 I updated the Progress Issue#17 🎉 🎉 🎉

Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers

@cortizgcortizgcortizg requested changes

@EzequielCasteEzequielCasteEzequielCaste approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

6 participants
@dev-balza@CLAassistant@javascript-translate-bot@EzequielCaste@cortizg@vplentinax
[8]ページ先頭
©2009-2025 Movatter.jp