Разберем основные методы выбора элементов в Java Script для выполнения над ними тех или иных действий. Чаще выбор по селекторам разделяют на несколько категорий - id элемента, его классу, тегу и имени. Начнем с самого простого.
Выбор по селекторов по id элемента в Java Script
Для выбора элемента по его идентификатору, надо указать его название.
Синтаксис: document.getElementById('название id')
Пример 1: (при нажатии на элемент с id myElement выходит сообщение):
<script> document.getElementById('myElement').onclick = function() {alert('Спасибо');} </script>
<input id="myElement" type="button" value="Нажми меня"/>
Пример 2:
<div id="info">Информация</div>
<script> var div = document.getElementById('info'); alert(div.innerHTML ); </script>
Выбор элемента по его классу
Данная выборка существуетв Java Script. Надо лишь правильно с ней работать, так как находил информацию вплоть до того, что такй операции не существует. На самом деле выборка по классу существует в Java Script и работает исправно. Здесь есть один нюанс - результат селектора записывается в массив. И работать уже нужно именно с массивом переменной.
Синтаксис: document.getElementsByClassName('название класса')
!! Результат возвращается всегда в виде массива
Пример 1: <script> alert(document.getElementsByClassName('ex2')[0].innerHTML);</script> //возв. 1-й найденный класс .ex2
Пример 2: (ищет количество элементов с классом article):
var articles = document.getElementsByClassName('article'); alert( articles.length );
Выбор по name элемента
Синтаксис: document.getElementsByName('имя элемента')
!! Результат возвращается всегда в виде массива
Пример: alert(document.getElementsByName('ex4')[0].innerHTML); //возв. 1-е найденное имя ex4
Выбор по названию тега элемента
Синтаксис: document.getElementsByTagName('название тэга')
!! Результат возвращается всегда в виде массива
Пример: alert(document.getElementsByTagName('span')[2].innerHTML); //возвращает 3-й найденный span
Добавить комментарий