Dom означает «объектная модель документа» и представляет собой древовидную структуру HTML-кода. API означает интерфейс прикладного программирования, вы можете рассматривать API как посредник или промежуточное программное обеспечение между скриптом и данными HTML.
Согласно веб-документам MDN
Объектная модель документа (DOM) — это программный интерфейс для веб-документов. Он представляет страницу, чтобы программы могли изменять структуру, стиль и содержимое документа. DOM представляет документ в виде узлов и объектов; таким образом, языки программирования могут взаимодействовать со страницей.
DOM API — это своего рода мост между HTML-контентом и JavaScript, другими словами, вы можете сказать, что это метод, с помощью которого скрипт может манипулировать содержимым HTML-страницы, с помощью DOM API можно выполнять любые манипуляции в HTML. страницы, такие как обновление элемента, удаление, вставка нового элемента и запуск событий.
<!DOCTYPE> <HTML> <HEAD> <TITLE>HI</title> </head> <body> <table style="width:100%"> <tbody> <tr> <th>Name</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Saurav</td> <td>##########</td> <td>India</td> </tr> <tr> <td>Ankit</td> <td>##########</td> <td>India</td> </tr> </tbody> </table> </body> </html>
Основная цель создания DOM-подобной структуры HTML-страницы — сделать ее динамической, поскольку HTML сам по себе не способен выполнять динамические действия.
Почему DOM — это объектная модель
DOM представляет документ как объект, которым действительно удобно манипулировать и делать нужные вещи. Как только HTML-страница полностью отображается на экране [окно браузера], браузер больше не будет распознавать элемент HTML, а превращает его в DOM, и JavaScript может легко манипулировать им с помощью DOM API.
Навигатор: Навигатор — это браузер, например Chrome, Firefox.
Окно: на самом деле это объект окна браузера, который всегда находится в верхней части документа.
Документ: когда HTML-документ загружается в окно, он становится объектом документа.
Форма: представляет собой тег формы
Якорь: Представляет собой тег ‹a href›.
Таблица: представляет собой таблицу.
Элемент управления формой: текст,радио,текстовое поле,число.
Достаточно теории, теперь перейдем к основной теме DOM API, в javascript доступно множество встроенных методов для управления DOM.
Давайте обсудим каждый по отдельности.
write(‘string’):Это очень полезный метод для записи строк в документе. Этот метод в основном используется для целей тестирования. Он используется для удаления всего содержимого из документа HTML и вставки нового содержимого.
//Example:
document.write('Saurav');//Saurav
Здесь документ — это объект окна, и с его помощью мы можем вставлять данные на страницу.
getElementById('unique-id'): когда мы определяем элемент HTML, мы предоставляем идентификатор для манипулирования dom, этот уникальный идентификатор можно использовать здесь, чтобы получить элемент и изменить его в соответствии с нашими требованиями. .
//Example <h1 id=heading>Medium</h1>
Здесь мы определили наш идентификатор на HTML-странице, теперь нам нужно получить его для манипуляций.
let headElem = document.getElementByid('heading');
let headContent=headElem.innerText;
//headCOntent will contain the text written in the tag i.e Medium
getElementByClassName(‘class-name’): Это очень полезно, когда вы хотите внести изменения на основе имен классов, а не идентификаторов, потому что будут получены все элементы с одним и тем же именем класса. Этот метод возвращает коллекцию, которая содержит каждый элемент, и вы можете получить к ним доступ через индексацию, если хотите применить что-то к человеку, вы также можете добиться этого через номер индекса. Если вы хотите применить изменения ко всему элементу, вам нужно повторить его через цикл.
getElementByName('name'): возвращает все элементы с одинаковыми именами, указанными в параметре, аналогично getElementByClassName. Это возвращает коллекцию, которая также является итерируемой. Она возвращает список активных узлов. Код ниже генерировать тот же вывод, что и сгенерированный getElementByClassName(), но на основе имени, которое является «пара».
getElementByTagName(‘tag-name’): Возвращает все элементы, определенные с заданным именем тега. getElementByTagName также возвращает коллекцию, которая является итерируемой. Давайте посмотрим, как
querySelector():querySelector возвращает первый элемент совпадения из документа, который указан в параметре querySelector. Давайте посмотрим, как
querySelectorAll():querySelectorAll() возвращает статический (не живой) список узлов, который соответствует указанному в параметре. Посмотрим, как
Прежде чем уйти, запомните следующие моменты:
ДОМА API:
(1)document.write()
(2) документ.getElementById()
(3)document.getElementByClassName()
(4)document.getElementByName()
(5)document.getElementByTagName()
(6)document.querySelector()
(7)document.querySelectorAll()
Заключение. Мы обсудили все DOM API с примерами и ясно увидели, что DOM API может эффективно манипулировать DOM, в следующих статьях. Я углублюсь в структуру DOM и NodeList и их поведение. Надеюсь, вам понравилась эта информация, спасибо за прочтение.
