Модель объекта документа играет доминирующую роль для всех веб -разработчиков, не так ли? Частые манипуляции с DOM должны быть искусством в кончиках пальцев разработчиков. Но почему манипулирование DOM становится ключевым министром в суде веб -разработчиков?
Браузеры используют модель объекта для логической структуры веб -страниц, что, в свою очередь, способствует элементам HTML на экране. Проще говоря, DOM — это структурное представление объектов, которые подвергаются изменениям (как в содержании, так и в структуре) в Интернете. Так что Дом — не что иное, как лорд объектов на ваших веб -страницах.
Как разработчик, вы можете знать о том, что jQuery является надежным источником для выбора элементов. Несмотря на неоспоримый факт, как мы считаем это ответом на изменяющиеся элементы или элементы стиля или даже создание элементов на веб -странице? JavaScript имеет вариант для всех вышеуказанных модификаций.
Браузер при создании представления документов HTML и CSS, известных как объект документа, создает положение, которое позволяет JavaScript просачиваться и вносить необходимые изменения и стиль веб -сайта. Так не думаете, что JavaScript вполне способен облегчить вашу работу и привести вас к лучшему результату?
Манипуляция DOM с использованием JavaScript имеет ряд методов. Но эффективный программист начинается с обнаружения элемента для манипуляций.
- Поиск элемента не является геркулесовой задачей, если вы можете получить доступ к элементу с помощью следующих методов:
.queryselector () : Этот метод стоит наравне с первым элементом, соответствующим одним или нескольким селекторам CSS.
Использование:
document.querySelector('#tagname')
The '#tagname' option picks the first '#tagname 'tag found in the HTML document
.getElementById () : Если вам нужен один элемент по ID, то этот метод будет правильным выбором для вашего действия.
Использование:
document.getElementById('#element')
Returns the first element that has the id of #element
.GetElementsByClassName () : Эти методы помогают получить два или более объектов, что приводит к множеству элементов.
Использование:
document.getElementByClassName('element')
Returns the array
.queryselectorall () : Это похоже на метод .queryselector (). Эти методы выбирают все теги, желаемые программистом.
Использование:
document.querySelectorAll('elementtag')
Return all the element tags of the document
- Создание и удаление элементов будет еще одним эффективным вызовом, который можно сделать с помощью следующих методов:
. CreateElement () : Принимая имя тега в качестве ввода, этот метод создает новый элемент.
Использование:
document.createElement('tagname')
creates a new element which can be accessed with the tag name given here
.RemoveChild () : Этот метод удаляет конкретный дочерний элемент.
Использование:
ele.removeChild(childEle)
- Добавление нового дочернего элемента к ранее существующему элементу или вновь созданному элементу может быть сделано
.appendChild ()
Использование:
ele.appendChild(childEle)
- Если вы заинтересованы в стилии, попробуйте следующую команду:
document.getElementById(id).style.property = new style
- Замена элемента не требует много усилий, если выполняется следующий метод.
x1.parentNode.replaceChild(x2, x1) newDiv is the new child to be replaced while the div is the existing child that is to be replaced
- Обработка событий также является еще одним положением, данным JavaScript DOM.
.AdDeventListener () : Назначение слушателей событий вашим элементам HTML может быть сделано с помощью этого метода.
Использование:
document.getElementById("btn").addEventListener(event,ele)
- HTML -код может определять свои события, используя атрибуты на тегах.
Пример:
Hello!!
After clicking on the 'Hello!' button, you can comfort your user with the former message on the click of a mouse
Манипуляция DOM всегда была интересной темой для всех разработчиков, будь то студенты или профессиональные веб -разработчики. jQuery не является требованием для манипуляций с DOM, но является приятным выбором, хотя JavaScript можно рассмотреть для упрощения сложных задач манипуляции.
Ключевые выводы
Следуйте за нашим сообществом за большим количеством вкусностей, наклеек, футболок
Оригинал: «https://dev.to/gitlabc/javascript-dom-manipulation-3gil»