diff options
Diffstat (limited to 'files/pt-pt/dom')
| -rw-r--r-- | files/pt-pt/dom/document.alinkcolor/index.html | 43 | ||||
| -rw-r--r-- | files/pt-pt/dom/document.bgcolor/index.html | 55 | ||||
| -rw-r--r-- | files/pt-pt/dom/document.cookie/index.html | 85 | ||||
| -rw-r--r-- | files/pt-pt/dom/document.getelementsbyclassname/index.html | 69 | ||||
| -rw-r--r-- | files/pt-pt/dom/dom_reference/index.html | 501 | ||||
| -rw-r--r-- | files/pt-pt/dom/element.appendchild/index.html | 31 | ||||
| -rw-r--r-- | files/pt-pt/dom/element.clientleft/index.html | 47 | ||||
| -rw-r--r-- | files/pt-pt/dom/element.clienttop/index.html | 38 | ||||
| -rw-r--r-- | files/pt-pt/dom/element.clonenode/index.html | 55 | ||||
| -rw-r--r-- | files/pt-pt/dom/element.insertbefore/index.html | 60 | ||||
| -rw-r--r-- | files/pt-pt/dom/element/index.html | 573 | ||||
| -rw-r--r-- | files/pt-pt/dom/selection/index.html | 76 | ||||
| -rw-r--r-- | files/pt-pt/dom/storage/index.html | 108 |
13 files changed, 1741 insertions, 0 deletions
diff --git a/files/pt-pt/dom/document.alinkcolor/index.html b/files/pt-pt/dom/document.alinkcolor/index.html new file mode 100644 index 0000000000..582760a339 --- /dev/null +++ b/files/pt-pt/dom/document.alinkcolor/index.html @@ -0,0 +1,43 @@ +--- +title: document.alinkColor +slug: DOM/document.alinkColor +tags: + - DOM + - DOM 0 + - Gecko + - Referência_do_DOM_Gecko +translation_of: Web/API/Document/alinkColor +--- +<div id="page-top"> + <div class="pageText" id="pageText"> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en">« <a href="/en/Gecko_DOM_Reference" rel="internal" style="text-decoration: none; color: rgb(4, 121, 167);">Referência do DOM Gecko</a></span></p> + <div id="section_1"> + <h3 class="editable" id="Sumário" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;">Sumário</h3> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> + <div style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: rgb(185, 185, 255); font-weight: bold; text-align: center; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px;"> + <p style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Obsoleto</p> + </div> + Retorna ou define a cor de um link ativo no corpo do documento. Um link é ativo durante o tempo entre <code style="color: inherit; font-weight: inherit;">mousedown </code>e <code style="color: inherit; font-weight: inherit;">mouseup </code>eventos. + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> + </div> + <div id="section_2"> + <h3 class="editable" id="Sintaxe" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Sintaxe</span></h3> + <pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);"><em><code>document.alinkColor</code> = </em><em>cor</em> +</pre> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><em><code>color</code></em> é uma string contendo<span style="font-family: Verdana;"> o no</span>me da cor (em inglês), (por exemplo, "blue", "darkblue", etc) ou o valor <span style="font-family: Verdana;">em</span> hexadecimal (por exemplo, <em><span style="font-family: 'Courier New';"><code style="color: inherit; font-weight: inherit;">#0000FF</code></span></em>)</p> + </div> + <div id="section_3"> + <h3 class="editable" id="Notas" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Notas </span></h3> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">O valor padrão para essa propriedade no Mozilla Firefox é o vermelho (<code style="color: inherit; font-weight: inherit;"><span style="font-family: 'Courier New';">#ee0000</span> </code>em hexadecimal).</p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><code style="color: inherit; font-weight: inherit;"><em><span style="font-family: 'Courier New';">document.alinkColor</span></em> </code>é substituído no <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="external nofollow" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Nível 2 HTML </a>. Uma alternativa é o seletor CSS <code style="color: inherit; font-weight: inherit;"><a href="/en/CSS/%3aactive" rel="custom nofollow" style="text-decoration: none; color: rgb(4, 121, 167);">:active</a></code>.</p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Outra alternativa é document.body.aLink, embora isso seja <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">obsoleto em HTML 4.01</a>, em favor da alternativa de CSS.</p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Gecko suporta tanto <code><span style="font-family: 'Courier New';">alinkColor / :activ</span></code><span style="font-family: 'Courier New';"><code>e</code></span> e <code>:focus</code>. Internet Explorer 6 e 7 suportam <code>alinkColor / :active</code> apenas para âncora HTML (<code><a></code>) links e o comportamento é o mesmo que <span style="font-family: 'Courier New';"><code>:focus</code></span> em Gecko. Não há suporte para <code>:focus</code> no IE.</p> + </div> + <div id="section_4"> + <h3 class="editable" id="Especificação" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Especificação</span></h3> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en">DOM Nível 0. Não faz parte do padrão.</span></p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533071(VS.85).aspx" rel="external nofollow" title="http://msdn.microsoft.com/en-us/library/ms533071(VS.85).aspx">MSDN - propriedade :alinkColor</a></span></p> + </div> + </div> +</div> +<p> </p> diff --git a/files/pt-pt/dom/document.bgcolor/index.html b/files/pt-pt/dom/document.bgcolor/index.html new file mode 100644 index 0000000000..5cb60b2712 --- /dev/null +++ b/files/pt-pt/dom/document.bgcolor/index.html @@ -0,0 +1,55 @@ +--- +title: document.bgColor +slug: DOM/document.bgColor +tags: + - DOM + - DOM 0 + - Gecko + - Referência_do_DOM_Gecko +translation_of: Web/API/Document/bgColor +--- +<div id="page-top"> + <div class="pageText" id="pageText"> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en">« <a href="/en/Gecko_DOM_Reference" rel="internal" style="text-decoration: none; color: rgb(4, 121, 167);">Referência do DOM Gecko</a></span></p> + <div id="section_1"> + <h3 class="editable" id="Sumário" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;">Sumário</h3> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> + <div style="border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; background-color: rgb(185, 185, 255); font-weight: bold; text-align: center; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; margin-top: 10px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px;"> + <p style="margin-top: 4px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Obsoleto</p> + </div> + <code style="color: inherit; font-weight: inherit;">bgColor</code> obtém / define a cor de fundo do documento atual. + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> + </div> + <div id="section_2"> + <h3 class="editable" id="Sintaxe" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Sintaxe</span></h3> + <pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);"><em>document.bgColor = </em><em>cor</em> +</pre> + </div> + <div id="section_3"> + <h3 class="editable" id="Parâmetros" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Parâmetros</span></h3> + <ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 25px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <li style="margin-bottom: 0.25em;"><code style="color: inherit; font-weight: inherit;">color é</code> uma seqüência que representa a cor como uma palavra (em inglês) (por exemplo, "red") ou valor em hexadecimal (por exemplo, "<code style="color: inherit; font-weight: inherit;">#Ff0000</code>").</li> + </ul> + </div> + <div id="section_4"> + <h3 class="editable" id="Exemplo" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Exemplo</span></h3> + <pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; font: normal normal normal 12px/normal 'Courier New', 'Andale Mono', monospace; color: rgb(37, 34, 29);"><code>document.bgColor = "darkblue"; </code> +</pre> + </div> + <div id="section_5"> + <h3 class="editable" id="Notas" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Notas</span></h3> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">O valor padrão para essa propriedade no Mozilla Firefox é branco (<code style="color: inherit; font-weight: inherit;">#ffffff </code>em hexadecimal).</p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><code style="color: inherit; font-weight: inherit;">document.bgColor </code>é substituído no <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268" rel="external nofollow" title="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Nível 2 HTML </a>. A alternativa recomendada é o uso do estilo CSS <code><a href="/pt/CSS/background-color" title="https://developer.mozilla.org/pt/CSS/background-color">background-color</a></code> que pode ser acessada através do DOM com <code>document.body.style.backgroundColor</code>. Outra alternativa é document.body.bgColor, embora este também seja obsoleto em HTML 4.01 em favor da alternativa de CSS.</p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> </p> + </div> + <div id="section_6"> + <h3 class="editable" id="Especificação" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0.5em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; font-weight: normal; font-family: Georgia, 'Times New Roman', Times, serif; color: rgb(43, 39, 32); font-size: 21px; border-bottom-width: 1px; border-bottom-style: solid;"><span>Especificação</span></h3> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en">DOM Nível 0. Não faz parte do padrão .</span></p> + <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.7em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"><span class="lang lang-en"><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533506(VS.85).aspx" rel="external nofollow" title="http://msdn.microsoft.com/en-us/library/ms533506(VS.85).aspx">MSDN: Propriedade bgColor</a></span></p> + </div> + </div> +</div> +<div class="collapsed" id="languages" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: absolute; top: 0px; right: 15px;"> + <h5 id="Idiomas">Idiomas</h5> +</div> +<p> </p> diff --git a/files/pt-pt/dom/document.cookie/index.html b/files/pt-pt/dom/document.cookie/index.html new file mode 100644 index 0000000000..aa309f8a95 --- /dev/null +++ b/files/pt-pt/dom/document.cookie/index.html @@ -0,0 +1,85 @@ +--- +title: document.cookie +slug: DOM/document.cookie +translation_of: Web/API/Document/cookie +--- +<div id="page-top"> +<div class="pageText" id="pageText"> +<p>« <a href="/pt-PT/Gecko_DOM_Reference">Referência do DOM Gecko</a></p> + +<div id="section_1"> +<h3 id="Sumário">Sumário</h3> + +<p>Obter e definir os cookies associados com o documento atual.</p> +</div> + +<div id="section_2"> +<h3 id="Sintaxe">Sintaxe</h3> + +<pre class="eval"><em>allCookies </em>= <em>document.</em>cookie;</pre> + +<ul> + <li><code>allCookies </code>é uma string contendo uma lista separada por vírgula de "cookies" (isto é, <code><em>chave </em>= <em>valor </em></code>pares).</li> +</ul> + +<pre class="eval"><em>updatedCookie = document.cookie;</em></pre> + +<ul> + <li> + <div><code>updatedCookie é uma string de forma </code><code><em>chave </em>= <em>valor</em></code>. Observe que você só pode definir / atualizar um cookie de cada vez usando esse método.</div> + </li> +</ul> + +<ul> + <li>Qualquer um dos seguintes valores de atributo cookie pode, opcionalmente, seguir o valor-chave par, especificando o cookie para definir / atualizar, e precedido por um ponto e vírgula : + <ul> + <li><code>;path = caminho<em> </em></code>(Por exemplo, '/' , '/meuDiretorio' ). Se não for especificado, o padrão é o caminho atual do local do documento atual.</li> + <li><code>;domain = <em>domínio </em></code>(por ex, 'exemplo1.com ', '.exemplo1.com', (inclui todos os subdomínios ), 'subdominio.exemplo1.com'). Se não for especificado, o padrão é a parte do host local do documento atual.</li> + <li><code>;max-age = maxima-idade-<em>em-segundos</em></code> (Por exemplo, 60 * 60 * 24 * 365 para um ano)</li> + <li><code>;expires = <em>data-em-formato-GMTString </em>(</code>Poderia usar <a href="/pt-PT/Core_JavaScript_1.5_Reference/Global_Objects/Date/toGMTString">Date.toGMTString</a>, agora obsoleto). Se não for especificado ele expira no final da sessão.</li> + <li><code>;secure</code> (cookie só podem ser transmitidos através do protocolo seguro como https)</li> + </ul> + </li> +</ul> + +<ul> + <li>A cadeia de valor do cookie pode usar <a href="/pt-PT/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent()</a> para garantir que a cadeia não contenha nenhuma vírgula, ponto-e-vírgula, ou espaços em branco (que não são permitidos nos valores de cookie).</li> +</ul> +</div> + +<div id="section_3"> +<h3 id="Exemplo">Exemplo</h3> + +<div class="dp-highlighter"> +<ol class="dp-c" start="1"> + <li class="alt">document.cookie = "nome = Italo";</li> + <li>document.cookie = "comida_favorita = lasanha";</li> + <li class="alt">alert(document.cookie);</li> + <li>// Mostra: nome = Italo; comida_favorita = lasanha</li> +</ol> +</div> +</div> + +<div id="section_4"> +<h3 id="Segurança">Segurança</h3> + +<p>É importante notar que o path<code> </code><strong>não</strong> protege contra a leitura não autorizada do cookie de um caminho diferente<strong>. </strong>Ele pode ser facilmente contornado com DOM simples (por exemplo, a criação de um elemento iframe oculto com o caminho do cookie, e depois aceder a este iframe <code>contentDocument.cookie</code>propriedade). Ele pode ser facilmente (por exemplo, a criação de um elemento o caminho do cookie, e depois aceder a este A única maneira de proteger o acesso "cookie" é usando um domínio ou subdomínio diferente , devido à política de mesma origem.</p> +</div> + +<div id="section_5"> +<h3 id="Notas">Notas</h3> + +<div class="editIcon"><a href="/pt-PT/DOM/document.cookie#"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></a></div> + +<p>Começando com o Firefox 2, a melhor mecanismo para o lado de armazenamento do cliente está disponível - <a href="/pt-PT/DOM/Storage">WHATWG DOM Storage com o Firefox 2, a para o lado de armazenamento do cliente está disponível</a>.</p> +</div> + +<div id="section_6"> +<h3 id="Especificação">Especificação</h3> + +<p><a href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-8747038">DOM Level 2: HTMLDocument.cookie</a></p> +</div> +</div> +</div> + +<p> </p> diff --git a/files/pt-pt/dom/document.getelementsbyclassname/index.html b/files/pt-pt/dom/document.getelementsbyclassname/index.html new file mode 100644 index 0000000000..3ce79ed564 --- /dev/null +++ b/files/pt-pt/dom/document.getelementsbyclassname/index.html @@ -0,0 +1,69 @@ +--- +title: document.getElementsByClassName +slug: DOM/document.getElementsByClassName +tags: + - Referência_do_DOM_Gecko +translation_of: Web/API/Document/getElementsByClassName +--- +<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }}</p> + +<h3 id="Resumo" name="Resumo">Resumo</h3> + +<p>Retorna um conjunto de elementos com o nome de classe fornecido. Quando chamado no objeto document, todo o documento é pesquisado incluindo o nó raiz. Você pode chamar também getElementsByClassName em qualquer elemento; isso retornará apenas elementos sob o elemento raiz especificado com o nome de classe fornecido.</p> + +<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> + +<pre class="eval"><em>elementos</em> = document.getElementsByClassName(<em>nome</em>) // ou:<em>elementos</em> = elementoRaiz.getElementsByClassName(<em>nome</em>) +</pre> + +<ul> + <li><code>elementos</code> é um <code>NodeList</code> vivo de elementos encontrados na ordem que aparecem na árvore.</li> + <li><code>nome</code> é uma<em>string</em> representando um nome de classe dos elementos.</li> + <li><code>getElementsByClassName</code> pode ser chamado em qualquer elemento, não apenas no <code>document</code>. O elemento em que é chamado será usado como a raiz da pesquisa.</li> +</ul> + +<h3 id="Exemplos" name="Exemplos">Exemplos</h3> + +<p>Devolve todos os elementos que têm a classe 'teste':</p> + +<pre class="eval"> document.getElementsByClassName('teste') +</pre> + +<p>Devolve todos os elementos que têm as classes 'vermelho' e 'teste':</p> + +<pre class="eval"> document.getElementsByClassName('vermelho teste') +</pre> + +<p>Devolve todos os elementos que têm a classe 'teste', dentro de um elemento que tem o ID 'principal':</p> + +<pre class="eval"> document.getElementById('principal').getElementsByClassName('teste') +</pre> + +<p>E se formos adiante e adicionarmos extras do Array do <a href="pt/New_in_JavaScript_1.6">JavaScript 1.6</a>, podemos fazer algumas combinações realmente boas.</p> + +<p>Encontre todos os elementos div que têm a classe 'teste'</p> + +<pre class="eval"> Array.filter( document.getElementsByClassName('teste'), function(elem){ + return elem.nodeName == 'DIV'; + }); +</pre> + +<p>Encontre todos os elementos que têm a classe 'teste' (como faz seu elemento pai)</p> + +<pre class="eval"> var teste = document.getElementsByClassName('teste'); + Array.filter( teste, function(elem){ + return Array.indexOf( teste, elem.parentNode ) > -1; + }); +</pre> + +<p><span class="comment">XXX escreva-me == Notas == Um método similar existe em <code>Element</code></span></p> + +<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> + +<p><a class="external" href="http://whatwg.org/specs/web-apps/current-work/#getelementsbyclassname">WHATWG Web Applications 1.0: getElementsByClassName</a></p> + +<p><span class="comment">Categorias</span></p> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p>{{ languages( { "en": "en/DOM/document.getElementsByClassName", "fr": "fr/DOM/document.getElementsByClassName" } ) }}</p> diff --git a/files/pt-pt/dom/dom_reference/index.html b/files/pt-pt/dom/dom_reference/index.html new file mode 100644 index 0000000000..ea0cdc52f1 --- /dev/null +++ b/files/pt-pt/dom/dom_reference/index.html @@ -0,0 +1,501 @@ +--- +title: Modelo de Objeto de Documento (DOM) +slug: DOM/DOM_Reference +tags: + - API + - DOM + - DOM Reference + - NeedsTranslation + - Referencia + - TopicStub +translation_of: Web/API/Document_Object_Model +--- +<div>{{DefaultAPISidebar("DOM")}}</div> + +<p>O <strong>Modelo de Objeto de Documento (<em>DOM</em>)</strong> interliga as páginas da <em>Web</em> para <em>scripts</em> ou linguagens de programação. Normalmente, isso significa que JavaScript, mas a modelagem de documentos HTML, SVG ou XML como objetos não é parte da linguagem de JavaScript. O modelo DOM representa um documento com uma árvore lógica. Cada ramo da árvore termina em um nodo, e cada nodo contém objetos. Os métodos DOM permitem o acesso programático à árvore; com eles, pode alterar a estrutura, o estilo ou o conteúdo do documento. Os nodos podem ter manipuladores de eventos anexados aos mesmos. Quando é acionado um evento, os manipuladores de eventos são executados .</p> + +<p>Está disponível uma <a href="/pt-PT/docs/Gecko_DOM_Reference/Introduction">introdução </a>ao DOM.</p> + +<h2 id="Interfaces_DOM">Interfaces DOM</h2> + +<div class="index"> +<ul> + <li>{{domxref("Attr")}}</li> + <li>{{domxref("CharacterData")}}</li> + <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> + <li>{{domxref("Comment")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("Document")}}</li> + <li>{{domxref("DocumentFragment")}}</li> + <li>{{domxref("DocumentType")}}</li> + <li>{{domxref("DOMError")}}</li> + <li>{{domxref("DOMException")}}</li> + <li>{{domxref("DOMImplementation")}}</li> + <li>{{domxref("DOMString")}}</li> + <li>{{domxref("DOMTimeStamp")}}</li> + <li>{{domxref("DOMSettableTokenList")}}</li> + <li>{{domxref("DOMStringList")}}</li> + <li>{{domxref("DOMTokenList")}}</li> + <li>{{domxref("Element")}}</li> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget")}}</li> + <li>{{domxref("HTMLCollection")}}</li> + <li>{{domxref("MutationObserver")}}</li> + <li>{{domxref("MutationRecord")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeFilter")}}</li> + <li>{{domxref("NodeIterator")}}</li> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> + <li>{{domxref("ProcessingInstruction")}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Text")}}</li> + <li>{{domxref("TreeWalker")}}</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> +</ul> +</div> + +<h2 id="Interfaces_DOM_obsoletas_obsolete_inline">Interfaces DOM obsoletas {{obsolete_inline}}</h2> + +<p>The Document Object Model has been highly simplified. To achieve this, the following interfaces present in the different DOM level 3 or earlier specification have been removed. It is still not very clear whether some may be reintroduced or not, but for the time being they have to be considered as obsolete and should be avoided:</p> + +<div class="index"> +<ul> + <li>{{domxref("CDATASection")}}</li> + <li>{{domxref("DOMConfiguration")}}</li> + <li>{{domxref("DOMErrorHandler")}}</li> + <li>{{domxref("DOMImplementationList")}}</li> + <li>{{domxref("DOMImplementationRegistry")}}</li> + <li>{{domxref("DOMImplementationSource")}}</li> + <li>{{domxref("DOMLocator")}}</li> + <li>{{domxref("DOMObject")}}</li> + <li>{{domxref("DOMUserData")}}</li> + <li>{{domxref("Entity")}}</li> + <li>{{domxref("EntityReference")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("NameList")}}</li> + <li>{{domxref("Notation")}}</li> + <li>{{domxref("TypeInfo")}}</li> + <li>{{domxref("UserDataHandler")}}</li> +</ul> +</div> + +<h2 id="Interfaces_HTML">Interfaces HTML</h2> + +<p>A document containing HTML is described using the {{domxref("HTMLDocument")}} interface. Note that the HTML specification also extends the {{domxref("Document")}} interface.</p> + +<p>An <code>HTMLDocument</code> object also gives access to various features of browsers like the ta or the window, in which a page is drawn using the {{domxref("Window")}} interface, the {{domxref("window.style", "Style")}} associated to it (usually CSS), the history of the browser relative to the context, {{domxref("window.history", "History")}}. Eventually, {{domxref("Selection")}} is done on the document.</p> + +<h3 id="Interfaces_de_elemento_HTML">Interfaces de elemento HTML</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLAnchorElement")}}</li> + <li>{{domxref("HTMLAppletElement")}}</li> + <li>{{domxref("HTMLAreaElement")}}</li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLBaseElement")}}</li> + <li>{{domxref("HTMLBodyElement")}}</li> + <li>{{domxref("HTMLBRElement")}}</li> + <li>{{domxref("HTMLButtonElement")}}</li> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("HTMLDataElement")}}</li> + <li>{{domxref("HTMLDataListElement")}}</li> + <li>{{domxref("HTMLDialogElement")}}</li> + <li>{{domxref("HTMLDirectoryElement")}}</li> + <li>{{domxref("HTMLDivElement")}}</li> + <li>{{domxref("HTMLDListElement")}}</li> + <li>{{domxref("HTMLElement")}}</li> + <li>{{domxref("HTMLEmbedElement")}}</li> + <li>{{domxref("HTMLFieldSetElement")}}</li> + <li>{{domxref("HTMLFontElement")}}</li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("HTMLFrameElement")}}</li> + <li>{{domxref("HTMLFrameSetElement")}}</li> + <li>{{domxref("HTMLHeadElement")}}</li> + <li>{{domxref("HTMLHeadingElement")}}</li> + <li>{{domxref("HTMLHtmlElement")}}</li> + <li>{{domxref("HTMLHRElement")}}</li> + <li>{{domxref("HTMLIFrameElement")}}</li> + <li>{{domxref("HTMLImageElement")}}</li> + <li>{{domxref("HTMLInputElement")}}</li> + <li>{{domxref("HTMLKeygenElement")}}</li> + <li>{{domxref("HTMLLabelElement")}}</li> + <li>{{domxref("HTMLLegendElement")}}</li> + <li>{{domxref("HTMLLIElement")}}</li> + <li>{{domxref("HTMLLinkElement")}}</li> + <li>{{domxref("HTMLMapElement")}}</li> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{domxref("HTMLMenuElement")}}</li> + <li>{{domxref("HTMLMetaElement")}}</li> + <li>{{domxref("HTMLMeterElement")}}</li> + <li>{{domxref("HTMLModElement")}}</li> + <li>{{domxref("HTMLObjectElement")}}</li> + <li>{{domxref("HTMLOListElement")}}</li> + <li>{{domxref("HTMLOptGroupElement")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLOutputElement")}}</li> + <li>{{domxref("HTMLParagraphElement")}}</li> + <li>{{domxref("HTMLParamElement")}}</li> + <li>{{domxref("HTMLPreElement")}}</li> + <li>{{domxref("HTMLProgressElement")}}</li> + <li>{{domxref("HTMLQuoteElement")}}</li> + <li>{{domxref("HTMLScriptElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> + <li>{{domxref("HTMLSourceElement")}}</li> + <li>{{domxref("HTMLSpanElement")}}</li> + <li>{{domxref("HTMLStyleElement")}}</li> + <li>{{domxref("HTMLTableElement")}}</li> + <li>{{domxref("HTMLTableCaptionElement")}}</li> + <li>{{domxref("HTMLTableCellElement")}}</li> + <li>{{domxref("HTMLTableDataCellElement")}}</li> + <li>{{domxref("HTMLTableHeaderCellElement")}}</li> + <li>{{domxref("HTMLTableColElement")}}</li> + <li>{{domxref("HTMLTableRowElement")}}</li> + <li>{{domxref("HTMLTableSectionElement")}}</li> + <li>{{domxref("HTMLTextAreaElement")}}</li> + <li>{{domxref("HTMLTimeElement")}}</li> + <li>{{domxref("HTMLTitleElement")}}</li> + <li>{{domxref("HTMLTrackElement")}}</li> + <li>{{domxref("HTMLUListElement")}}</li> + <li>{{domxref("HTMLUnknownElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="Outras_interfaces">Outras interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("CanvasPixelArray")}}</li> + <li>{{domxref("NotifyAudioAvailableEvent")}}</li> + <li>{{domxref("HTMLAllCollection")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}</li> + <li>{{domxref("HTMLOptionsCollection")}}</li> + <li>{{domxref("HTMLPropertiesCollection")}}</li> + <li>{{domxref("DOMStringMap")}}</li> + <li>{{domxref("RadioNodeList")}}</li> + <li>{{domxref("MediaError")}}</li> +</ul> +</div> + +<h3 id="Interfaces_HTML_obsoletas_obsolete_inline">Interfaces HTML obsoletas {{obsolete_inline}}</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLBaseFontElement")}}</li> + <li>{{domxref("HTMLIsIndexElement")}}</li> +</ul> +</div> + +<h2 id="SGV_-_Interfaces">SGV - Interfaces</h2> + +<h3 id="Interfaces_de_elemento_SVG">Interfaces de elemento SVG</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAElement")}}</li> + <li>{{domxref("SVGAltGlyphElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAltGlyphDefElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAltGlyphItemElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAnimationElement")}}</li> + <li>{{domxref("SVGAnimateElement")}}</li> + <li>{{domxref("SVGAnimateColorElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAnimateMotionElement")}}</li> + <li>{{domxref("SVGAnimateTransformElement")}}</li> + <li>{{domxref("SVGCircleElement")}}</li> + <li>{{domxref("SVGClipPathElement")}}</li> + <li>{{domxref("SVGColorProfileElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> + <li>{{domxref("SVGCursorElement")}}</li> + <li>{{domxref("SVGDefsElement")}}</li> + <li>{{domxref("SVGDescElement")}}</li> + <li>{{domxref("SVGElement")}}</li> + <li>{{domxref("SVGEllipseElement")}}</li> + <li>{{domxref("SVGFEBlendElement")}}</li> + <li>{{domxref("SVGFEColorMatrixElement")}}</li> + <li>{{domxref("SVGFEComponentTransferElement")}}</li> + <li>{{domxref("SVGFECompositeElement")}}</li> + <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> + <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> + <li>{{domxref("SVGFEDisplacementMapElement")}}</li> + <li>{{domxref("SVGFEDistantLightElement")}}</li> + <li>{{domxref("SVGFEDropShadowElement")}}</li> + <li>{{domxref("SVGFEFloodElement")}}</li> + <li>{{domxref("SVGFEFuncAElement")}}</li> + <li>{{domxref("SVGFEFuncBElement")}}</li> + <li>{{domxref("SVGFEFuncGElement")}}</li> + <li>{{domxref("SVGFEFuncRElement")}}</li> + <li>{{domxref("SVGFEGaussianBlurElement")}}</li> + <li>{{domxref("SVGFEImageElement")}}</li> + <li>{{domxref("SVGFEMergeElement")}}</li> + <li>{{domxref("SVGFEMergeNodeElement")}}</li> + <li>{{domxref("SVGFEMorphologyElement")}}</li> + <li>{{domxref("SVGFEOffsetElement")}}</li> + <li>{{domxref("SVGFEPointLightElement")}}</li> + <li>{{domxref("SVGFESpecularLightingElement")}}</li> + <li>{{domxref("SVGFESpotLightElement")}}</li> + <li>{{domxref("SVGFETileElement")}}</li> + <li>{{domxref("SVGFETurbulenceElement")}}</li> + <li>{{domxref("SVGFilterElement")}}</li> + <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{domxref("SVGFontElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceFormatElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceNameElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceSrcElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFontFaceUriElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGForeignObjectElement")}}</li> + <li>{{domxref("SVGGElement")}}</li> + <li>{{domxref("SVGGeometryElement")}}</li> + <li>{{domxref("SVGGlyphElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGGlyphRefElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGGradientElement")}}</li> + <li>{{domxref("SVGGraphicsElement")}}</li> + <li>{{domxref("SVGHatchElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGHatchpathElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGHKernElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGImageElement")}}</li> + <li>{{domxref("SVGLinearGradientElement")}}</li> + <li>{{domxref("SVGLineElement")}}</li> + <li>{{domxref("SVGMarkerElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMaskElement")}}</li> + <li>{{domxref("SVGMeshElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMeshGradientElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMeshpatchElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMeshrowElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGMetadataElement")}}</li> + <li>{{domxref("SVGMissingGlyphElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGMPathElement")}}</li> + <li>{{domxref("SVGPathElement")}}</li> + <li>{{domxref("SVGPatternElement")}}</li> + <li>{{domxref("SVGPolylineElement")}}</li> + <li>{{domxref("SVGPolygonElement")}}</li> + <li>{{domxref("SVGRadialGradientElement")}}</li> + <li>{{domxref("SVGRectElement")}}</li> + <li>{{domxref("SVGScriptElement")}}</li> + <li>{{domxref("SVGSetElement")}}</li> + <li>{{domxref("SVGSolidcolorElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGStopElement")}}</li> + <li>{{domxref("SVGStyleElement")}}</li> + <li>{{domxref("SVGSVGElement")}}</li> + <li>{{domxref("SVGSwitchElement")}}</li> + <li>{{domxref("SVGSymbolElement")}}</li> + <li>{{domxref("SVGTextContentElement")}}</li> + <li>{{domxref("SVGTextElement")}}</li> + <li>{{domxref("SVGTextPathElement")}}</li> + <li>{{domxref("SVGTextPositioningElement")}}</li> + <li>{{domxref("SVGTitleElement")}}</li> + <li>{{domxref("SVGTRefElement")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGTSpanElement")}}</li> + <li>{{domxref("SVGUseElement")}}</li> + <li>{{domxref("SVGUnknownElement")}} {{experimental_inline}}</li> + <li>{{domxref("SVGViewElement")}}</li> + <li>{{domxref("SVGVKernElement")}} {{deprecated_inline}}</li> +</ul> +</div> + +<h3 id="Interfaces_de_tipo_de_dados_SVG">Interfaces de tipo de dados SVG</h3> + +<p>Here are the DOM API for data types used in the definitions of SVG properties and attributes.</p> + +<div class="note"> +<p><strong>Nota:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p> +</div> + +<h4 id="Tipo_estático">Tipo estático</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAngle")}}</li> + <li>{{domxref("SVGColor")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGICCColor")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGElementInstance")}}</li> + <li>{{domxref("SVGElementInstanceList")}}</li> + <li>{{domxref("SVGLength")}}</li> + <li>{{domxref("SVGLengthList")}}</li> + <li>{{domxref("SVGMatrix")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGNameList")}}</li> + <li>{{domxref("SVGNumber")}}</li> + <li>{{domxref("SVGNumberList")}}</li> + <li>{{domxref("SVGPaint")}}</li> + <li>{{domxref("SVGPathSeg")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegClosePath")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegMovetoAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegMovetoRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegArcAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegArcRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoHorizontalAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoHorizontalRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoVerticalAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegLinetoVerticalRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicSmoothAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoCubicSmoothRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothAbs")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegCurvetoQuadraticSmoothRel")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPathSegList")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPoint")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPointList")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGPreserveAspectRatio")}}</li> + <li>{{domxref("SVGRect")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGStringList")}}</li> + <li>{{domxref("SVGTransform")}}</li> + <li>{{domxref("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Tipo_animado">Tipo animado</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedAngle")}}</li> + <li>{{domxref("SVGAnimatedBoolean")}}</li> + <li>{{domxref("SVGAnimatedEnumeration")}}</li> + <li>{{domxref("SVGAnimatedInteger")}}</li> + <li>{{domxref("SVGAnimatedLength")}}</li> + <li>{{domxref("SVGAnimatedLengthList")}}</li> + <li>{{domxref("SVGAnimatedNumber")}}</li> + <li>{{domxref("SVGAnimatedNumberList")}}</li> + <li>{{domxref("SVGAnimatedPathData")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGAnimatedPoints")}}</li> + <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{domxref("SVGAnimatedRect")}}</li> + <li>{{domxref("SVGAnimatedString")}}</li> + <li>{{domxref("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="Interfaces_relacionadas_com_SMIL">Interfaces relacionadas com SMIL</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Outras_interfaces_SVG">Outras interfaces SVG</h3> + +<div class="index"> +<ul> + <li>{{domxref("GetSVGDocument")}}</li> + <li>{{domxref("ShadowAnimation")}}</li> + <li>{{domxref("SVGColorProfileRule")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGCSSRule")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGDocument")}}</li> + <li>{{domxref("SVGException")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGExternalResourcesRequired")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGFitToViewBox")}}</li> + <li>{{domxref("SVGLangSpace")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGLocatable")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGRenderingIntent")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGStylable")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGTests")}}</li> + <li>{{domxref("SVGTransformable")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGUnitTypes")}}</li> + <li>{{domxref("SVGUseElementShadowRoot")}}</li> + <li>{{domxref("SVGURIReference")}}</li> + <li>{{domxref("SVGViewSpec")}} {{deprecated_inline}}</li> + <li>{{domxref("SVGZoomAndPan")}}</li> + <li>{{domxref("SVGZoomEvent")}} {{deprecated_inline}}</li> +</ul> +</div> + +<h2 id="Consulte_também">Consulte também</h2> + +<ul> + <li><a href="/pt-PT/docs/DOM/DOM_Reference/Exemplos">Exemplos de DOM</a></li> +</ul> + +<div id="SL_balloon_obj" style="display: block;"> +<div class="SL_ImTranslatorLogo" id="SL_button" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%; opacity: 0; display: block; left: -8px; top: -25px; transition: visibility 2s ease 0s, opacity 2s linear 0s;"> </div> + +<div id="SL_shadow_translation_result2" style="display: none;"> </div> + +<div id="SL_shadow_translator" style="display: none;"> +<div id="SL_planshet"> +<div id="SL_arrow_up" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_Bproviders"> +<div class="SL_BL_LABLE_ON" id="SL_P0" title="Google">G</div> + +<div class="SL_BL_LABLE_ON" id="SL_P1" title="Microsoft">M</div> + +<div class="SL_BL_LABLE_ON" id="SL_P2" title="Translator">T</div> +</div> + +<div id="SL_alert_bbl" style="display: none;"> +<div id="SLHKclose" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_alert_cont"> </div> +</div> + +<div id="SL_TB"> +<table id="SL_tables"> + <tbody><tr> + <td class="SL_td"><input></td> + <td class="SL_td"><select><option value="auto">Detectar idioma</option><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_switch_b" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Alternar Idiomas"> </div> + </td> + <td class="SL_td"><select><option value="af">Africâner</option><option value="sq">Albanês</option><option value="de">Alemão</option><option value="ar">Arabe</option><option value="hy">Armênio</option><option value="az">Azerbaijano</option><option value="eu">Basco</option><option value="bn">Bengali</option><option value="be">Bielo-russo</option><option value="my">Birmanês</option><option value="bs">Bósnio</option><option value="bg">Búlgaro</option><option value="ca">Catalão</option><option value="kk">Cazaque</option><option value="ceb">Cebuano</option><option value="ny">Chichewa</option><option value="zh-CN">Chinês (Simp)</option><option value="zh-TW">Chinês (Trad)</option><option value="si">Cingalês</option><option value="ko">Coreano</option><option value="ht">Crioulo haitiano</option><option value="hr">Croata</option><option value="da">Dinamarquês</option><option value="sk">Eslovaco</option><option value="sl">Esloveno</option><option value="es">Espanhol</option><option value="eo">Esperanto</option><option value="et">Estoniano</option><option value="fi">Finlandês</option><option value="fr">Francês</option><option value="gl">Galego</option><option value="cy">Galês</option><option value="ka">Georgiano</option><option value="el">Grego</option><option value="gu">Gujarati</option><option value="ha">Hauça</option><option value="iw">Hebraico</option><option value="hi">Hindi</option><option value="hmn">Hmong</option><option value="nl">Holandês</option><option value="hu">Húngaro</option><option value="ig">Igbo</option><option value="id">Indonésio</option><option selected value="en">Inglês</option><option value="yo">Ioruba</option><option value="ga">Irlandês</option><option value="is">Islandês</option><option value="it">Italiano</option><option value="ja">Japonês</option><option value="jw">Javanês</option><option value="kn">Kannada</option><option value="km">Khmer</option><option value="lo">Laosiano</option><option value="la">Latim</option><option value="lv">Letão</option><option value="lt">Lituano</option><option value="mk">Macedônico</option><option value="ml">Malaiala</option><option value="ms">Malaio</option><option value="mg">Malgaxe</option><option value="mt">Maltês</option><option value="mi">Maori</option><option value="mr">Marathi</option><option value="mn">Mongol</option><option value="ne">Nepalês</option><option value="no">Norueguês</option><option value="fa">Persa</option><option value="pl">Polonês</option><option value="pt">Português</option><option value="pa">Punjabi</option><option value="ro">Romeno</option><option value="ru">Russo</option><option value="sr">Sérvio</option><option value="st">Sesotho</option><option value="so">Somália</option><option value="sw">Suaíli</option><option value="su">Sudanês</option><option value="sv">Sueco</option><option value="tg">Tadjique</option><option value="tl">Tagalo</option><option value="th">Tailandês</option><option value="ta">Tâmil</option><option value="cs">Tcheco</option><option value="te">Telugo</option><option value="tr">Turco</option><option value="uk">Ucraniano</option><option value="ur">Urdu</option><option value="uz">Uzbeque</option><option value="vi">Vietnamita</option><option value="yi">Yiddish</option><option value="zu">Zulu</option></select></td> + <td class="SL_td"> + <div id="SL_TTS_voice" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ouça"> </div> + </td> + <td class="SL_td"> + <div class="SL_copy" id="SL_copy" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Copiar"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_font_patch"> </div> + + <div class="SL_bbl_font" id="SL_bbl_font" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Tamanho da fonte"> </div> + </td> + <td class="SL_td"> + <div id="SL_bbl_help" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Ajuda"> </div> + </td> + <td class="SL_td"> + <div class="SL_pin_off" id="SL_pin" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Fixar a janela de pop-up"> </div> + </td> + </tr> +</tbody></table> +</div> +</div> + +<div id="SL_shadow_translation_result" style=""> </div> + +<div class="SL_loading" id="SL_loading" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<div id="SL_player2"> </div> + +<div id="SL_alert100">A função de fala é limitada a 200 caracteres</div> + +<div id="SL_Balloon_options" style="background: rgb(255, 255, 255) repeat scroll 0% 0%;"> +<div id="SL_arrow_down" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;"> </div> + +<table id="SL_tbl_opt" style="width: 100%;"> + <tbody><tr> + <td><input></td> + <td> + <div id="SL_BBL_IMG" style="background: rgba(0, 0, 0, 0) repeat scroll 0% 0%;" title="Mostrar o botão do ImTranslator 3 segundos"> </div> + </td> + <td><a class="SL_options" title="Mostrar opções">Opções</a> : <a class="SL_options" title="Histórico de tradução">Histórico</a> : <a class="SL_options" title="Comentários">Comentários</a> : <a class="SL_options" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GD9D8CPW8HFA2" title="Faça sua contribuição">Donate</a></td> + <td><span id="SL_Balloon_Close" title="Encerrar">Encerrar</span></td> + </tr> +</tbody></table> +</div> +</div> +</div> diff --git a/files/pt-pt/dom/element.appendchild/index.html b/files/pt-pt/dom/element.appendchild/index.html new file mode 100644 index 0000000000..7495320be4 --- /dev/null +++ b/files/pt-pt/dom/element.appendchild/index.html @@ -0,0 +1,31 @@ +--- +title: element.appendChild +slug: DOM/element.appendChild +tags: + - Referência_do_DOM_Gecko +translation_of: Web/API/Node/appendChild +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sumario" name="Sumario">Sumario</h3> +<p>Adiciona um novo nó (filho) a um determinado elemento (objeto)</p> +<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> +<pre class="eval"><i>element</i>.appendChild(<i>child</i>) +</pre> +<ul> + <li><code>element</code> é o elemento pai.</li> + <li><code>child</code> é o nó que será adicionado como filho de <code>element</code>.</li> +</ul> +<h3 id="Exemplo" name="Exemplo">Exemplo</h3> +<pre>// Cria um novo Elemento(Objeto) +var p = document.createElement("p"); + +// Adiciona ao Elemento Body (este deverá existir!) +document.body.appendChild(p); +</pre> +<h3 id="Notas" name="Notas">Notas</h3> +<p>Se <code>child</code> é a referência para um nó ja existente no documento, <code>appendChild</code> moverá este para a nova posição (ou seja não é necessário remover um nó de uma posição para depois adicionar em outra). Isto significa que um nó não pode estar em dois lugares do documento ao mesmo tempo.</p> +<p>Você pode usar também <a href="pt/DOM/element.cloneNode">cloneNode</a> para copiar este nó e depois adicioná-lo a outro elemento. (Observe que ao criar um objeto ultilizando <code>cloneNode</code> ou <code>createElement</code> este não fará parte do documento até você torna-lo parte deste usando appendChild ou método similar)</p> +<p>Métodos relacionados : <a href="pt/DOM/element.insertBefore">insertBefore</a>, <a href="pt/DOM/element.replaceChild">replaceChild</a> and <a href="pt/DOM/element.removeChild">removeChild</a>. <span class="comment"><code>appendChild</code> é um dos métodos essenciais na programação usando DOM. O método <code>appendChild</code> insere um novo nó na estrutura DOM e este é a segunda parte da metodologia create-and-append.</span></p> +<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107">DOM Level 2 Core: appendChild</a></p> +<p>{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "pl": "pl/DOM/element.appendChild" } ) }}</p> diff --git a/files/pt-pt/dom/element.clientleft/index.html b/files/pt-pt/dom/element.clientleft/index.html new file mode 100644 index 0000000000..48ee3f11b4 --- /dev/null +++ b/files/pt-pt/dom/element.clientleft/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientLeft +slug: DOM/element.clientLeft +tags: + - PrecisaDeRevisãoEditorial + - Referência_do_DOM_Gecko +translation_of: Web/API/Element/clientLeft +--- +<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }} <span class="comment">Faltam duas imagens no documento</span></p> +<h3 id="Resumo" name="Resumo">Resumo</h3> +<p>A largura da borda esquerda de um elemento em pixels inclui a largura da barra de rolagem vertical se a direção do texto do elemento estiver da direita para a esquerda e se houver um excesso causando uma barra de rolagem vertical na esquerda para ser renderizada. <code>clientLeft</code> não inclui a margem ou o enchimento esquerdo. <code>clientLeft</code> é somente leitura.</p> +<p>Aplicações baseadas em <a href="pt/Gecko">Gecko</a> suportam <code>clientLeft</code> començando com o Gecko 1.9 (<a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a>, implementado em {{ Bug(111207) }}). Esta propriedade não é suportada pelo Firefox 2 e mais antigos.</p> +<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> +<pre class="eval">var <var>left</var> = <var>element</var>.clientLeft; +</pre> +<h3 id="Exemplos" name="Exemplos">Exemplos</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> +<p style="margin-top: 270px;"><img alt="Image:clientLeft.png"></p> +<p><img alt="Vertical scrollbar position when layout.scrollbar.side property is set to 1 or to 3"></p> +<p>Quando a <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">propriedade + <i> + layout.scrollbar.side</i> + </a> é configurada para 1 ou para 3 e quando a direção do texto é configurada da direita para a esquerda, <b>então a barra de rolagem vertical é posicionada na esquerda</b> e isto impacta na maneira como o <code>clientLeft</code> é computado.</p> +<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> +<p>Não é parte de qualquer especificação W3C.</p> +<h3 id="Notas" name="Notas">Notas</h3> +<p><code>clientLeft</code> foi primeiramente introduzido no objeto modelo DHTML do MS IE.</p> +<p>A posição da barra de rolagem vertical na direção do texto, direita para a esquerda, configura que o elemento dependerá da <a class="external" href="http://kb.mozillazine.org/Layout.scrollbar.side">preferência + <i> + layout.scrollbar.side</i> + </a></p> +<h3 id="Refer.C3.AAncias" name="Refer.C3.AAncias">Referências</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientleft.asp?frame=true">MSDN's clientLeft definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> +</ul> +<p><span class="comment">Categorias</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p>{{ languages( { "en": "en/DOM/element.clientLeft", "ja": "ja/DOM/element.clientLeft", "pl": "pl/DOM/element.clientLeft" } ) }}</p> diff --git a/files/pt-pt/dom/element.clienttop/index.html b/files/pt-pt/dom/element.clienttop/index.html new file mode 100644 index 0000000000..02f2ee736c --- /dev/null +++ b/files/pt-pt/dom/element.clienttop/index.html @@ -0,0 +1,38 @@ +--- +title: element.clientTop +slug: DOM/element.clientTop +tags: + - PrecisaDeRevisãoEditorial + - Referência_do_DOM_Gecko +translation_of: Web/API/Element/clientTop +--- +<p>{{ Fx_minversion_header(3) }} {{ ApiRef() }} <span class="comment">Falta uma imagem no documento</span></p> +<h3 id="Resumo" name="Resumo">Resumo</h3> +<p>A largura da borda superior de um elemento em pixels não inclui a margem superior ou o enchimento. <code>clientTop</code> é somente leitura.</p> +<p>Aplicações baseadas em <a href="pt/Gecko">Gecko</a> suportam <code>clientTop</code> começando com Gecko 1.9 (<a href="pt/Firefox_3_para_desenvolvedores">Firefox 3</a>, implementou em {{ Bug(111207) }}). Esta propriedade não é suportada no Firefox 2 e mais antigos.</p> +<h3 id="Sintaxe" name="Sintaxe">Sintaxe</h3> +<pre class="eval">var<i>top</i> = <var>element</var>.clientTop; +</pre> +<h3 id="Exemplos" name="Exemplos">Exemplos</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> +<p style="margin-top: 270px;"><img alt="Image:clientTop.png"></p> +<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> +<p>Não é parte de nenhuma especificação W3C.</p> +<h3 id="Notas" name="Notas">Notas</h3> +<p><code>clientTop</code> foi primeiramente introduzido no objeto modelo DHTML do MS IE.</p> +<h3 id="Refer.C3.AAncias" name="Refer.C3.AAncias">Referências</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clienttop.asp?frame=true">MSDN's clientTop definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> +</ul> +<p><span class="comment">Categorias</span></p> +<p><span class="comment">Interwiki Language Links</span></p> +<p>{{ languages( { "en": "en/DOM/element.clientTop", "pl": "pl/DOM/element.clientTop" } ) }}</p> diff --git a/files/pt-pt/dom/element.clonenode/index.html b/files/pt-pt/dom/element.clonenode/index.html new file mode 100644 index 0000000000..71f0c5064a --- /dev/null +++ b/files/pt-pt/dom/element.clonenode/index.html @@ -0,0 +1,55 @@ +--- +title: element.cloneNode +slug: DOM/element.cloneNode +translation_of: Web/API/Node/cloneNode +--- +<h3 id="Resumo" name="Resumo">Resumo</h3> + +<p>Retorna a cópia de um elemento.</p> + +<h3 id="Syntax" name="Syntax">Syntax</h3> + +<pre class="eval"><em>dupNode</em> = <em>element</em>.cloneNode(<em>deep</em>); +</pre> + +<ul> + <li><code>dupNode</code> é variável que receberá o nó gerado</li> + <li><code>element</code> é o elemento pai (o elemento que contém o nó que será copiado)</li> + <li><code>deep</code> é um valor boleano, obrigatório que indica de o a clone vai ser completo ou não (ver <a href="#Notas">notas</a>).</li> +</ul> + +<h3 id="Example" name="Example">Example</h3> + +<pre>p = document.getElementById("diogok"); +p_prime = p.cloneNode(true); +</pre> + +<h3 id="Notas" name="Notas">Notas</h3> + +<p>Clonando um nó copiamos todos seus atributos e seus respectivos valores</p> + +<p>O nó clonado retornado por <code>cloneNode</code> não faz parte do documento enquanto não for adicionado a um outro nó que faça parte do documento usando <a href="/pt/DOM/element.appendChild" title="pt/DOM/element.appendChild">appendChild</a> ou outro método similar. Enquanto não for adicionado a um outro nó, será um nó sem pai. Ou seja, o clone não herda o pai do original.</p> + +<p>Se <code>deep</code> for <code>false</code>, nada sobre os nós filhos será clonado. <em>Qualquer texto contido no nó não será clonado junto</em>, já que o texto fica contido em nós de texto.</p> + +<p>Se <code>deep</code> for <code>true</code>, toda a subárvore (incluíndo texto) é copiado também. Para nós vazios (como os elementos IMG e INPUT) não importa qua valor que você coloque em <code>deep</code>, mas você ainda deve definir um valor</p> + +<p>Note que o cloneNode pode causar o problema de termos dois elementos com um mesmo id em um documento!</p> + +<p>Somente os eventos colocados em atributos inline são copiados. Os eventos adicionados após a renderização do nó via javascript não são copiados. <code> </code></p> + +<pre class="eval">var elms = document.getElementById('foo'); +elms.onclick = function(){ + alert('Eu não deveria ser copiado?'); +} +var g = elms.cloneNode(true); +g.id = 'foo2'; +g.style.top = '0px'; +document.body.appendChild(g); +</pre> + +<p>No trecho de código acima o atributo <code>onclick</code> não é copiado. Nem mesmo com <code>addEventListener</code>.</p> + +<h3 id="Especifica.C3.A7.C3.A3o" name="Especifica.C3.A7.C3.A3o">Especificação</h3> + +<p><a class="external" href="http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4">DOM Level 2 Core: cloneNode</a></p> diff --git a/files/pt-pt/dom/element.insertbefore/index.html b/files/pt-pt/dom/element.insertbefore/index.html new file mode 100644 index 0000000000..d0393410a6 --- /dev/null +++ b/files/pt-pt/dom/element.insertbefore/index.html @@ -0,0 +1,60 @@ +--- +title: element.insertBefore +slug: DOM/element.insertBefore +tags: + - Referência_do_DOM_Gecko +translation_of: Web/API/Node/insertBefore +--- +<p>{{ ApiRef() }}</p> +<h3 id="Sum.C3.A1rio" name="Sum.C3.A1rio">Sumário</h3> +<p>Insere um nó filho ao nó atual, antes de um determinado elemento.</p> +<h3 id="S.C3.ADntaxe" name="S.C3.ADntaxe">Síntaxe</h3> +<pre class="eval">var<i>insertedElement</i> =<i>parentElement</i>.insertBefore(<i>newElement</i>,<i>referenceElement</i>) +</pre> +<p>If <var>referenceElement</var> is <code>null</code>, <var>newElement</var> is inserted at the end of the list of child nodes.</p> +<ul> + <li><code>insertedElement</code> é o novo inserido,ou seja é o <code>newElement</code></li> + <li><code>parentElement</code> é o elemento pai que receberá o novo nó inserido.</li> + <li><code>newElement</code> é o novo elemento que será inserido</li> + <li><code>referenceElement</code> o novo nó ficará antes desse elemento</li> +</ul> +<p>Se <var>referenceElement</var> é <code>null</code> o elemento é inserido em último lugar na lista de nós filhos. Ver <code><a href="pt/DOM/element.childNodes">childNodes</a></code></p> +<h3 id="Exemplo" name="Exemplo">Exemplo</h3> +<pre> <html> + + <head> + <title>Gecko DOM insertBefore test</title> + </head> + <body> + <div> + <span id="childSpan">foo bar</span> + </div> + + <script type="text/javascript"> + // cria um elemento vazio + // sem ID ou qualquer outro atributo + var sp1 = document.createElement("span"); + + // atribui o ID 'newSpan' para o elemento criado + sp1.setAttribute("id", "newSpan"); + + //cria um conteudo para o novo elemento,um texto curto + var sp1_content = document.createTextNode("This is a new span element. "); + // adiciona o conteúdo a novo elemento + sp1.appendChild(sp1_content); + + var sp2 = document.getElementById("childSpan"); + var parentDiv = sp2.parentNode; + + // insere o novo elemento antes sp2 + parentDiv.insertBefore(sp1, sp2); + </script> + + </body> + </html> +</pre> +<p>Não há um método <code>insertAfter</code>(insere depois), porém pode se obter um resultado semelhante usando a combinação entre <code>insertBefore</code> e <code><a href="pt/DOM/element.nextSibling">nextSibling</a></code>. Por exemplo, <code>sp1</code> pode inserido depois de <code>sp2</code> usando comando parentDiv.insertBefore(sp1, sp2.nextSibling); Se a propridade <code>nextSibling</code> retornar <code>null</code> indica que o elemento é o último nó filho, logo novo elemento será incluído no final da lista de nós filhos</p> +<p> </p> +<h3 id="Espefica.C3.A7.C3.A3o" name="Espefica.C3.A7.C3.A3o">Espeficação</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore </a></p> +<p>{{ languages( { "en": "en/DOM/element.insertBefore", "pl": "pl/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore" } ) }}</p> diff --git a/files/pt-pt/dom/element/index.html b/files/pt-pt/dom/element/index.html new file mode 100644 index 0000000000..7b9a55f260 --- /dev/null +++ b/files/pt-pt/dom/element/index.html @@ -0,0 +1,573 @@ +--- +title: element +slug: DOM/element +tags: + - API + - API da Web + - DOM + - Element + - Elemento + - Interface + - Referencia + - Referência DOM +translation_of: Web/API/Element +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Element</code></strong> </span>é a classe base mais geral da qual todos os objetos em um <span class="seoSummary">{{DOMxRef("Document","documento")}} herdam. Este só tem métodos e propriedades comuns para todos os tipos de elementos. </span>Classes mais específicas herdam de<span class="seoSummary"> <code>Element</code>.</span> Por exemplo, a interface {{DOMxRef("HTMLElement")}} é a interface base para os elementos HTML, enquanto a interface {{DOMxRef("SVGElement")}} é a base para todos os elementos SVG. A maioria das funcionalidades é especificada mais abaixo na hierarquia de classes.</p> + +<p>Linguagens fora do âmbito da plataforma Web, como XUL através da interface <code>XULElement</code>, também implementa <code>Element</code>.</p> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Propriedades" name="Propriedades">Propriedades</h2> + +<p><em>Inherits properties from its parent interface, {{DOMxRef("Node")}}, and by extension that interface's parent, {{DOMxRef("EventTarget")}}. It implements the properties of {{DOMxRef("ParentNode")}}, {{DOMxRef("ChildNode")}}, {{DOMxRef("NonDocumentTypeChildNode")}}, </em>and {{DOMxRef("Animatable")}}.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Nome</th> + <th>Descrição</th> + <th>Tipo</th> + <th>Dosponibilidade</th> + </tr> + <tr> + <td><code><a href="pt/DOM/element.attributes">attibutes</a></code></td> + <td>Todos os atributos associados ao elemento</td> + <td><code><a href="pt/DOM/NamedNodeMap">NamedNodeMap</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.childNodes">childNodes</a></code></td> + <td>Todos os nós-filhos de um elemento.</td> + <td><code><a href="pt/DOM/NodeList">NodeList</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.className">className</a></code></td> + <td>Retorna ou define a classe do elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.clientHeight">clientHeight</a></code></td> + <td>A altura interna de um elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.clientLeft">clientLeft</a></code></td> + <td>A largura da borda esquerda de um elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.clientTop">clientTop</a></code></td> + <td>A largura da borda superior de um elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.clientWidth">clientWidth</a></code></td> + <td>A largura interna de um elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.dir">dir</a></code></td> + <td>Retorna ou define a direcionalidade do elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.firstChild">firstChild</a></code></td> + <td>O primeiro nó-filho direto de um elemento, ou <code>null</code> se o elemento não tem nós-filhos.</td> + <td><code><a href="pt/DOM/Node">Node</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.id">id</a></code></td> + <td>Retorna ou define o id do elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.innerHTML">innerHTML</a></code></td> + <td>Retorna ou define a marcação e o conteúdo de um elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.lang">lang</a></code></td> + <td>Retorna ou define o atributo linguagem de um elemento, texto, e conteúdo do elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.lastChild">lastChild</a></code></td> + <td>O último nó-filho direto de um elemento, ou <code>null</code> se o elemento não tem nós-filhos.</td> + <td><code><a href="pt/DOM/Node">Node</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.localName">localName</a></code></td> + <td>A parte local de um nome qualificado de um elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <th>Nome</th> + <th>Descrição</th> + <th>Tipo</th> + <th>Disponibilidade</th> + </tr> + <tr> + <td><code><a href="pt/DOM/element.name">name</a></code></td> + <td>Retorna/define o atributo name de um elemento.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.namespaceURI">namespaceURI</a></code></td> + <td>A URI de namespace do nó, ou <code>null</code> se não está especificado.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.nextSibling">nextSibling</a></code></td> + <td>O nó imediatamente seguinte ao dado numa árvore, ou <code>null</code> se não existe nó-irmão.</td> + <td><code><a href="pt/DOM/Node">Node</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.nodeName">nodeName</a></code></td> + <td>O nome do nó.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.nodeType">nodeType</a></code></td> + <td>Um número representando o tipo do nó. É sempre igual a <code>1</code> para elementos DOM.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.nodeValue">nodeValue</a></code></td> + <td>O valor do nó. É sempre igual a <code>null</code> para elementos DOM.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.offsetHeight">offsetHeight</a></code></td> + <td>A altura de um elemento, em relação ao layout.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.offsetLeft">offsetLeft</a></code></td> + <td>A distância da borda esquerda do elemento para o a borda esquerda do seu <code>offsetParent</code>.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.offsetParent">offsetParent</a></code></td> + <td>O elemento para o qual todos cálculos de offset estão atualmente computados.</td> + <td><code><a href="pt/DOM/element">Element</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.offsetTop">offsetTop</a></code></td> + <td>A distância da borda superior do elemento para o a borda superior do seu <code>offsetParent</code>.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.offsetWidth">offsetWidth</a></code></td> + <td>A largura de um elemento, em relação ao layout.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.ownerDocument">ownerDocument</a></code></td> + <td>O documento no qual o nó está, ou <code>null</code> se o nó não está dentro de nenhum.</td> + <td><code><a href="pt/DOM/document">Document</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <th>Nome</th> + <th>Descrição</th> + <th>Tipo</th> + <th>Disponibilidade</th> + </tr> + <tr> + <td><code><a href="pt/DOM/element.parentNode">parentNode</a></code></td> + <td>The parent element of this node, or <code>null</code> if the node is not inside of a <a href="pt/DOM/document">DOM Document</a>.</td> + <td><code><a href="pt/DOM/Node">Node</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.prefix">prefix</a></code></td> + <td>The namespace prefix of the node, or <code>null</code> if no prefix is specified.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.previousSibling">previousSibling</a></code></td> + <td>The node immediately preceding the given one in the tree, or <code>null</code> if there is no sibling node.</td> + <td><code><a href="pt/DOM/Node">Node</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.scrollHeight">scrollHeight</a></code></td> + <td>The scroll view height of an element.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.scrollLeft">scrollLeft</a></code></td> + <td>Gets/sets the left scroll offset of an element.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.scrollTop">scrollTop</a></code></td> + <td>Gets/sets the top scroll offset of an element.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.scrollWidth">scrollWidth</a></code></td> + <td>The scroll view width of an element.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.style">style</a></code></td> + <td>An object representing the declarations of an element's style attributes.</td> + <td><code><a href="pt/DOM/CSSStyleDeclaration">CSSStyle</a></code></td> + <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.tabIndex">tabIndex</a></code></td> + <td>Gets/sets the position of the element in the tabbing order.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Number">Number</a></code></td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.tagName">tagName</a></code></td> + <td>The name of the tag for the given element.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.textContent">textContent</a></code></td> + <td>Gets/sets the textual contents of an element and all its descendants.</td> + <td><code><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">String</a></code></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + </tbody> +</table> + +<h3 id="Methods" name="Methods">Métodos</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Nome & Descrição</th> + <th>Retorna</th> + <th>Disponibilidade</th> + </tr> + <tr> + <td><code><a href="pt/DOM/element.addEventListener">addEventListener</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">type</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Function">listener</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">useCapture</a> )</code><br> + Register an event handler to a specific event type on the element.</td> + <td>-</td> + <td><small><a href="pt/DOM/event">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.appendChild">appendChild</a>( <a href="pt/DOM/Node">appendedNode</a> )</code><br> + Insert a node as the last child node of this element.</td> + <td><a href="pt/DOM/Node">Node</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.blur">blur</a>()</code><br> + Removes keyboard focus from the current element.</td> + <td>-</td> + <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.click">click</a>()</code><br> + Simulates a click on the current element.</td> + <td>-</td> + <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.cloneNode">cloneNode</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">deep</a> )</code><br> + Clone a node, and optionally, all of its contents.</td> + <td><a href="pt/DOM/Node">Node</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.dispatchEvent">dispatchEvent</a>( <a href="pt/DOM/event">event</a> )</code><br> + Dispatch an event to this node in the DOM.</td> + <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.focus">focus</a>()</code><br> + Gives keyboard focus to the current element.</td> + <td>-</td> + <td><small><a href="pt/HTML">HTML</a>, <a href="pt/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.getAttribute">getAttribute</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Retrieve the value of the named attribute from the current node.</td> + <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.getAttributeNS">getAttributeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Retrieve the value of the attribute with the specified name and namespace, from the current node.</td> + <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Object">Object</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.getAttributeNode">getAttributeNode</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Retrieve the node representation of the named attribute from the current node.</td> + <td><a href="pt/DOM/Attr">Attr</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.getAttributeNodeNS">getAttributeNodeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Retrieve the node representation of the attribute with the specified name and namespace, from the current node.</td> + <td><a href="pt/DOM/Attr">Attr</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <th>Nome & Descrição</th> + <th>Retorna</th> + <th>Disponibilidade</th> + </tr> + <tr> + <td><code><a href="pt/DOM/element.getElementsByTagName">getElementsByTagName</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Retrieve a set of all descendant elements, of a particular tag name, from the current element.</td> + <td><a href="pt/DOM/NodeSet">NodeSet</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.getElementsByTagNameNS">getElementsByTagNameNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Retrieve a set of all descendant elements, of a particular tag name and namespace, from the current element.</td> + <td><a href="pt/DOM/NodeSet">NodeSet</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.hasAttribute">hasAttribute</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Check if the element has the specified attribute, or not.</td> + <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.hasAttributeNS">hasAttributeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Check if the element has the specified attribute, in the specified namespace, or not.</td> + <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.hasAttributes">hasAttributes</a>()</code><br> + Check if the element has any attributes, or not.</td> + <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.hasChildNodes">hasChildNodes</a>()</code><br> + Check if the element has any child nodes, or not.</td> + <td><a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">Boolean</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.insertBefore">insertBefore</a>( <a href="pt/DOM/Node">insertedNode</a>, <a href="pt/DOM/Node">adjacentNode</a> )</code><br> + Inserts the first node before the second, child, Node in the DOM.</td> + <td><a href="pt/DOM/Node">Node</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.normalize">normalize</a>()</code><br> + Clean up all the text nodes under this element (merge adjacent, remove empty).</td> + <td>-</td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.removeAttribute">removeAttribute</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Remove the named attribute from the current node.</td> + <td>-</td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.removeAttributeNS">removeAttributeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Remove the attribute with the specified name and namespace, from the current node.</td> + <td>-</td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <th>Nome & Descrição</th> + <th>Retorna</th> + <th>Disponibilidade</th> + </tr> + <tr> + <td><code><a href="pt/DOM/element.removeAttributeNode">removeAttributeNode</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a> )</code><br> + Remove the node representation of the named attribute from the current node.</td> + <td>-</td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.removeChild">removeChild</a>( <a href="pt/DOM/Node">removedNode</a> )</code><br> + Removes a child node from the current element.</td> + <td><a href="pt/DOM/Node">Node</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.removeEventListener">removeEventListener</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">type</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Function">handler</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">useCapture</a> )</code><br> + Removes an event listener from the element.</td> + <td>-</td> + <td><small><a href="pt/DOM/event">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.replaceChild">replaceChild</a>( <a href="pt/DOM/Node">insertedNode</a>, <a href="pt/DOM/Node">replacedNode</a> )</code><br> + Replaces one child node in the current element with another.</td> + <td><a href="pt/DOM/Node">Node</a></td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.scrollIntoView">scrollIntoView</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Boolean">alignWithTop</a> )</code><br> + Scrolls the page until the element gets into the view.</td> + <td>-</td> + <td><small><a href="pt/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.setAttribute">setAttribute</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Object">value</a> )</code><br> + Set the value of the named attribute from the current node.</td> + <td>-</td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.setAttributeNS">setAttributeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/Object">value</a> )</code><br> + Set the value of the attribute with the specified name and namespace, from the current node.</td> + <td>-</td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.setAttributeNode">setAttributeNode</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="pt/DOM/Attr">attrNode</a> )</code><br> + Set the node representation of the named attribute from the current node.</td> + <td>-</td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + <tr> + <td><code><a href="pt/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>( <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">namespace</a>, <a href="pt/Core_JavaScript_1.5_Reference/Global_Objects/String">name</a>, <a href="pt/DOM/Attr">attrNode</a> )</code><br> + Set the node representation of the attribute with the specified name and namespace, from the current node.</td> + <td>-</td> + <td><small><a href="pt/DOM">All</a></small></td> + </tr> + </tbody> +</table> + +<h3 id="Event_Handlers" name="Event_Handlers">Event Handlers</h3> + +<p>These are properties that correspond to the HTML 'on' event attributes.</p> + +<p>Unlike the corresponding attributes, the values of these properties are functions (or any other object implementing the <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a> interface) rather than a string. In fact, assigning an event attribute in HTML creates a wrapper function around the specified code. For example, given the following HTML:</p> + +<pre><div onclick="foo();">click me!</div> +</pre> + +<p>If <code>element</code> is a reference to this <code>div</code>, the value of <code>element.onclick</code> is effectively:</p> + +<pre>function onclick(event) { + foo(); +} +</pre> + +<p>Note how the <a href="pt/DOM/event">event</a> object is passed as parameter <code>event</code> to this wrapper function.</p> + +<dl> + <dt><a href="pt/DOM/element.onblur">onblur</a></dt> + <dd>Returns the event handling code for the blur event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onchange">onchange</a></dt> + <dd>Returns the event handling code for the change event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onclick">onclick</a></dt> + <dd>Returns the event handling code for the click event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.ondblclick">ondblclick</a></dt> + <dd>Returns the event handling code for the dblclick event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onfocus">onfocus</a></dt> + <dd>Returns the event handling code for the focus event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onkeydown">onkeydown</a></dt> + <dd>Returns the event handling code for the keydown event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onkeypress">onkeypress</a></dt> + <dd>Returns the event handling code for the keypress event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onkeyup">onkeyup</a></dt> + <dd>Returns the event handling code for the keyup event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onmousedown">onmousedown</a></dt> + <dd>Returns the event handling code for the mousedown event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onmousemove">onmousemove</a></dt> + <dd>Returns the event handling code for the mousemove event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onmouseout">onmouseout</a></dt> + <dd>Returns the event handling code for the mouseout event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onmouseover">onmouseover</a></dt> + <dd>Returns the event handling code for the mouseover event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onmouseup">onmouseup</a></dt> + <dd>Returns the event handling code for the mouseup event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onresize">onresize</a></dt> + <dd>Returns the event handling code for the resize event.</dd> +</dl> + +<dl> + <dt><a href="pt/DOM/element.onscroll">onscroll</a></dt> + <dd>Returns the event handling code for the scroll event.</dd> +</dl> + +<div class="noinclude"> </div> + +<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2> + + + +<p>{{Compat("api.Element")}}</p> diff --git a/files/pt-pt/dom/selection/index.html b/files/pt-pt/dom/selection/index.html new file mode 100644 index 0000000000..a33e618def --- /dev/null +++ b/files/pt-pt/dom/selection/index.html @@ -0,0 +1,76 @@ +--- +title: Selection (Seleção) +slug: DOM/Selection +translation_of: Web/API/Selection +--- +<h3 id="Introduction" name="Introduction">Introdução</h3> + +<p>Selection é a classe do objeto retornado por <code><a href="/en/DOM/window.getSelection" title="en/DOM/window.getSelection">window.getSelection()</a></code> e outros métodos. Um objeto Selection representa os intervalos que o usuário tenha selecionado. Normalmente, ele tem apenas um intervalo, acessada assim:</p> + +<pre>selection = window.getSelection(); +range = selection.getRangeAt(0);</pre> + +<p>Chamar o método <code><a href="/en/DOM/Selection/toString" title="en/DOM/Selection/toString">toString()</a></code> retorna o texto contido na seleção, por exemplo:</p> + +<pre>selection = window.getSelection(); +window.alert(selection); +</pre> + +<h3 id="Glossário">Glossário</h3> + +<p>Outros termos utilizados nesta seção.</p> + +<dl> + <dt>Âncora (anchor)</dt> + <dd>A âncora de uma seleção é o ponto de início da seleção. Ao fazer uma seleção com um mouse, a âncora no documento é o local onde o botão do mouse é inicialmente pressionado. Como o usuário muda a seleção usando o mouse ou o teclado, a âncora não se move.</dd> + <dt>Foco (focus)</dt> + <dd>O foco da seleção é o ponto final da seleção. Ao fazer uma seleção com o mouse, o foco está no documento onde o botão do mouse é liberado. Como o usuário muda a seleção usando o mouse ou o teclado, o foco é a final da seleção que se move.</dd> + <dt>Intervalo (range)</dt> + <dd>Um intervalo é uma parte contígua de um documento. Um intervalo pode conter nós inteiro, bem como partes de nós, como uma parte de um nó de texto. Um usuário normalmente só seleciona um intervalo de cada vez, mas é possível que um usuário selecione vários intervalos (por exemplo, usando a tecla Control). Um intervalo pode ser recuperado a partir de uma seleção como um objeto Range. Objetos Range também podem ser criadas através do DOM e programaticamente adicionado ou removido de uma seleção.</dd> +</dl> + +<h3 id="Properties" name="Properties">Propriedades</h3> + +<dl> + <dt><a href="/en/DOM/Selection/anchorNode" title="en/DOM/Selection/anchorNode">anchorNode</a></dt> + <dd>Retorna o nó em que a seleção começa.</dd> + <dt><a href="/en/DOM/Selection/anchorOffset" title="en/DOM/Selection/anchorOffset">anchorOffset</a></dt> + <dd>Retorna o número de caracteres que a âncora da seleção é compensada dentro do anchorNode.</dd> + <dt><a href="/en/DOM/Selection/focusNode" title="en/DOM/Selection/focusNode">focusNode</a></dt> + <dd>Retorna o nó em que a seleção termina.</dd> + <dt><a href="/en/DOM/Selection/focusOffset" title="en/DOM/Selection/focusOffset">focusOffset</a></dt> + <dd>Retorna o número de caracteres que o foco da seleção é compensado dentro do focusNode.</dd> + <dt><a href="/en/DOM/Selection/isCollapsed" title="en/DOM/Selection/isCollapsed">isCollapsed</a></dt> + <dd>Retorna um booleano indicando se os pontos de início e fim da seleção estão na mesma posição.</dd> + <dt><a href="/en/DOM/Selection/rangeCount" title="en/DOM/Selection/rangeCount">rangeCount</a></dt> + <dd>Retorna o número de faixas na seleção.</dd> +</dl> + +<h3 id="Methods" name="Methods">Métodos</h3> + +<dl> + <dt><a href="/en/DOM/Selection/addRange" title="en/DOM/Selection/addRange">addRange</a></dt> + <dd>Um objeto de intervalo (Range) que será adicionado à seleção.</dd> + <dt><a href="/en/DOM/Selection/collapse" title="en/DOM/Selection/collapse">collapse</a></dt> + <dd>Recolhe a seleção atual para um único ponto.</dd> + <dt><a href="/en/DOM/Selection/collapseToStart" title="en/DOM/Selection/collapseToStart">collapseToStart</a></dt> + <dd>Move o foco da seleção para o mesmo ponto da âncora.</dd> + <dt><a href="/en/DOM/Selection/collapseToEnd" title="en/DOM/Selection/collapseToEnd">collapseToEnd</a></dt> + <dd>Move a âncora da seleção para o mesmo ponto que o foco. O foco não se move.</dd> + <dt><a href="/en/DOM/Selection/containsNode" title="en/DOM/Selection/containsNode">containsNode</a></dt> + <dd>Indica se um determinado nó é parte da seleção.</dd> + <dt><a href="/en/DOM/Selection/deleteFromDocument" title="en/DOM/Selection/deleteFromDocument">deleteFromDocument</a></dt> + <dd>Apaga o conteúdo da seleção do documento.</dd> + <dt><a href="/en/DOM/Selection/extend" title="en/DOM/Selection/extend">extend</a></dt> + <dd>Move o foco da seleção para um ponto especificado.</dd> + <dt><a href="/en/DOM/Selection/getRangeAt" title="en/DOM/Selection/getRangeAt">getRangeAt</a></dt> + <dd>Retorna um objeto de intervalo (Range) representando um dos intervalos atualmente selecionados.</dd> + <dt><a href="/en/DOM/Selection/removeAllRanges" title="en/DOM/Selection/removeAllRanges">removeAllRanges</a></dt> + <dd>Remove todos os intervalos da seleção.</dd> + <dt><a href="/en/DOM/Selection/removeRange" title="en/DOM/Selection/removeRange">removeRange</a></dt> + <dd>Remove uma faixa (range) da seleção.</dd> + <dt><a href="/en/DOM/Selection/selectAllChildren" title="en/DOM/Selection/selectAllChildren">selectAllChildren</a></dt> + <dd>Adiciona todos os filhos do nó especificado para a seleção.</dd> + <dt><a href="/en/DOM/Selection/toString" title="en/DOM/Selection/toString">toString</a></dt> + <dd>Retorna uma string a ser representada pelo objeto de seleção, ou seja, o texto atualmente selecionado.</dd> +</dl> diff --git a/files/pt-pt/dom/storage/index.html b/files/pt-pt/dom/storage/index.html new file mode 100644 index 0000000000..7287b4bca5 --- /dev/null +++ b/files/pt-pt/dom/storage/index.html @@ -0,0 +1,108 @@ +--- +title: DOM Storage +slug: DOM/Storage +--- +<p>{{ ApiRef() }} {{ Fx_minversion_header(2) }}</p> +<h3 id="Summary" name="Summary">Resumo</h3> +<p>DOM Storage é o nome dado ao conjunto de características de armazenamento relacionadas (<a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">storage-related features</a>) inicialmente apresentadas na especificação <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/" title="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>, e agora dividida em sua própria especificação <a class="external" href="http://dev.w3.org/html5/webstorage/" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. DOM Storage foi desenhado para proporcionar uma alternativa mais segura e fácil de usar, para o armazenamento de informações em cookies. Atualmente ela está disponível somente nos navegadores baseados no Mozilla e WebKit, começando notavelmente com o <a class="internal" href="/pt/Firefox_2_para_desenvolvedores" title="pt/Firefox 2 para desenvolvedores">Firefox 2</a> e o <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a>.</p> +<div class="note"> + <strong>Nota:</strong> DOM Storage não é o mesmo que <a href="/en/Storage" title="en/Storage">mozStorage</a> (Interface XPCOM da Mozilla para o SQLite) ou <a href="/en/Session_store_API" title="en/Session_store_API">Session store API</a> (uma ferramenta de armazenamento <a href="/en/XPCOM" title="en/XPCOM">XPCOM</a> para uso de extensões).</div> +<h3 id="Description" name="Description">Descrição</h3> +<p>O mecanismo DOM Storage é um meio através do qual pares de strings de chaves/valores podem ser armazenados com segurança e mais tarde recuperados para uso. A meta desta adição é proporcionar um meio compreensível através do qual aplicações interativas possam ser construídas (incluindo habilidades avançadas, tal como ser capaz de trabalhar "offline" por períodos de tempo maiores).</p> +<p>Atualmente, somente navegadores baseados no Mozilla, Internet Explorer 8 beta 2 e Safari (não outros navegadores baseados em webkit, por exemplo, o Google Chrome) proporcionam um trabalho de implementação da especificação do DOM Storage. O Internet Explorer anterior a versão 8 tem uma característica similar chamada "<a class="external" href="http://msdn.microsoft.com/en-us/library/ms531424(VS.85).aspx">userData behavior</a>" que permite guardar dados através de múltiplas sessões do navegador.</p> +<p>Dom Storage é útil porque não existem métodos diretamente nos navegadores, bons para guardar quantidades de dados razoáveis por qualquer período de tempo. Os cookies do navegador (<a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">Browser cookies</a>) tem uma capacidade limitada e não proporcionam suporte para organizar dados armazenados, e outros métodos (tal como <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a>) que requerem um plugin externo.</p> +<p>Umas dos primeiros aplicativos públicos a fazer uso da nova funcionalidade DOM Storage (em adição ao userData Behavior do Internet Explorer) foi o <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (um aplicativo de tomada de notas) escrito por <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. Em seu aplicativo, Aaron simultaneamente salvava notas no servidor (quando a conexão a internet estava disponível) e em um armazenamento local de dados. Isto permitia ao usuário escrever seguramente, cópias de notas mesmo com uma conexão esporádica à internet.</p> +<p>Embora o conceito e implementação apresentados no halfnote seja comparativamente simples, sua criação mostra a possibilidade para uma nova geração de aplicativos web que sejam utilizáveis tanto online quanto offline.</p> +<h3 id="Reference" name="Reference">Referência</h3> +<p>A seguir vem objetos globais que existem como propriedades de todos os <a href="/en/DOM/window" title="en/DOM/window"><code>window</code> object</a>. Isto significa que eles podem ser acessados por <code>sessionStorage</code> ou <code>window.sessionStorage</code>. (Isto é importante porque você pode então usar IFrames para armazenar, ou acessar, dados adicionais, além do que está imediatamente incluído em sua página).</p> +<h4 id="sessionStorage" name="sessionStorage"><code>Storage</code></h4> +<p>Este é um construtor (<code>Storage</code>) para todas as instâncias Storage (<code>sessionStorage</code> e <code>globalStorage[location.host]).</code> <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> assim configuradao, pode ser acessado como <code>localStorage.removeKey e sessionStorage.removeKey</code>.</p> +<p><code>Itens globalStorage</code> não são instâncias de <code>Storage</code>, e sim uma instância de <code>StorageObsolete</code>.</p> +<p><code>Storage</code> é definido pelo WhatWG <a class="external" href="http://dev.w3.org/html5/webstorage/#storage-0" title="http://dev.w3.org/html5/webstorage/#storage-0">Storage Interface</a> como:</p> +<pre class="eval">interface <dfn>Storage</dfn> { + readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="dom-Storage-length">length</a>; + [IndexGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="dom-Storage-key">key</a>(in unsigned long index); + [NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="dom-Storage-getItem">getItem</a>(in DOMString key); + [NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="dom-Storage-setItem">setItem</a>(in DOMString key, in DOMString data); + [NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="dom-Storage-removeItem">removeItem</a>(in DOMString key); + void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="dom-Storage-clear">clear</a>(); +};</pre> +<p> </p> +<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4> +<p>Este é um objeto global (<code>sessionStorage</code>) que mantém uma área de armazenamento disponível enquanto durar a sessão da página. Uma sessão de página dura enquanto o navegador estiver aberto e continua mesmo sobre recarregamentos e restaurações. Abrindo uma página em uma nova aba ou janela causará o início de uma nova sessão.</p> +<pre class="eval">// Save data to a the current session's store +sessionStorage.username = "John"; + +// Access some stored data +alert( "username = " + sessionStorage.username ); +</pre> +<p>O objeto <code>sessionStorage</code> é útil para guardar dados temporários que devem ser salvos e restaurados se o navegador for atualizado acidentalmente.</p> +<p>{{ fx_minversion_note("3.5", "Nas versões anteriores ao Firefox 3.5, os dados em sessionStorage não eram restaurados automaticamente depois de recuperar-se de uma quebra no navegador. A partir do Firefox 3.5, isto funciona como na especificação.") }}</p> +<p><strong>Exemplos:</strong></p> +<p>Autosalvar o conteúdo de uma campo de texto, e se o navegador for atualizado acidentalmente , restaurar o conteúdo do campo de texto, não tendo perdas na escrita.</p> +<pre class="eval"> // Get the text field that we're going to track + var field = document.getElementById("field"); + + // See if we have an autosave value + // (this will only happen if the page is accidentally refreshed) + if ( sessionStorage.autosave ) { + // Restore the contents of the text field + field.value = sessionStorage.autosave; + } + + // Check the contents of the text field every second + setInterval(function(){ + // And save the results into the session storage object + sessionStorage.autosave = field.value; + }, 1000); +</pre> +<p><strong>Mais informações:</strong></p> +<ul> + <li><a class="external" href="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute" title="http://dev.w3.org/html5/webstorage/#the-sessionstorage-attribute">sessionStorage specification</a></li> +</ul> +<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4> +<p>{{ Non-standard_header() }} Este é um objeto global (<code>globalStorage</code>) que mantém múltiplas áreas de armazenamento privadas que podem ser usadas para guardar dados por um longo período de tempo (por exemplo, sobre múltiplas láginas e sessões do navegador).</p> +<div class="warning"> + Nota: <code>globalStorage</code> não é uma instância de <code>Storage</code>, mas uma instância <code>StorageList</code> contendo instâncias <code>StorageObsolete</code>.</div> +<pre class="eval">// Save data that only scripts on the mozilla.org domain can access +globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?"; +</pre> +<p>Especificamente, o objeto <code>globalStorage</code> fornece acesso a um número de diferentes objetos de armazenamento em que os dados sejam armazenados. Por exemplo, se construirmos uma página web que use <code>globalStorage</code> em seu domínio (developer.mozilla.org) é necessário termos o objeto de armazenamento a seguir disponível para nós:</p> +<ul> + <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> - Todas as páginas web com o subdomínio developer.mozilla.org podem tanto ler quanto escrever dados neste objeto de armazenamento.</li> +</ul> +<p>{{ Fx_minversion_note(3, "O Firefox 2 passou a permitir acesso aos objetos de armazenamento superiores ao documento corrente na hierarquia do domínio. Por razões de segurança isto não é mais permitido no Firefox 3. Além disso, a proposta de adição ao HTML 5 foi removida da especificação do HTML 5 em favor de <code>localStorage</code>, que foi implementado no Firefox 3.5.") }}</p> +<p><strong>Exemplos:</strong></p> +<p>Todos estes exemplos requerem que você tenha uns script inserido (com o código seguinte) em todas as páginas que você quiser ver o resultado.</p> +<p>Lembrar o nome de usuário para o subdomínio particular que está sendo visitado:</p> +<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John"; +</pre> +<p>Manter o número de vezes que um usuário visitou todas as páginas do seu domínio:</p> +<pre class="eval"> // parseInt must be used since all data is stored as a string + globalStorage['mozilla.org'].visits = + parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1; +</pre> +<h4 id="globalStorage" name="globalStorage"><code>localStorage</code></h4> +<p><code>localStorage</code> é o mesmo que <code>globalStorage[location.hostname]</code>, com a exceção de ser projetado para a origem do HTML 5 (esquema + nome do host + porta não padrão) e <code>localStorage</code> é uma instância de <code>Storage</code> diferente de <code>globalStorage[location.hostname]</code> que é uma instância de <code>StorageObsolete</code>. Por exemplo, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> não está disponível para acessar o mesmo objeto <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mas eles podem acessar o mesmo item <code>globalStorage</code>. <code>localStorage</code> é uma interface padrão enquanto <code>globalStorage</code> não é padrão. <code>localStorage</code> foi adicionada ao Firefox 3.5.</p> +<p>Por favor, note que configurar a propriedade <code>globalStorage[location.hostname]</code> <strong>não</strong> a configura em <code>localStorage</code> e por extensão <code>Storage.prototype</code> não afeta itens <code>globalStorage</code>, somente extendendo o que <code>StorageObsolete.prototype</code> faz.</p> +<div class="note"> + <strong>Nota:</strong> Quando o navegador entra em modo de navegação privada, um novo banco de dados temporário é criado para guardar dados de armazenamento local; este banco de dados é vazio, e é jogado fora qunado o modo de navegação privado é desativado.</div> +<h3 id="More_information" name="More_information">Mais informações</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/webstorage/" title="http://www.w3.org/TR/webstorage/">Web Storage</a> (W3C Web Apps Working Group)</li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey</a></li> +</ul> +<h3 id="Examples" name="Examples">Exemplos</h3> +<ul> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Basic DOMStorage Examples</a> - Quebrado no Firefox 3 pelo uso de globalStorage em um nível de domínio acima do domínio atual, o que não é permitido no Firefox 3.</li> + <li><a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> - (exibido como quebrado no Firefox 3) Aplicativo de escrita de notas que usa DOM Storage.</li> + <li><a class="external" href="http://noteboard.eligrey.com/" title="http://noteboard.eligrey.com/">Noteboard</a> - Aplicativo de escrita de notas que não armazena dados em um servidor. Todos os documentos são armazenados localmente. A tecla tab também trabalha na indentação de texto.</li> + <li><a class="external" href="http://www.eligrey.com/projects/jdata/" title="http://www.eligrey.com/projects/jdata/">jData</a> - Um objeto de interface localStorage compartilhado que pode ser acessado através de qualquer website na internet e trabalha no Firefox 3+, Webkit 3.1.2+ nightlies e IE8. É como uma pseudo-globalStorage[""] em que o acesso a escrita precisa de confirmação do usuário.</li> +</ul> +<h3 id="Related" name="Related">Relacionado</h3> +<ul> + <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">HTTP cookies</a> (<code><a href="/en/DOM/document.cookie" title="en/DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage</a></li> + <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p> |