recursal/MDN huggingface dataset:
Document.characterSet
=====================

A propriedade somente leitura Document.characterSet retorna a character encoding(codificação de caracteres) do documento com o qual ele é renderizado atualmente. (Uma codificação de caracteres é um conjunto de caracteres e como interpretar bytes nesses caracteres.)

**Nota:** Um "character set"(conjunto de caracteres) e "character encoding"(codificação de caracteres) estão relacionados, mas diferentes. Apesar do nome dessa propriedade, ela retorna a codificação.

Usuários podem sobrepor a codificação especificada pelo desenvolvedor dentro do cabeçalho Content-Type (tipo de conteúdo) ou embutida como <meta charset = "utf-8">, como no menu `Exibir → Codificacao de Texto` . Essa substituição é fornecida para corrigir codificações especificadas pelo desenvolvedor incorretas que resultam em texto ilegivel.

**Nota:** As propriedades `document.charset` e `document.inputEncoding` são aliases legados para `document.characterSet`. Não use mais eles.

Sintaxe
-------
```

var string = document.characterSet;
```

Exemplos
--------


```html
<button onclick="console.log(document.characterSet);">
  Registro de Codificacao de Caracteres
</button>
<!-- mostra a codificacao de caracteres do documento no console do desevolvedor, como "ISO-8859-1" ou "UTF-8" -->
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-characterset① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.alinkColor
===================

**Deprecated:** This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

Retorna ou define a cor de um link ativo no corpo do documento. Um link está ativo durante o tempo entre os eventos `mousedown` e `mouseup`.

Sintaxe
-------
```

var color = document.alinkColor;
document.alinkColor = color;
```


color é uma string que contém o nome da cor (e.g., `blue`, `darkblue`, etc.) ou o valor hexadecimal da cor (e.g., `#0000FF`)

Notas
-----

O valor padrão para esta propriedade no Mozilla Firefox é vermelho (`#ee0000` em hexadecimal).

`document.alinkColor` está obsoleto em DOM Level 2 HTML. Uma alternativa é o seletor de CSS `:active`.

Outra alternativa é `document.body.aLink`, embora tenha sido depreciado no HTML 4.01 a favor da alternativa CSS.

Gecko suporta ambos `alinkColor`/`:active` e `:focus`. Suporte para Internet Explorer 6 e 7 `alinkColor`/`:active` apenas para HTML anchor (<a>) links e o comportamento é o mesmo que `:focus` sob Gecko. Não há suporte para `:focus` no IE.

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.getElementsByClassName()
=================================

Retorna um vetor de objetos com todos os elementos filhos que possuem o nome da classe dada. Quando invocado no objeto *document*, o documento é examinado por completo, incluindo o nó raiz. Você também pode invocar `getElementsByClassName()` em qualquer elemento; isso retornaria somente elementos que são descendentes do nó raiz especificado com o nome da classe.

Sintaxe
-------
```

var elementos = document.getElementsByClassName(nomes); // ou:
var elementos = rootElement.getElementsByClassName(nomes);
```


* *elementos* é uma lista viva do `HTMLCollection` de elementos encontrados.
* *nomes* é um texto que representa uma lista dos nomes das classes que são separados por espaço em branco.
* getElementsByClassName pode ser invocado por qualquer elemento, não somente pelo nó raiz *document.* O elemento no qual ele é chamado será usado como a raiz para a busca\*.\*
Exemplos
--------

Retorna todos os elementos que possuem a classe 'teste'


```js
document.getElementsByClassName("teste");
```


Retorna todos os elementos que possuem as classes 'vermelho' e 'teste'


```js
document.getElementsByClassName("vermelho teste");
```


Retorna todos os elementos que possuem a classe 'teste' dentro do elemento que possui o ID 'principal'


```js
document.getElementById("principal").getElementsByClassName("teste");
```


Nós podemos também usar os métodos do Array.prototype em qualquer dos elementos `HTMLCollection` passando o *HTMLCollection* como valor deste método. Aqui podemos encontrar todos os elementos do tipo *div* que possuem a classe 'teste':


```js
var elementosTeste = document.getElementsByClassName("teste");
var divsTeste = Array.prototype.filter.call(
  elementosTeste,
  function (elementoTeste) {
    return elementoTeste.nodeName === "DIV";
  },
);
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-getelementsbyclassname① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Especificação
-------------

* W3C: getElementsByClassName
Document.compatMode
===================

Indica se o documento está renderizado no Quirks mode ou no modo dos Padrões.

Sintaxe
-------
```

