Согласие на обработку персональных данных.

09.05.2021
Новые видео и статья Ваша первая программа на Python.

03.05.2021
Новый выпуск журнала Автоматизация и Программирование.

28.04.2021
Новые видео и статья Возврат значений через параметры.

26.04.2021
Новые видео и статья Как получить содержимое элемента в JavaScript.

24.04.2021
Новые видео и статья Процедура GetDir.



Раздел: Сайтостроение / JavaScript /

Как найти элемент в документе HTML

Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...

Иногда требуется программно найти определённый HTML-элемент в документе. В некоторых случаях сделать это можно перебором всех элементов, как это мы уже делали ранее. Однако не всегда это удобно и уместно. Поэтому следует знать и другие способы.

Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>

Способов поиска элемента с помощью JavaScript существует немало. В этой статье будут рассмотрены лишь некоторые, основанные на использовании следующих методов:

  • getElementById - поиск элемента по идентификатору ID
  • getElementsByTagName - поиск элементов по наименованию тега
  • getElementsByClassName - поиск элементов по наименованию класса
  • getElementsByName - поиск элементов по имени

Обратите внимание, что первый метод ищет и возвращает только один элемент, поскольку подразумевается, что в пределах документа все идентификаторы должны быть уникальными.

Остальные методы ищут все элементы с совпадающими наименованиями и возвращают коллекцию (массив) элементов.

Далее разберём примеры использования всех этих методов, чтобы понять, как это можно использовать.

Поиск элемента по ID

Пример исходного кода:

<body>

<h2 id="header1">Заголовок 1</h2>
<h2 id="header2">Заголовок 2</h2>

<script>
<!--

  function FindID(name) 
  {
    var e = document.getElementById(name);
      
    //Возвращает соответствующий элемент
    return e;
  }

  var str = FindID('header1');
  document.write(str.innerHTML, '<br>');
    
// -->
</script>

</body>

Браузер выведет следующее:

Поиск элемента по ID

Метод getElementById находит в документе элемент с указанным идентификатором и возвращает его. Ну а далее в сценарии мы выводим содержимое найденного элемента, которое хранится в свойстве элемента innerHTML.

Поиск элементов по имени тега

Пример исходного кода:

<body>

<h2>Заголовок</h2>

<ul>
  <liЭлемент списка 1</li>
  <li>Элемент списка 2</li>
  <li>Элемент списка 3</li>
  <li>Элемент списка 4</li>
</ul>   

<script>
<!--

  function FindTag(name) 
  {
    var r = [];    
    var e = document.getElementsByTagName(name);
    
    for (var i = 0; i < e.length; i++)
      r.push(e[i]);
      
    //Возвращает список соответствующих элементов
    return r;
  }

  var str = FindTag('li');
  for (var i = 0; i < str.length; i++)
    document.write(str[i].innerHTML, '<br>');
    
// -->
</script>

</body>

Браузер выведет следующее:

Поиск элемента по названию тега

Поиск элементов по имени класса

Пример исходного кода:

<body>

<h2>Заголовок</h2>

<ul>
  <li class="test">Элемент списка 1</li>
  <li class="my test">Элемент списка 2</li>
  <li class="my">Элемент списка 3</li>
  <li class="test_4">Элемент списка 4</li>
</ul>

<script>
<!--

  function FindClass(name) 
  {
    var r = [];    
    var e = document.getElementsByClassName(name);
    
    for (var i = 0; i < e.length; i++)
      r.push(e[i]);
      
    //Возвращает список соответствующих элементов
    return r;
  }

  var str = FindClass('test');
  for (var i = 0; i < str.length; i++)
    document.write(str[i].innerHTML, '<br>');
    
// -->
</script>

</body>

Браузер выведет следующее:

Поиск элемента по названию класса

Обратите внимание, что в поиск попадает и класс “my test”, потому что там есть слово test. Но это не страшно, поскольку имена классов обычно состоят из одного слова.

Поиск элементов по имени

Пример исходного кода:

<body>

<h2>Заголовок</h2>

<p name="p">
  Первый абзац
</p>

<p name="p">
  Второй абзац
</p>

<p name="p3">
  Третий абзац
</p>   

<script>
<!--

  function FindName(name) 
  {
    var r = [];    
    var e = document.getElementsByName(name);
    
    for (var i = 0; i < e.length; i++)
      r.push(e[i]);
      
    //Возвращает список соответствующих элементов
    return r;
  }

  var str = FindName('p');
  for (var i = 0; i < str.length; i++)
    document.write(str[i].innerHTML, '<br>');
    
// -->
</script>
</body>

Поиск элемента по имени

Эта статья - лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

>>> JavaScript, jQuery и Ajax с нуля до гуру >>>


Что такое JavaScript Что такое JavaScript

Небольшая книга о JavaScript, которая поможет вам в изучении JavaScript. В книге и рассылке сведения для начинающих: что такое JavaScript, как это работает, письма, которые помогут принять решение, надо ли вам это или нет, а также полезные ссылки на обучающие материалы. Подробнее...
Инфо-МАСТЕР ®
Все права защищены ©
e-mail: mail@info-master.su

Яндекс.Метрика