DOM означает объектную модель документа. DOM предоставляет способ управления документами HTML и XML. Мы называем этот «способ манипулирования» интерфейсом прикладного программирования или API. DOM обеспечивает структурное представление документа в виде дерева, что позволяет изменять его содержимое и визуальное представление с помощью языка сценариев.
Источник:https://engineering.semantics3.com/web-scraping-in-perl-using-mojo-dom-a453229c732f
Самый высокий уровень дерева DOM — это объект окна. Думайте об окне как об окне браузера. Окно содержит весь документ DOM. Все компоненты HTML доступны из DOM.
Оконные команды
.window.document; //returns the entire HTML document
.window.innerWidth; // returns the inner width of the browser window
.window.innerHeight; // returns the inner height of the browser window
Добавление/удаление/изменение атрибутов HTML
получитьElementById
Метод document.getElementById() обеспечивает самый быстрый доступ к узлу. Однако для этого требуется знание идентификатора узла, который является очень конкретным, уникальным и используется только один раз. Поскольку идентификаторы должны быть уникальными, этот метод возвращает только один элемент.
document.getElementById(‘query’)
// returns the element whose id matches the specified string
получитьElementsByClassName
В отличие от идентификатора, имя класса не обязательно должно быть уникальным. document.getElementsByClassNameвозвращает HTMLCollection (список узлов DOM). Эта коллекция HTMLCollection не является массивом, даже несмотря на то, что она имеет свойство длины всех элементов данного класса.
document.getElementsByClassName('topbar_inner');
// returns an object of all child elements with the given class name
getElementsByTagName
Имя тега находится между ‹› (например, «div», «span», «h1», «p»). document.getElementsByTagName() возвращает HTMLCollection элементов с заданным именем тега.
document.getElementsByTagName('div');
// returns a HTMLCollection of elements with the given tag name
Дополнительные ресурсы
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
https://www.digitalocean.com/community/tutorials/introduction-to-the-dom
https://eloquentjavascript.net/14_dom.html
https://www.taniarascia.com/how-to-connect-to-an-api-with-javascript/