modo = document.compatMode
```

Valores
-------

* `"BackCompat"` se o documento está em **quirks mode**;
* `"CSS1Compat"` se o documento está no modo "não-*quirks*" (também conhecido como "**full standards mode**") ou "*limited-quirks*" (também conhecido como "**almost standards mode**").

`modo`

É um valor enumerado que pode ser:


**Nota:** Nota: todos estes modos agora são definidos em padrões, então os antigos nomes "standards" e "almost standards" são sem sentido, e portanto não são mais usados nos padrões.

Exemplo
-------
```

if (document.compatMode == "BackCompat") {
  // in Quirks mode
}
```

Especificações
--------------

* DOM: Document.compatMode
Document.elementFromPoint()
===========================

O método **`elementFromPoint()`** da interface `Document` retorna o elemento de maior nível nas coordenadas especificadas.

Se o elemento no ponto especificado pertencer à outro documento (por exemplo, um subdocumento em um iframe), será retornado o pai do subdocumento (o próprio iframe). Se o elemento em determinado ponto for anônimo ou for um conteudo gerado por XBL, como por exemplo barras de scroll de caixas de texto, então será retornado o primeiro elemento pai, não-anônimo (por exemplo, a própria caixa de texto).

Se o ponto especificado estiver fora dos limites visíveis do documento ou tiver uma coordenada negativa, o resultado é `null`.

Se você precisa encontrar uma posição específica dentro do elemento, use `Document.caretPositionFromPoint()` (en-US).

**Nota:** Chamados por documentos XUL devem esperar até o evento `onload` ser acionado antes de chamar este método.

Sintaxe
-------
```

var element = document.elementFromPoint(x, y);
```

### Parâmetros

x

Uma posição horizontal dentro do viewport atual.

y

Uma position vertical dentro do viewport atual.

### Valor retornado

O objeto de nível mais alto `Element` dentro das coordenadas declaradas.

Exemplo
-------


```html
<!doctype html>
<html lang="en">
  <head>
    <title>exemplo de elementFromPoint</title>

    <script>
 function changeColor(newColor) {
 elem = document.elementFromPoint(2, 2);
 elem.style.color = newColor;
 }
 </script>
  </head>

  <body>
    <p id="para1">Algum texto aqui</p>
    <button onclick="changeColor('blue');">azul</button>
    <button onclick="changeColor('red');">vermelho</button>
  </body>
</html>
```

Especificações
--------------

| Specification |
| --- |
| CSSOM View Module # dom-document-elementfrompoint |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.referrer
=================

Retorna o URI da página que continha o *link* para a página atual.

Sintaxe
-------
```

string = document.referrer;
```

Notas
-----

O valor retornado será uma *string* vazia se o usuário tiver chegado na página diretamente (digitando o endereço no navegador ou como um item "Favorito"). Como essa propriedade retorna apenas uma *string*, ela não dá acesso DOM à página que fez a referência.

Especificação
-------------

* DOM Level 2: referrer
Document.URL
============

A propriedade **`URL`** (usada apenas para leitura) da Interface `Document` retorna a URL atual do navegador como um texto (string).

Síntaxe
-------


```js
var url_atual = document.URL;
```

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-url① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.documentURI
====================

A propiedade **`documentURI`** da interface `Document` retorna uma string com a localização de um documento.Na definição original DOM3 **`documentURI`** é um atributo de leitura/escrita.No padrão mais recente DOM4 é somente de leitura.Sintaxe
-------
```

var string = document.documentURI;
```

Notas
-----

Os Documentos HTML tem uma propriedade `document.URL` que retorna o mesmo valor (localização do documento).

A diferençã é que **`document.URL`** só pode ser usado em documentos HTML, enquanto **`documentURI`** está disponivel para todos os documentos web.

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-documenturi① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.getElementsByName()
============================

O método\*\*`getElementsByName()`\*\* do objeto `Document` retorna uma coleção de elementos `NodeList` com um dado `name` (en-US) no documento.

Sintaxe
-------
```

