Propriedades do Objeto Document em JavaScript

O objeto document em JavaScript é destinado ao trabalho com a estrutura DOM e está definido no objeto global window. Para acessar informações básicas sobre uma página web, o objeto document oferece diversas propriedades:

title: representa o título do documento, que é especificado no elemento <title>.
lastModified: contém a data da última modificação do documento.
URL: contém o endereço URL do documento atual.
domain: contém o domínio ao qual a página web do documento pertence.
domain: contém o domínio ao qual a página web do documento pertence.
documentElement: fornece acesso ao elemento raiz <html>.
head: fornece acesso ao elemento <head> na página web.
cookie: contém uma coleção de todos os cookies para o documento atual.
images: contém uma coleção de todos os objetos de imagem (elementos img).
links: contém uma coleção de links, elementos <a> e <area>, que têm o atributo href definido.
anchors: fornece acesso a uma coleção de elementos <a> que têm o atributo name definido.
forms: contém uma coleção de todas as formas na página web.

Essas propriedades não fornecem acesso a todos os elementos, mas permitem obter os elementos mais frequentemente usados na página web. Por exemplo, para obter o nó raiz do documento:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script>
      console.log(document.documentElement);
    </script>
  </body>
</html>

Como resultado, o conteúdo atual da página web será exibido no console conforme definido no código acima.

Ou para exibir informações básicas sobre o documento:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <script>
      console.log(document.title);
      console.log(document.lastModified);
      console.log(document.URL);
    </script>
  </body>
</html>

A saída do console, no meu caso, será:

Programício
05/27/2024 20:15:58
file:///C:/app/index.html

Obtendo todas as imagens na página:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <img src="picture1.png" alt="Imagem 1" />
    <img src="picture2.png" alt="Imagem 2" />
    <img src="picture3.png" alt="Imagem 3" />
    <script>
      const images = document.images;
      // modificando a primeira imagem
      images[0].src = "picture_4.jpg";
      images[0].alt = "Nova imagem";
      // iterando sobre todas as imagens
      for (let img of images) {
        console.log(`Url: "${img.src}" Alt: "${img.alt}"`);
      }
    </script>
  </body>
</html>

Assim como no código HTML podemos definir atributos para o elemento img, no código JavaScript podemos obter e definir os valores desses atributos através das propriedades src e alt. A saída do console será semelhante a:

Url: file:///C:/app/picture_4.jpg Alt: Nova imagem
Url: file:///C:/app/picture2.png Alt: Imagem 2
Url: file:///C:/app/picture3.png Alt: Imagem 3

Vamos ver todas os links da página:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Programício</title>
  </head>
  <body>
    <a href="article1.html">Artigo 1</a>
    <a href="article2.html">Artigo 2</a>
    <a href="article3.html">Artigo 3</a>
    <script>
      const links = document.links;
      // iterando sobre todas os links
      for (let link of links) {
        console.log(`Href: "${link.href}" Text: "${link.innerText}"`);
      }
    </script>
  </body>
</html>

Como o atributo href é definido nos links, podemos obter seu valor durante a iteração.