+---

+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>&lt;a&gt;</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>

+---

+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>

+---

+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>

+---

+title: Document.dir

+slug: Web/API/Document.dir

+tags:

+ - API

+ - DOM

+ - HTML

+ - dir

+ - ltr

+ - rtl

+translation_of: Web/API/Document/dir

+---

+<p>{{Apiref("Document")}}{{non-standard_header}}</p>

+<p>A propriedade <code><strong>Document.dir</strong></code> é uma {{domxref("DOMString")}} que representa a direccionalidade do texto do documento, quer seja da esquerda para a direita (por omissão) ou da direita para a esquerda. Os valores possíveis são <code>'rtl'</code>, da direita para a esquerda e <code>'ltr'</code>, da esquerda para a direita.</p>

+<h2 id="Síntaxe">Síntaxe</h2>

+<pre class="syntaxbox"><em>dirStr</em> = <em>document.</em>dir;

+<em>document.dir</em> = <em>dirStr;</em>

+</pre>

+<h2 id="Especificações">Especificações</h2>

+<p>Este atributo, apesar de implementado por diversos browsers não faz parte de nenhuma especificação.</p>

+<h2 id="Compatibilidade_por_browser">Compatibilidade por browser</h2>

+<p>{{ CompatibilityTable() }}</p>

+<div id="compat-desktop">

+ <table class="compat-table">

+ <tbody>

+ <tr>

+ <th>Feature</th>

+ <th>Chrome</th>

+ <th>Firefox (Gecko)</th>

+ <th>Internet Explorer</th>

+ <th>Opera</th>

+ <th>Safari (WebKit)</th>

+ </tr>

+ <tr>

+ <td>Suporte básico</td>

+ <td>{{CompatUnknown}}</td>

+ <td>{{CompatVersionUnknown}} [1]</td>

+ <td>{{CompatVersionUnknown}}</td>

+ <td>{{CompatUnknown}}</td>

+ <td>{{CompatUnknown}}</td>

+ </tr>

+ </tbody>

+ </table>

+</div>

+<div id="compat-mobile">

+ <table class="compat-table">

+ <tbody>

+ <tr>

+ <th>Feature</th>

+ <th>Android</th>

+ <th>Firefox Mobile (Gecko)</th>

+ <th>IE Phone</th>

+ <th>Opera Mobile</th>

+ <th>Safari Mobile</th>

+ </tr>

+ <tr>

+ <td>Suporte básico</td>

+ <td>{{ CompatUnknown() }}</td>

+ <td>{{CompatVersionUnknown}} [1]</td>

+ <td>{{ CompatVersionUnknown() }}</td>

+ <td>{{ CompatUnknown() }}</td>

+ <td>{{ CompatUnknown() }}</td>

+ </tr>

+ </tbody>

+ </table>

+</div>

+<p>[1] Antes do Firefox 23, a propriedade <code>document.dir</code> retornava "ltr" independentemente do valor atribuido a dir na raiz do elemento {{htmlelement("html")}}. Caso a direcção fosse definida no nó <code>&lt;html&gt;</code>, <code>document.dir</code> não teria qualquer efeito em alterá-la visivelmente (apesar disto, a obtenção da propriedade <code>document.dir</code> iria indicar que a direcção teria sido alterada). Contudo, se o atributo dir estiver definido no element<code>o &lt;html&gt;</code> e for alterado, quer a direccionalidade do documento quer a propriedade <code>document.dir</code> irão reflectir a mudança.</p>

+<h2 id="Ver_também">Ver também</h2>

+<ul>

+ <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li>

+</ul>

+---

+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 ) &gt; -1;

+ });

+</pre>

+

+<p><span class="comment">XXX escreva-me == Notas == Um método similar existe em &lt;code&gt;Element&lt;/code&gt;</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>