Propriedades do Objeto Document - 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.