Основы работы с 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>
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: