Для работы со структурой DOM в JavaScript предназначен объект document, который определен в глобальном объекте window. Для получения базовой информации о веб-странице объект document предоставляет ряд свойств:
title: представляет заголовк документа (который указан в элементе <title>)
lastModified: содержит дату последнего изменения документа
URL: содержит адрес URL текущего документа
domain: содержит домент, к которому принадлежит веб-страница документа
documentElement: предоставляет доступ к корневому элементу <html>
body: предоставляет доступ к элементу <body> на веб-странице
head: предоставляет доступ к элементу <head> на веб-странице
cookie: содержит коллекцию всех куки для текущего документа
images: содержит коллекцию всех объектов изображений (элементов img)
links: содержит коллекцию ссылок - элементов <a> и <area>,
у которых определен атрибут href
anchors: предоставляет доступ к коллекции элементов <a>, у которых определен
атрибут name
forms: содержит коллекцию всех форм на веб-странице
Эти свойства не предоставляют доступ ко всем элементам, однако позволяют получить наиболее часто используемые элементы на веб-странице. Например, получим корневой узел документа:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<script>
console.log(document.documentElement);
</script>
</body>
</html>
В результате на консоль будет выведено содержимое текущей веб-страницы, как оно определено в коде выше.
Или выведем базовую информацию о документе:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<script>
console.log(document.title);
console.log(document.lastModified);
console.log(document.domain);
console.log(document.URL);
</script>
</body>
</html>
Консольный вывод в моем случае:
METANIT.COM 10/27/2023 20:45:11 file:///Users/eugene/Documents/app/index.html
Получим все изображения на странице:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<img src="picure1.png" alt="Картинка 1" />
<img src="picure2.png" alt="Картинка 2" />
<img src="picure3.png" alt="Картинка 3" />
<script>
const images = document.images;
// изменим первое изображение
images[0].src="picture_4.jpg";
images[0].alt="Новая картинка";
// перебирем все изображения
for(img of images){
console.log(`Url: "${img.src}" Alt:"${img.alt}"`);
}
</script>
</body>
</html>
Подобно тому, как в коде html мы можем установить атрибуты у элемента img, так и в коде javascript мы можем через свойства src и alt
получить и установить значения этих атрибутов. Причем в данном случае не важно, существуют или нет файлы изображений. Консольный вывод будет наподобие следующего:
Url: "app/picture_4.jpg" Alt:"Новая картинка" Url: "app/picure2.png" Alt:"Картинка 2" Url: "app/picure3.png" Alt:"Картинка 3"
Рассмотрим получение всех ссылок на странице:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<a href="article1.html">Статья 1</a>
<a href="article2.html">Статья 2</a>
<a href="article3.html">Статья 3</a>
<script>
const links = document.links;
// перебираем все ссылки
for(link of links){
console.log(`Href: "${link.href}" Text: "${link.innerText}"`);
}
</script>
</body>
</html>
Опять же, так как у ссылки определен атрибут href, то при переборе ссылок мы можем получить его значение.