В первые дни моей веб-разработки идентификаторы элементов были одной из первых вещей, которые я узнал о том, как управлять элементами из области JS. Применительно к элементам по их идентификаторам
<div id="so_many">So many to think about</div>
<script>
const so_many = document.getElemntByID('so_many')
</script>
мы можем:
1: изменить внутренний HTML-код элемента (innerHTML)
<div id="so_many">So many to think about</div>
<script>
const so_many = document.getElemntByID('so_many')
so_many.innerHTML = "I'm flying without wings"
</script>
2. изменить стиль элемента.
<div id="so_many">So many to think about</div>
<script>
const so_many = document.getElemntByID('so_many')
so_many.style.backgroundColor = "green"
</script>
3. добавить дочерний узел к элементу.
<div id="so_many">So many to think about</div>
<script>
const so_many = document.getElemntByID('so_many')
so_many.appendChild(document.createTextNode('my text'))
</script>
4. удалите элемент из узла браузера.
<div id="so_many">So many to think about</div>
<script>
const so_many = document.getElemntByID('so_many')
const textNode = document.createTextNode('my text')
so_many.appendChild(textNode)
so_many.removeChild(textNode)
</script>
5. прикрепите и удалите прослушиватели событий к элементу.
<div id="so_many">So many to think about</div>
<script>
const so_many = document.getElemntByID('so_many')
so_many.addEventListener('focus', (evt)=> {
//.. code here
})
so_msny.removeEventListener('focus')
</script>
* так много и т. д.
Теперь все по-настоящему изменится.
Идентификаторы элементов в объекте окна
Недавно я узнал, что идентификаторы элементов хранятся как глобальные переменные или переменные окна.
что это значит?
Это означает, что если мы создаем элементы, присваивая им атрибуты id, то к атрибутам id можно будет получить доступ через объект окна или как глобальную переменную.
Допустим, у нас есть это:
<div id="so_many">So many to think about</div>
Это элемент HTMLDivElement с атрибутом id значения so_many. Теперь к этому HTMLDivElement можно получить доступ через so_many в объекте окна:
<script>
log(window.so_many)
</script>
или как глобальная переменная (как и все свойства окна):
<script>
log(so_many)
</script>
Эта переменная относится к экземпляру элементов. Так же, как и делать:
<div id="so_many">So many to think about</div>
<script>
const _so_many = document.getElemntById('so_many')
</script>
Переменная so_many в окне такая же, как _so_many, обе относятся к одному и тому же экземпляру элемента div HTMLDivElement <div id="so_many">So many to think about</div>. Мы можем манипулировать <div id="so_many">So many to think about</div>, используя как window.so_many, так и _so_many. Это похоже на то, что браузер уже сделал это document.getElemntById(...) за нас.
С помощью идентификаторов элементов в переменной окна мы можем управлять элементами DOM:
<div id="so_many">So many to think about</div>
<script>
// const so_many = document.getElemntById('so_many')
const textNode = document.createTextNode("Some Text")
window.so_many.appendChild(textNode)
// or as global variable
so_many.appendChild(textNode)
</script>
Видите, мы закомментировали // const so_many = document.getElemntById('so_many'), но мы смогли получить доступ к элементу через имя идентификатора so_many в объекте окна (или как глобальную переменную) и добавить к нему текстовый узел.
Они доступны даже в консоли DevTools:
>> so_many
<- > <div id="so_many">So many to think about</div>
>> so_many.appendChild(document.createTextNode("Some text from console"))
Присоединение прослушивателей событий
>> so_many.addEventListener('click',(evt)=>alert('from console'))
Если щелкнуть элемент div, мы получим:
Измените стиль элемента
>> so_many.style.backgroundColor = "green"
Посмотрите, наш фоновый цвет белый, приведенный выше код изменит его на зеленый. Нажмите Enter:
Цвет фона изменится на зеленый.
Измените HTML-код элемента
>> so_many.innerHTML = "<b>Inner HTML from Console</b>"
До:
После нажатия Enter:
Вы видите, что это весело. Вы можете поиграть с другими методами HTMLElement, чтобы увидеть, как управлять элементом по его идентификатору через окно или глобальную переменную без document.getElementById(...) накладных расходов.
Заключение
Это хорошо!!! Думаю, в следующих проектах document.getElementById(...) перестану писать :). Иногда кажется, что они пишут долго, и иногда мне лень писать длинные имена методов :)
Но мы должны быть очень осторожны при использовании окна или глобальной переменной для доступа к нашим элементам через их идентификаторы, мы должны использовать эту функцию в интерактивном режиме, а не полагаться на нее в реальном коде - Совет от Доктор. Аксель Раушмайер.
Если у вас есть какие-либо вопросы относительно этого или чего-либо, что я должен добавить, исправить или удалить, не стесняйтесь комментировать, писать мне по электронной почте или в прямой переписке. Спасибо за чтение 😃