var elementos = document.getElementsByName(nome);
```


* *elementos* é uma coleção ativa de `NodeList`, significando que ele atualiza automaticamente com os novos elementos com o mesmo `nome` que são adicionados/removidos do documento.
* *nome* é um valor do atributo `nome` dos elemento(s).
Exemplo
-------


```html
<!doctype html>
<html lang="en">
  <title>Exemplo: usando document.getElementsByName</title>

  <input type="hidden" name="up" />
  <input type="hidden" name="down" />

  <script>
 var up\_nomes = document.getElementsByName("up");
 console.log(up\_nomes[0].tagName); // exibindo o campo "INPUT"
 </script>
</html>
```

Notas
-----

O atributo `name` (en-US) pode somente ser aplicado nos documentos (X)HTML.

A coleção retornada `NodeList` contém *todos* os elementos com o respectivo `nome`, tal como `<meta>`, `<object>` (en-US), e até os elementos o qual não suporta o atributo `nome` para todos.

**Aviso:** O método **getElementsByName** trabalha diferentemente em IE10 e anteriores. Além de que, `getElementsByName()` também retorna elementos que tem um atributo `id` com o valor especificado. Seja cuidadoso para não usar a mesma string como ambos `nome` e `id`.

**Aviso:** O método **getElementsByName** trabalha diferentemente no IE. Portanto, `getElementsByName()` não retorna todos os elementos no qual não pode ter um atributo `nome` (tal como `<span>`).

**Aviso:** Ambos IE e Edge retorna um `HTMLCollection`, e não um `NodeList`

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-document-getelementsbyname-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* `document.getElementById()` para retornar uma referência para um elemento por um único `id`
* `document.getElementsByTagName()` (en-US) para retornar referências para elementos com o mesmo nome tag
* `document.querySelector()` para retornar referências para elementos via seletores CSS como `'div.myclass'`
Document.createElementNS()
==========================

Creates an element with the specified namespace URI and qualified name.

Cria um elemento com Namespace URI e nome qualificado, como especificado.

Syntax
------
```

element = document.createElementNS(namespaceURI, qualifiedName);
```


* `element` é o element (en-US) criado.
* `namespaceURI` é uma string que especifica o namespace URI para associar com o elemento. A propriedade namespaceURI (en-US) do elemento criado é inicializada com os valores de `namespaceURI`. (Consulte seção abaixo para "Namespace URI's válidos")
* `qualifiedName` é uma string que especifica o tipo de elemento a ser criado. A propriedade nodeName (en-US) do elemento criado é inicializada com o valor de `qualifiedName`
Namespace URI's válidos
-----------------------

* HTML - Use `https://www.w3.org/1999/xhtml`
* SVG - Use `https://www.w3.org/2000/svg`
* XBL - Use `http://www.mozilla.org/xbl`
* XUL - Use `http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul`
Exemplo
-------

Isso cria um novo elemento <div> no namespace XHTML e anexa ele ao elemento vbox. Embora isso não seja um documento XUL extremamente útil, pode demonstrar o uso de elementos de dois namespaces diferentes em apenas um documento:


```xml
<?xml version="1.0"?>
<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 xmlns:html="https://www.w3.org/1999/xhtml"
 title="||Working with elements||"
 onload="init()">

<script type="text/javascript"><![CDATA[
 var container;
 var newdiv;
 var txtnode;

 function init(){
 container = document.getElementById("ContainerBox");
 newdiv = document.createElementNS("https://www.w3.org/1999/xhtml","div");
 txtnode = document.createTextNode("Este é o texto construído dinâmicamente com createElementNS e createTextNode então é inserido no documento usando appendChild.");
 newdiv.appendChild(txtnode);
 container.appendChild(newdiv);
 }

]]></script>

 <vbox id='ContainerBox' flex='1'>
  <html:div>
   O script desta página irá colocar conteúdo dinâmico abaixo:
  </html:div>
 </vbox>

</page>
```

Notas
-----

O exemplo dado anteriormente usa script inline que não é recomendado em documentos XHTML. Este exemplo particular é atualmente um documento XUL com XHTML incorporado, contudo, a recomendação ainda se aplica. scripts Inline não causam nenhum problema neste pequeno exemplo, contudo, para qualquer trabalho sério você precisa ler sobre Uso correto de CSS e JavaScript en documentos XHTML.

Para criar um elemento sem especificar seu namespace URI, use o método createElement.

Especificação
-------------

* DOM 2 Core: createElementNS
* Namespaces em XML
Veja também
-----------

