Основы работы с DOM в JavaScript (часть 2)

В этой статье рассмотрим способ изменения содержимого HTML страниц с помощью JavaScript и разные функции-селекторы.

Изменение содержания элемента

Иногда появляется задача сменить содержание HTML тега: изменить текст. Попробуем решить её с помощью свойства innerHTML. Сделаем <div> контейнер, при клике на который, он будет менять текст внутри себя:

<div onclick="MyFunc(this);">Кликни на меня!</div>
<script>
   function MyFunc(a){
      a.innerHTML = 'Мыши любят сыр!';
   }
</script>

Испытайте такой пример. Загрузите страницу и кликните на текст "Кликни на меня!". Он сразу изменится на текст "Мыши любят сыр!". Обратите внимание, что изменился только текст внутри тега, но сам тег остался прежним. Если нам необходимо, к примеру, изменить <div> тег на <span>, то необходимо воспользоваться свойством outerHTML. Но в отличии от innerHTML, этому свойству необходимо передавать не только текст-содержание, но и обрамляющие его теги, на которые будут заменены существующие:

<div onclick="MyFunc(this);">Кликни на меня!</div>
<script>
   function MyFunc(a){
      a.outerHTML = '<span>Мыши любят сыр!</span>';
   }
</script>

Выбор элемента по названию тега и классу

В прошлой статье "Основы работы с DOM в JavaScript" был рассмотрен метод getElementById, который возвращает ссылку на элемент с определённым id. Но добавим к нему ещё один инструмент аналогичного действия. getElementsByTagName позволяет выбрать элементы, являющимися определёнными тегами. К примеру, можно выбрать все <div> или <span>. Продемонстрируем это:

<div onclick="MyFunc();">Кликни на меня!</div>
<script>
   function MyFunc(){
      var elems = document.getElementsByTagName('div');
      for (var i = 0; i < elems.length; i++) {
         elems[i].innerHTML = 'Мыши любят сыр!';
      }
   }
</script>

Обратите внимание, что getElementsByTagName возвращаем массив ссылок на все элементы, которые нашлись. Поэтому для их изменения надо перебрать их циклом, как это продемонстрировано в примере.

Теперь расмотрим аналогичную функцию, которая позволяет выбрать элементы по классу getElementsByClassName. У неё точно такая же логика, как у getElementsByTagName, но вместо тега ей необходимо передавать название класса, которое содержит элемент. Эта функция также возвращает массив из указателей на элементы. Продемонстрируем это, модифицировав предыдущий пример:

<div onclick="MyFunc(); class="mouse" ">Кликни на меня!</div>
<script>
   function MyFunc(){
      var elems = document.getElementsByClassName('mouse');
      for (var i = 0; i < elems.length; i++) {
         elems[i].innerHTML = 'Мыши любят сыр!';
      }
   }
</script>