Web Development

Первое, что я узнал, начав заниматься веб-разработкой: как управлять элементами по ID из JS, со ссылкой на элементы по ID

<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. прикрепить и удалить event listeners для элемента.

<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 элемента в объекте window

ID элементов сохраняются в качестве переменных global или window.

Что это значит?

Это значит, что при создании элементов с атрибутами id, получить доступ к этим атрибутам id можно через объект window или в качестве переменной global.

Допустим, у нас есть:

<div id="so_many">So many to think about</div>

Это элемент HTMLDivElement с атрибутом id, имеющим значение so_many. Получить доступ к HTMLDivElement можно через so_many в объекте window:

<script>
    log(window.so_many)
</script>

или в качестве переменной global (как и со всеми свойствами window):

<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 в window — это то же, что и_so_many. Обе ссылаются на один и тот же экземпляр элемента div HTMLDivElement <div id="so_many">So many to think about</div>, которым можно управлять как с помощью window.so_many, так и _so_many. Будто браузер уже сделал document.getElemntById(...) за нас.

С ID элемента в переменной window можно управлять элементами 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'), а также получили доступ к элементу через Id so_many в объекте window (или в качестве переменной global) и добавили туда текстовый узел.

Они также доступны в консоли DevTools:

>> so_many
<- > <div id="so_many">So many to think about</div>

>> so_many.appendChild(document.createTextNode("Some text from console"))

Прикрепление event listeners

>> 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, чтобы узнать, как управлять элементом по ID через переменную window или global без лишнего document.getElementById(...).

Заключение

Как же круто!!! Думаю, что перестану писать document.getElementById(...) в следующих проектах :). Порой названия методов кажутся слишком длинными, и их просто не хочется писать 🙂

Однако использовать переменную window или global для получения доступа к элементам по ID нужно должным образом. Эту функцию следует использовать в интерактивном режиме, а не в реальном коде — Совет от Акселя Раушмайера.


Перевод статьи Chidume Nnamdi: Accessing Element IDs in DOM as window/global Variables