From 0195e03e338d04e29524b66089169dca8b54bce5 Mon Sep 17 00:00:00 2001 From: asa Date: Wed, 5 Feb 2020 11:00:49 -0300 Subject: [PATCH 1/9] introduction --- 2-ui/1-document/03-dom-navigation/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 80054f9d7..4daec0b0b 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -5,17 +5,17 @@ libs: --- -# Walking the DOM +# Percorrendo o DOM -The DOM allows us to do anything with elements and their contents, but first we need to reach the corresponding DOM object, get it into a variable, and then we are able to modify it. +O DOM nos permite fazer qualquer coisa com elementos e seu conteúdo, mas primeiro precisamos alcançar o objeto DOM correspondente. -All operations on the DOM start with the `document` object. From it we can access any node. +Todas as operações no DOM começam com o objeto `document`. Esse é o principal "ponto de entrada" para o DOM. A partir dele, podemos acessar qualquer nó. -Here's a picture of links that allow for travel between DOM nodes: +Aqui está uma imagem das interligações que permitem navegar entre os nós do DOM: ![](dom-links.svg) -Let's discuss them in more detail. +Vamos abordar em mais detalhes. ## On top: documentElement and body From bf8688b724120e0822981041c1f6ed3c50e39d55 Mon Sep 17 00:00:00 2001 From: asa Date: Wed, 5 Feb 2020 12:47:31 -0300 Subject: [PATCH 2/9] section On top: documentElement and body translated --- 2-ui/1-document/03-dom-navigation/article.md | 26 ++++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 4daec0b0b..fe9672ecd 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -17,25 +17,25 @@ Aqui está uma imagem das interligações que permitem navegar entre os nós do Vamos abordar em mais detalhes. -## On top: documentElement and body +## Na parte superior: documentElement and body -The topmost tree nodes are available directly as `document` properties: +Os nós mais acima na árvore do DOM estão disponíveis diretamente como propriedades de `document`: `` = `document.documentElement` -: The topmost document node is `document.documentElement`. That's DOM node of `` tag. +: O mais alto nó de document é `document.documentElement`. Este é o nó do elemento ``. `` = `document.body` -: Another widely used DOM node is the `` element -- `document.body`. +: Outro nó amplamente utilizado é o elemento `` -- `document.body`. `` = `document.head` -: The `` tag is available as `document.head`. +: O elemento `` está acessível como `document.head`. -````warn header="There's a catch: `document.body` can be `null`" -A script cannot access an element that doesn't exist at the moment of running. +````warn header="Há um problema: `document.body` pode ser `null`" +No momento da execução, um script não pode acessar um elemento que ainda não existe. -In particular, if a script is inside ``, then `document.body` is unavailable, because the browser did not read it yet. +Em particular, se um script estiver dentro de ``, então `document.body` estará indisponível, porquê o navegador ainda não o encontrou. -So, in the example below the first `alert` shows `null`: +Portanto, no exemplo abaixo, o primeiro `alert` apresentará ` null`: ```html run @@ -43,7 +43,7 @@ So, in the example below the first `alert` shows `null`: @@ -51,7 +51,7 @@ So, in the example below the first `alert` shows `null`: @@ -59,8 +59,8 @@ So, in the example below the first `alert` shows `null`: ``` ```` -```smart header="In the DOM world `null` means \"doesn't exist\"" -In the DOM, the `null` value means "doesn't exist" or "no such node". +```smart header="No DOM, `null` significa \"não existe\"" +No DOM, o valor `null` significa "não existe" ou "nenhum nó". ``` ## Children: childNodes, firstChild, lastChild From 924a6fbd5540b940826e8be83c151b7e62094468 Mon Sep 17 00:00:00 2001 From: asa Date: Wed, 5 Feb 2020 17:30:53 -0300 Subject: [PATCH 3/9] Children: childNodes, firstChild, lastChild translated --- 2-ui/1-document/03-dom-navigation/article.md | 38 ++++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index fe9672ecd..d8400cf9a 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -63,69 +63,69 @@ Portanto, no exemplo abaixo, o primeiro `alert` apresentará ` null`: No DOM, o valor `null` significa "não existe" ou "nenhum nó". ``` -## Children: childNodes, firstChild, lastChild +## Filhos: childNodes, firstChild, lastChild -There are two terms that we'll use from now on: +Existem dois termos que usaremos a partir de agora: -- **Child nodes (or children)** -- elements that are direct children. In other words, they are nested exactly in the given one. For instance, `` and `` are children of `` element. -- **Descendants** -- all elements that are nested in the given one, including children, their children and so on. +- **Nós filhos** -- elementos que são filhos diretos. Em outras palavras, eles estão exatamente aninhados no elemento pai. Por exemplo, `` e `` são filhos do elemento ``. +- **Descendentes** -- todos os elementos aninhados em um determinado elemento, incluindo filhos, netos, bisnetos e assim por diante. -For instance, here `` has children `
` and `
    ` (and few blank text nodes): +Por exemplo, aqui `` tem `
    ` e `
      ` como filhos (e alguns nós de texto em branco): ```html run -
      Begin
      +
      Começo
      • - Information + Informação
      ``` -...And if we ask for all descendants of ``, then we get direct children `
      `, `
        ` and also more nested elements like `
      • ` (being a child of `
          `) and `` (being a child of `
        • `) -- the entire subtree. +...E se pedirmos todos os descendentes de ``, obteremos os filhos diretos `
          `, `
            ` e também mais elementos aninhados como `
          • ` (sendo filho de `
              `) e `` (sendo filho de `
            • `) -- a subárvore toda. -**The `childNodes` collection provides access to all child nodes, including text nodes.** +**A coleção `childNodes` fornece acesso a todos os nós filhos, incluindo nós de textos.** -The example below shows children of `document.body`: +O exemplo abaixo mostra os filhos de `document.body`: ```html run -
              Begin
              +
              Início
                -
              • Information
                • +
              • Informação
              -
              End
              +
              Fim
              - ...more stuff... + ...mais coisas... ``` -Please note an interesting detail here. If we run the example above, the last element shown is ` From b17d4bf4a6e6de2ea22b8d1e6936a9cc26645651 Mon Sep 17 00:00:00 2001 From: asa Date: Thu, 6 Feb 2020 10:01:26 -0300 Subject: [PATCH 5/9] translated 'and' in section On top --- 2-ui/1-document/03-dom-navigation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 7b8dee7e4..6ed0b4506 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -17,7 +17,7 @@ Aqui está uma imagem das interligações que permitem navegar entre os nós do Vamos abordar em mais detalhes. -## Na parte superior: documentElement and body +## Na parte superior: documentElement e body Os nós mais acima na árvore do DOM estão disponíveis diretamente como propriedades de `document`: From d0a9ba47e83390714b191a09c3fa1db4bdbb3a9e Mon Sep 17 00:00:00 2001 From: asa Date: Thu, 6 Feb 2020 10:44:03 -0300 Subject: [PATCH 6/9] Siblings and the parent translated --- 2-ui/1-document/03-dom-navigation/article.md | 22 ++++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 6ed0b4506..2a9b5f6ff 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -180,30 +180,30 @@ Por favor, não! O loop `for..in` itera sobre todas as propriedades enumeráveis ```` -## Siblings and the parent +## Irmãos e pais -*Siblings* are nodes that are children of the same parent. For instance, `` and `` are siblings: +*Irmãos* são nós filhos do mesmo pai. Por exemplo, `` e `` são irmãos: -- `` is said to be the "next" or "right" sibling of ``, -- `` is said to be the "previous" or "left" sibling of ``. +- É dito que `` é o irmão "próximo" ou "à direita" de ``, +- É dito que `` é o irmão "anterior" ou "à esquerda" de ``. -The parent is available as `parentNode`. +O pai está acessível como `parentNode`. -The next node in the same parent (next sibling) is `nextSibling`, and the previous one is `previousSibling`. +O próximo nó (próximo irmão) no mesmo pai é `nextSibling`, e o anterior é `previousSibling`. -For instance: +Por exemplo: ```html run ``` From 823611785e48cee25f5a9b00ef6c6f7bafc5b2e1 Mon Sep 17 00:00:00 2001 From: asa Date: Thu, 6 Feb 2020 11:56:12 -0300 Subject: [PATCH 7/9] Element-only navigation translated --- 2-ui/1-document/03-dom-navigation/article.md | 40 ++++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 2a9b5f6ff..7347ead12 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -208,60 +208,60 @@ Por exemplo: ``` -## Element-only navigation +## Navegação apenas por elementos -Navigation properties listed above refer to *all* nodes. For instance, in `childNodes` we can see both text nodes, element nodes, and even comment nodes if there exist. +As propriedades de navegação listadas acima se referem a *todos* os nós. Por exemplo, em `childNodes`, podemos ver nós de textos, nós de elementos e até nós de comentários, se existirem. -But for many tasks we don't want text or comment nodes. We want to manipulate element nodes that represent tags and form the structure of the page. +Mas, para muitas tarefas, não queremos nós de textos ou comentários. Queremos manipular nós de elementos que formam a estrutura da página. -So let's see more navigation links that only take *element nodes* into account: +Então, vamos ver mais interligações de navegação que consideram apenas *nós de elementos*: ![](dom-links-elements.svg) -The links are similar to those given above, just with `Element` word inside: +As interligações são semelhantes às apresentadas acima, acrescentando apenas a palavra `Element`: -- `children` -- only those children that are element nodes. -- `firstElementChild`, `lastElementChild` -- first and last element children. -- `previousElementSibling`, `nextElementSibling` -- neighbour elements. -- `parentElement` -- parent element. +- `children` -- somente os nós que são filhos do elemento. +- `firstElementChild`, `lastElementChild` -- primeiro e último elemento filho. +- `previousElementSibling`, `nextElementSibling` -- elementos vizinhos. +- `parentElement` -- elemento pai. -````smart header="Why `parentElement`? Can the parent be *not* an element?" -The `parentElement` property returns the "element" parent, while `parentNode` returns "any node" parent. These properties are usually the same: they both get the parent. +````smart header="Por que `parentElement`? O pai *não* pode ser um elemento?" +A propriedade `parentElement` retorna o "elemento" pai, enquanto `parentNode` retorna "qualquer nó" pai. Essas propriedades geralmente são as mesmas: ambas obtêm o pai. -With the one exception of `document.documentElement`: +Com exceção do `document.documentElement`: ```js run alert( document.documentElement.parentNode ); // document alert( document.documentElement.parentElement ); // null ``` -In other words, the `documentElement` (``) is the root node. Formally, it has `document` as its parent. But `document` is not an element node, so `parentNode` returns it and `parentElement` does not. +Em outras palavras, o `documentElement` (``) é o nó raiz. Formalmente, tem `document` como pai. Mas o `document` não é um nó de elemento, portanto, somente `parentNode` o retorna. `parentElement` não. -This loop travels up from an arbitrary element `elem` to ``, but not to the `document`: +Este laço de repetição percorre de um elemento arbitrário `elem` até ``, mas não até o `document`: ```js while(elem = elem.parentElement) { - alert( elem ); // parent chain till + alert( elem ); // sequência de pais até } ``` ```` -Let's modify one of the examples above: replace `childNodes` with `children`. Now it shows only elements: +Vamos modificar um dos exemplos acima: substitua `childNodes` por `children`. Agora ele mostra apenas elementos: ```html run -
              Begin
              +
              Início
                -
              • Information
                • +
              • Informação
              -
              End
              +
              Fim
              From 42d5618c68b56cd928ac2ca775aba3cafdb0f34f Mon Sep 17 00:00:00 2001 From: asa Date: Thu, 6 Feb 2020 12:03:37 -0300 Subject: [PATCH 8/9] fixed translation --- 2-ui/1-document/03-dom-navigation/article.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 7347ead12..26e59b4db 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -203,7 +203,7 @@ Por exemplo: // depois de vem alert( document.head.nextSibling ); // HTMLBodyElement - // antes de vem + // antes de vem alert( document.body.previousSibling ); // HTMLHeadElement ``` From c64f7589f9d2f06a5e28eeb48f05863a1f9195b4 Mon Sep 17 00:00:00 2001 From: asa Date: Thu, 6 Feb 2020 13:30:22 -0300 Subject: [PATCH 9/9] more links --- 2-ui/1-document/03-dom-navigation/article.md | 56 ++++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/2-ui/1-document/03-dom-navigation/article.md b/2-ui/1-document/03-dom-navigation/article.md index 26e59b4db..0871eafae 100644 --- a/2-ui/1-document/03-dom-navigation/article.md +++ b/2-ui/1-document/03-dom-navigation/article.md @@ -270,59 +270,59 @@ Vamos modificar um dos exemplos acima: substitua `childNodes` por `children`. Ag ``` -## More links: tables [#dom-navigation-tables] +## Mais interligações: tabelas [#dom-navigation-tables] -Till now we described the basic navigation properties. +Até agora, descrevemos as propriedades básicas de navegação. -Certain types of DOM elements may provide additional properties, specific to their type, for convenience. +Certos tipos de elementos DOM podem fornecer propriedades adicionais, específicas ao seu tipo, por conveniência. -Tables are a great example and important particular case of that. +As tabelas são um ótimo exemplo e um importante caso particular disso. -**The ``** element supports (in addition to the given above) these properties: -- `table.rows` -- the collection of `` elements of the table. -- `table.caption/tHead/tFoot` -- references to elements ``, ``. -- `table.tBodies` -- the collection of `` elements (can be many according to the standard). +O elemento **`
              `, `
              `** suporta, além do explicado anteriormente, estas propriedades: +- `table.rows` -- a coleção de elementos `` da tabela. +- `table.caption/tHead/tFoot` -- referências aos elementos ``, ``. +- `table.tBodies` -- a coleção de elementos `` (pode haver muitos, de acordo com o padrão normatizador). -**``, ``, ``** elements provide the `rows` property: -- `tbody.rows` -- the collection of `` inside. +**``, ``, ``** elementos que fornecem a propriedade `rows`: +- `tbody.rows` -- a coleção de `` internas. **``:** -- `tr.cells` -- the collection of ``. -- `tr.sectionRowIndex` -- the position (index) of the given `` inside the enclosing `//`. -- `tr.rowIndex` -- the number of the `` in the table as a whole (including all table rows). +- `tr.cells` -- a coleção de células `` referido. +- `tr.sectionRowIndex` -- a posição (índice) do referido `` dentro de ` / / `. +- `tr.rowIndex` -- a posição da `` na tabela como um todo (incluindo todas as linhas da tabela). -**``. +**``. -An example of usage: +Um exemplo de uso: ```html run height=100
              `, `
              ` and `` cells inside the given `
              ` e `` dentro do `
              ` and ``:** -- `td.cellIndex` -- the number of the cell inside the enclosing `
              ` e ``:** +- `td.cellIndex` -- a posição da célula dentro do `
              - + - +
              onetwoumdois
              threefourtrêsquatro
              ``` -The specification: [tabular data](https://html.spec.whatwg.org/multipage/tables.html). +A especificação: [Informações sobre as tabelas](https://html.spec.whatwg.org/multipage/tables.html). -There are also additional navigation properties for HTML forms. We'll look at them later when we start working with forms. +Também há propriedades de navegação adicionais para formulários HTML. Veremos quando começarmos a trabalhar com formulários. -# Summary +# Resumo -Given a DOM node, we can go to its immediate neighbours using navigation properties. +Quando nos referimos a um nó DOM, podemos ir para seus vizinhos diretos usando propriedades de navegação. -There are two main sets of them: +Existem dois conjuntos principais: -- For all nodes: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`. -- For element nodes only: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`. +- Para todos os nós: `parentNode`, `childNodes`, `firstChild`, `lastChild`, `previousSibling`, `nextSibling`. +- Apenas para nós de elementos: `parentElement`, `children`, `firstElementChild`, `lastElementChild`, `previousElementSibling`, `nextElementSibling`. -Some types of DOM elements, e.g. tables, provide additional properties and collections to access their content. +Alguns tipos de elementos DOM, por exemplo tabelas, fornecem propriedades e coleções adicionais para acessar seu conteúdo.