Дом или объектная модель DOM или документов – это представление веб-страницы или документа, которое можно мозить с помощью языка сценариев, такими как JavaScript в соответствии с MDN Отказ
Он характеризует документ HTML DOM как иерархическую структуру дерева, и каждый элемент в дереве документа называется узлом.
Узлы DOM представляют все компоненты, которые составляют веб-страницу. Например, головной тег считается узлом. Большинство узлов имеют стартовый тег и конец тега. Вещи могут быть вложены в эти теги. Внутренний узел называется детским узлом, и внешний узел считается его родительским узлом.
Некоторые узлы являются самозакрывающимися метками, такие как тег «IMG». Они называются пустотыми узлами и не могут быть родительским узлом, то есть вещи не могут быть вложены в них.
Обратитесь к графику ниже.
Поскольку «документ» является объектом, который имеет свойства и атрибуты, он будет иметь свойства и методы. Чтобы получить доступ к вещам в объекте, мы используем селектор и методы запроса для изменения содержимого, отображаемого в браузере.
document.getElementById("idName")
//This method only returns the one element by the specified ID.
document.getElementByClass("className")
//This method returns all elements inside the whole document by the class you specified.
document.getElementById("someElement").getElementsByClassName("className")
//It works in all elements of the DOM, this will return all elements by the class you specify inside the element you want
document.querySelector("#idName")
//This method takes one argument, which is a CSS selector & returns the first element that matches the selector.
document.querySelectorAll(".className")
//Works similar to above; returns a node list collection of all matching elements.
Присоединиться к
document.createElement("body")
//this method creats the element, but it does not show up on the page.
document.body.append(element)
//this method gets the element to appear on the page.
.Innerhtml.
HELLO
let element = document.querySelector("#greeting") element.innerHTML = "Welcome" //selects the h1 called greetings and changes HELLO to welcome
const element = document.querySelector(".container")
element.style.backgroundColor="#f0f0f0"
//changes the selected elements(in this case the container class) color to grey
element.remove() //removes a whole element from the page
Это просто базовый обзор некоторых методов, используемых для манипулирования домом.
Оригинал: “https://dev.to/iqramqra/a-beginners-guide-to-dom-manipulation-45bk”