Работа с JavaScript в объектной модели документа или DOM может быть рутинной. Пройдя по ветвям этого перевернутого дерева, некоторые ощущают себя белкой-акробатом в ее игривом владении, а другие ощущают себя кошкой, поджидающей пожарного. Тем не менее, для немногих избранных жилистая структура DOM больше похожа на дорожную карту к кучке небольших, но ценных сокровищ. При обнаружении эти самородки, которыми можно манипулировать, чтобы они сверкали, как золото, или просто были достаточным сырьем для запуска RESTful CRUD. Независимо от вашего исследовательского мастерства; Если у вас есть хорошая каска и хорошо откалиброванный компас, этот поход стоит приключений!
Давайте начнем путешествие !!!
В этом посте я буду не только вашим гидом, но и предоставлю вам идеальное оборудование, необходимое для расчистки пути, сглаживания ландшафта и создания ощущения DOM как одного из деревьев на заднем дворе.
DOCUMENT.QUERYSELECTOR/ALL('ELEMENT')
Безусловно, два из самых полезных; и поэтому наиболее часто используемые методы для начала исследования DOM - это запросить или запрос документа, выбрав определенный элемент или узел, при условии, что вы знаете, какой элемент вы ищете. Если у вас есть сокращенное имя тега элемента (ов), вы можете просто попросить документ найти его / их:
LET'S SELCT ALL OF THE HEADERS ('h1' ....'h6') ON THE PAGE
Какими бы мощными ни были эти методы, их может быть утомительно вызывать, снова, и снова, и снова …… снова. Это побуждает разумного кодировщика сохранять запрошенный «самородок» в переменной для дальнейшего использования.
S o, если хорошо, полезно и СУХО хранить извлеченные элементы в переменной; насколько более полезным было бы хранить наши маленькие поисковые системы в их собственных «переменных», или «функциях» и использовать эти функции для C reate, R ead (или найти), E dit и / или D выберите элементы по нашему выбору ?
Ниже я написал несколько функций, которые помогли мне быть немного более эффективным при изучении DOM. Это далеко не те функции, которые облегчат каждое действие DOM, которое вы, возможно, захотите выполнить. Это не значит быть. Этот список призван вдохновить вас на изучение более эффективных способов обхода DOM с помощью вашего собственного набора техник и методов.
Поиск …… ..
Поиск элемента по типу элемента:
const findEle =(ele) =>{
return document.querySelector(ele);
}
ex: let firstDiv = findEle('div')
Найдите все элементы одного типа:
const findAllEle =(ele) =>{
return document.querySelectorAll(ele);
}
ex: let theHeaders = findAllEle('header')
Давайте создадим кое-что
Создать новый элемент:
const newEle =(ele) =>{
return document.createElement(ele);
}
ex: let newDiv = newEle('div');
ex: let mainPara = newEle('p')
Добавление текста к элементу:
const says = (who, saidWhat) => {
return who.innerText = "saidWhat" ;
}
ex: says(mainPara, 'it was the best of times... It was the worst of times')
Добавление дочернего элемента к родительскому элементу:
const adoptThisChild = (parent, child)=>{
return parent.appendChild(child);
}
ex: adoptThisChild(mainPara, newDiv)
Вышеупомянутые функции помогли мне ускорить мое путешествие в DOM, сквозь него и вокруг него. Это не был исчерпывающий список; да и не должно было быть. Этот список призван вдохновить вас на изучение более эффективных способов обхода DOM и написание некоторых собственных полезных функций. В моем постоянном стремлении стать лучшим программистом я всегда думаю о способах сохранить свой код СУХИМ. Наши цели как программистов должны быть сосредоточены на получении удовольствия и творчестве с нашим кодом, а не на том, чтобы отвлекаться на многословный и часто нюансированный способ работы JavaScript. Я надеюсь, что это вдохновило вас сделать еще одну ногу по этому пути.
Как пройти по DOM? Какие функции, ярлыки вы используете? Я люблю, когда вы делитесь в комментариях ниже !! Удачного кодирования !!
Ресурсы:
ДОМ
Стрелочные функции JavaScript