* `document.createElement()`
* `document.createTextNode()` (en-US)
* `Element.namespaceURI` (en-US)
* Namespaces in XML
Document.close()
================

O metodo `document.close()` termina a gravação em um documento, aberto com document.open().

Sintaxe
-------
```

document.close();
```

Exemplo
-------
```

// abre um documento e escreve nele.
// escreve o conteúdo no documento.
// fecha o documento.
document.open();
document.write("<p>O primeiro e unico conteúdo.</p>");
document.close();
```

Especificação
-------------

DOM Level 2 HTML: `close()` Method
Document.head
=============

Retorna o elemento `<head>` do documento atual. Se existir mais de um elemento `<head>`, apenas o primeiro será devolvido.

Sintaxe
-------
```

var objRef = document.head;
```

Exemplo
-------


```js
// No HTML: <head id="my-document-head">
var aHead = document.head;

alert(aHead.id); // "my-document-head";

alert(document.head === document.querySelector("head")); // true
```

Notas
-----

`document.head` suporta apenas leitura. Qualquer tentativa de atribuir um valor a essa propriedade irá falhar silenciosamente ou irá, usando o modo ECMAScript Strict (en-US) de um browser Gecko, disparar um `TypeError`.

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-document-head-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja Também
-----------

* `document.body`
Document.createElement()
========================

Em um documento HTML, o método **`Document.createElement()`** cria o elemento HTML especificado ou um `HTMLUnknownElement` (en-US) se o nome do elemento dado não for conhecido.

Em um documento XUL, o elemento XUL especificado é criado.

Em outros documentos, ele cria um elemento com um *namespace* URI `null`.

Sintaxe
-------
```

var elemento = document.createElement(nomeDaTag);
```


* `elemento` é o objeto `Element` criado.
* `nomeDaTag` é uma *string* que especifica o tipo do elemento a ser criado. O `nodeName` (en-US) do elemento criado é inicializado com o valor da `nomeDaTag`. Não use nomes qualificados (como "html:a") com este método.
Exemplo
-------

Este código cria uma nova `<div>` e a insere antes do elemento com ID "`div1`".

### HTML


```html
<!doctype html>
<html>
  <head>
    <title>||Trabalhando com elementos||</title>
  </head>
  <body>
    <div id="div1">O texto acima foi criado dinamicamente.</div>
  </body>
</html>
```

### JavaScript


```js
document.body.onload = adcElemento;

function adcElemento() {
  // cria um novo elemento div
  // e dá à ele conteúdo
  var divNova = document.createElement("div");
  var conteudoNovo = document.createTextNode("Olá, cumprimentos!");
  divNova.appendChild(conteudoNovo); //adiciona o nó de texto à nova div criada

  // adiciona o novo elemento criado e seu conteúdo ao DOM
  var divAtual = document.getElementById("div1");
  document.body.insertBefore(divNova, divAtual);
}
```

Notas
-----

* Quando chamada em um objeto de documento marcado como um documento HTML, `createElement()` torna seu argumento caixa-baixa antes de criá-lo.
* Para criar um elemento com um nome qualificado e *namespace URI*, use `document.createElementNS()`.
* Antes do Gecko 2.0 você podia incluir os símbolos de menor que e maior que em volta da `tagName` no modo *quirks*; a partir do Gecko 2.0, a função comporta-se da mesma forma em ambos os modos *quirks* e estrito.
* A partir do Gecko 19.0, `createElement(null)` funciona como `createElement("null")`. Note que o Opera torna `null` uma *string*, mas ambos Chrome e Internet Explorer lançarão erros.
* A partir do Gecko 22.0 `createElement()` não mais usa a interface `HTMLSpanElement` quando o argumento é "bgsounds", "multicol", or "image". Ao invés disso, `HTMLUnknownElement` é usado para "bgsound", "multicol" e `HTMLElement` (en-US) `HTMLElement` é usado para "image".
* A implementação Gecko de `createElement` não se conforma à especificação DOM para documentos XUL e XHTML: `localName` e `namespaceURI` não estão definidos para `null` no elemento criado. Veja Firefox bug 280692 para detalhes.
Especificações
--------------

* DOM 2 Core: createElement
* HTML5: APIs in HTML documents
Document.designMode
===================

Sumário
-------

