Proprietțile obiectului document

Pentru a lucra cu structura DOM în JavaScript, este destinat obiectul document, care este definit în obiectul global window. Pentru obținerea informațiilor de bază despre pagina web, obiectul document furnizează o serie de proprietăți:

title: reprezintă titlul documentului (specificat în elementul <title>)
lastModified: conține data ultimei modificări a documentului
URL: conține adresa URL a documentului curent
domain: conține domeniul la care aparține pagina web a documentului
documentElement: oferă acces la elementul rădăcină <html>
body: oferă acces la elementul <body> de pe pagina web
head: oferă acces la elementul <head> de pe pagina web
cookie: conține o colecție a tuturor cookie-urilor pentru documentul curent
images: conține o colecție a tuturor obiectelor imagine (elemente <img>)
links: conține o colecție de legături - elemente <a> și <area>, pentru care este definit atributul href
anchors: oferă acces la colecția de elemente <a> cu atributul name definit
forms: conține o colecție a tuturor formularelor de pe pagina web

Aceste proprietăți nu oferă acces la toate elementele, însă permit obținerea celor mai des utilizate elemente de pe pagina web. De exemplu, vom obține nodul rădăcină al documentului:

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

În rezultat, în consolă va fi afișat conținutul paginii web curente, așa cum este definit în codul de mai sus.

Sau, vom afișa informații de bază despre document:

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

Consola va afișa în cazul tău:

FDC.COM
01/14/2024 16:53:20

file:///C:/app/index/html

Vom obține toate imaginile de pe pagină:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <img src="picture1.png" alt="Imagine 1" />
   <img src="picture2.png" alt="Imagine 2" />
   <img src="picture3.png" alt="Imagine 3" />
   <script>
       const images= document.images;
       // schimbăm prima imagine
       images[0].src="picture_4.jpg";
       images[0].alt="Imagine nouă";
       // iterăm prin toate imaginile
       for(img of images){
           console.log(`URL: "${img.src}" Alt:"${img.alt}"`);
       }
   </script>
</body>
</html>

Similar cu modul în care în codul HTML putem seta atributele unui element img, în JavaScript, folosind proprietățile src și alt, putem obține și seta valorile acestor atribute. În acest caz, nu contează dacă fișierele de imagine există sau nu. Afișajul în consolă va fi asemănător cu următorul:

URL: "file:///c:/app/picture_4.jpg" Alt:"Imagine nouă"
URL: "file:///c:/app/picture2.png" Alt:"Imagine 2"
URL: "file:///c:/app/picture3.png" Alt:"Imagine 3"

Să examinăm obținerea tuturor linkurilor de pe o pagină:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <a href="article1.html">Articolul 1</a>
   <a href="article2.html">Articolul 2</a>
   <a href="article3.html">Articolul 3</a>
   <script>
       const links = document.links;
       // iterăm prin toate linkurile
       for(link of links){
           console.log(`Href: "${link.href}" Text: "${link.innerText}"`);
       }
   </script>
</body>
</html>

Din nou, deoarece linkurile au un atribut href definit, putem obține valoarea acestuia atunci când iterăm prin linkuri.