Поиск DOM элемента с помощью getElementById

В этом уроке мы с вами напишем реальный пример, когда javascript будет менять какие-то елементы на странице.

Итак в нашем html у меня подключен файл с нашим будущим javascript

<html>
  <head>
      <title>Test</title>
      <script src='code.js'></script>
  </head>
  <body>
  </body>
</html>

Давайте добавим параграф и кнопку.

<p id='paragraph'>Some text</p>

<button onclick='changeColor()'>Change</button>

Мы только что написали новую конструкцию onclick. onclick - это атрибут у кнопки, куда можно передавать javascript функцию. И при клике на кнопку, она вызовется. Единственное, мы эту функцию еще не описали.

Теперь давайте начнем писать наш javascript. Итак нам нужно описать функцию changeColor

function changeColor () {

}

Теперь пришло время узнать об одной очень удобной функции, для дебага javascript. Это console.log.

Давайте напишем эту инструкцию с каким-то текстом

function changeColor () {
  console.log('Clicked on button')
}

Для того, чтобы увидеть выполнение console.log, нам нужно открыть developer tools, или по русски инструменты разработчика. Для этого в браузере нажмите F12 или правой кнопкой мыши - inspect element. Нам нужна вкладка console.

Теперь если мы нажмем на нашу кнопку, мы видим, как в консоль выводится наше сообщение.

Теперь давайте все таки поменяем цвет нашего текста. Для этого нам нужно в нашем DOM дереве найти нужный нам елемент, а потом поменять ему стили. Так как мы задали в html ID нашем елементу, то его очень легко найти, так как ID уникальное.

Для этого используется метод document, getElementById. Ему на вход мы должны передать имя елемента. Давайте через запятую выведем в консоль наш елемент.

function changeColor () {
  console.log('Clicked on button', document.getElementById('paragraph'))
}

Теперь если мы посмотрим в браузер и кликнем на кнопку, мы увидим, что у нас вывелся наш елемент в консоль. Значит мы все написали правильно

У любого DOM елемента есть свойство style. Давайте на него посмотрим

function changeColor () {
  console.log('Clicked on button', document.getElementById('paragraph').style)
}

Как мы видим, нам вывелся обьект с кучей различных свойств. И мы с вами можем помянять любое из этих свойств. Давайте для начала изменим цвет текста

function changeColor () {
  console.log('Clicked on button', document.getElementById('paragraph').style)
  document.getElementById('paragraph').style.color = 'red'
}

Мы можем просто через точку обратиться к любому свойству и присвоить туда что-либо. Например цвет.

Если мы посмотрим в браузер, то все работает.

Точно также мы можем изменить любое свойство. Но, обратите внимание, что свойста пишуться в camelCase, а не через тире, как в css.

Давайте изменим размер шрифта теперь

function changeColor () {
  console.log('Clicked on button', document.getElementById('paragraph').style)
  document.getElementById('paragraph').style.color = 'red'
  document.getElementById('paragraph').style.fontSize = '24px'
}

Как мы видим, все работает, но давайте сделаем этот код немного читабельнее. Мы используем getElementById три раза, но каждый раз находим один и тот же елемент снова и снова. Давайте запишем его в переменную

function changeColor () {
  var element = document.getElementById('paragraph')
  console.log('Clicked on button', element.style)
  element.style.color = 'red'
  element.style.fontSize = '24px'
}

Вот так стало намного читабельнее.

Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.

monsterlessons

9 лет назад

Проверять состояние с помощью условия и ставить цвет на цвет по умолчанию(наследуемый): function changeColor () { var element = document.getElementById('paragraph') if (element.style.color == 'red') { element.style.color = 'inherit' } else { element.style.color = 'red' } }

Nako

Спасибо)

#2 Поиск DOM элемента с помощью getElementById