`document.designMode` controla se o documento todo é editável. Valores validos são `"on"` e `"off"`. De acordo com a especificação, esta propriedade é por padrão `"off"`. Firefox segue este padrão. Nas versões anteriores do Chrome e IE o padrão é `"inherit"`. No IE6-10, o valor é capitalizado.

Sintaxe
-------


```js
var mode = document.designMode;
document.designMode = "on";
document.designMode = "off";
```

Exemplo
-------

Cria um documento `<iframe>` editável:
```

iframe_node.contentDocument.designMode = "on";
```

Especificação
-------------

| Specification |
| --- |
| HTML Standard # dom-document-designmode-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Rich-Text Editing in Mozilla
* `HTMLElement.contentEditable`
* designMode property on MSDN
readystatechange
================

O evento `readystatechange` é ativado quando o atributo `readyState` de um documento é alterado.

Informações gerais
------------------

Especificação

HTML5

Interface

Event

Propaga

Não

Cancelável

Não

Alvo

Document

Ação Padrão

Nenhuma.

Propriedades
------------

| Property | Type | Description |
| --- | --- | --- |
| `target` Somente leitura  | `EventTarget` | The event target (the topmost target in the DOM tree). |
| `type` Somente leitura  | `DOMString` | The type of event. |
| `bubbles` Somente leitura  | `Boolean` | Whether the event normally bubbles or not. |
| `cancelable` Somente leitura  | `Boolean` | Whether the event is cancellable or not. |

Exemplo
-------


```js
// alternativa ao DOMContentLoaded
document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
};
```

Compatibilidade com navegadores
-------------------------------

Este evento tem sido suportado pelo Internet Explorer há várias versões, e pode ser usada como uma alternativa para o evento `DOMContentLoaded` (en-US) (veja a seção cross-browser fallback).

Eventos Relacionados
--------------------

* `DOMContentLoaded (en-US)`
* `readystatechange (en-US)`
* `load (en-US)`
* `beforeunload (en-US)`
* `unload (en-US)`
Document.contentType
====================

**`Document.contentType`** é uma propriedade somente de leitura, que retorna o tipo MIME do documento que esta sendo rendenrizado.Isso pode vir de cabeçalhos HTPP ou de outras fontes de informações MIME, e pode se afetado por conversões realizadas pelo navegador ou pelas extenções.

**Nota:** Esta proiedade não é afetada pelos elementos `<meta>`.

Sintaxe
-------
```

contentType = document.contentType;
```

### Value

`contentType` é uma propriedade somente de leitura.

Especificações
--------------

| Specification |
| --- |
| DOM Standard # ref-for-dom-document-contenttype① |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Document.hasFocus()
===================

O método **`Document.hasFocus()`** retorna um valor `Boolean` que indica se o documento ou qualquer elemento dentro do documento está com o foco ativo. Este método pode ser usado para determinar se o elemento ativo em um documento tem foco.

**Nota:** Quando se está visualizando um documento, um elemento com focus é sempre o ativo no mesmo, mas um elemento ativo não necessariamente tem o foco. Por exemplo, um elemento ativo com uma janela (popup) que não é a principal não tem foco.

Sintaxe
-------
```

focused = document.hasFocus();
```

### Valor retornado

`false` se o elemento ativo no documento não tem foco; `true` se o elemento ativo no documento tem foco.

Exemplo
-------


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title>
    <style>
 #message {
 font-weight: bold;
 }
 </style>
    <script>
 setInterval( checkPageFocus, 200 );

 function checkPageFocus() {
 var info = document.getElementById("message");

 if ( document.hasFocus() ) {
 info.innerHTML = "O documento tem o foco.";
 } else {
 info.innerHTML = "O documento não tem o foco.";
 }
 }

 function openWindow() {
 window.open (
 "http://developer.mozilla.org/",
 "mozdev",
 "width=640,
 height=300,
 left=150,
 top=260"
 );
 }
 </script>
  </head>
  <body>
    <h1>Exemplo do JavaScript hasFocus</h1>
    <div id="message">Esperando por ação do usuário</div>
    <div><button onclick="openWindow()">Abre uma nova janela</button></div>
  </body>
</html>
```

Especificações
--------------

| Specification |
| --- |
| HTML Standard # dom-document-hasfocus-dev |

Compatibilidade com navegadores
-------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Veja também
-----------

* Usando a API de Page Visibility (en-US)