Как обратиться к тегу js ?
Как обратиться к тегу js? Все способы обращения к тегу в javascript , как можно получить данные тега! Давно надо было сделать такую страницу. чтобы рассмотреть все возможные способы обратиться к тегу!
В первом пункте я объясню, как обратиться к тегу, по его каким-то свойствам, очень подробно! Так, чтобы можно было иметь представление, о самом процессе обращения к тегу, а все остальные пункты будут аналогичные, лишь будет меняться элемент обращения!
- Как обратиться к тегу по его названию!? ->
querySelector - Как обратиться к тегу по его id!? ->
getelementbyid - Как обратиться к тегу по его id без функции!?
- Как обратиться к тегу по его классу !? ->
getElementsByClassName - Как обратиться к тегу по его атрибуту Name!? ->
getElementsByName
- Если у тега есть id - уникальный идентификатор , то мы можем обратиться к данному тегу через его id используя функцию getElementById
- Абсолютно такая же история и для функции
- Как обратиться к тегу по его
Как обратиться к тегу по его названию!?(querySelector)
Чтобы обратиться к тегу по его названию, нужен тег, который будет уникальным на странице!
Придумайте любой, какой-то только сможете:
<rezult1>Тег rezult1 </rezult1>
Теперь мы к нашему тегу обратимся с помощью querySelectorЕсли мы таким образом передадим в переменную querySelector, тега
perem_1 .onclick = function (){
console.log(perem_1);
alert(perem_1);
}
Теперь, мы можем манипулировать с данным тегом, нажать по нему, и создать какое-то другое действие, в общем все, что вы можете придумать!
Чтобы не смешивать все в одно, напишем новый тег и новую функцию и заново обратимся уже к новому тегу... можно заменить текст в теге...
<rezult2>Тег rezult2</rezult2>
var perem_2 = document.querySelector("rezult2");
perem_2 .onclick = function (){
perem_2.innertHTML = "новый текст";
}
Нажмите по тексту и вы увидите результат обращения к данному тегу!
Как обратиться к тегу по его id с помощью getelementbyid
Создаем тег, любой тег с id :
<div id="rezult3">ЗДЕСЬ ОБРАЩАЕМСЯ К ТЕГУ ПО ID</div>
Пишем функцию, которая теперь обратиться к данному тегу по его id:
var perem_3 = document.getElementById("rezult3");
perem_3 .onclick = function (){
perem_3 .innerHTML = "как обратиться к тегу по id с помощью getElementById";
}
Результат, нажмите по ниже идущему тексту и вы увидите результат обращения к тегу по его id:
Как обратиться к тегу по его id без функции!?
Если у вас есть id, то можно не использовать никакие функции... достаточно написать такую конструкцию:
<div id="rezult_4 ">ЗДЕСЬ ОБРАЩАЕМСЯ К ТЕГУ ПО ID БЕЗ ФУНКЦИИ</div>
<script>
rezult_4 .onclick = function (){
rezult_4 .innerHTML = "ОБРАЩЕНИЕ К ТЕГУ БЕЗ ФУНКЦИИ";
}
</script>
Нажмите ниже по тексту - вы увидите результат обращения к тегу без функции!
Функции onclick применяется здесь для иллюстрации живого примера обращения к тегу!
<div id="rezult_5">ЕЩЕ ПРИМЕР ОБРАЩЕНИЯ К ТЕГУ БЕЗ ФУНКЦИИ</div>
<script>
rezult_5.onclick = function (){
rezult_5.style = "color:red;";
}
</script>
Как обратиться к тегу по его классу с помощью getElementsByClassName
<div class="rezult_6">обращаемся к тегу по его классу 1</div>
rezult_6 = document.getElementsByClassName("rezult_6")[0];
rezult_6.onclick = function (){
rezult_6.innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО КЛАССУ getElementsByClassName";
}
</script>
И выведем наш тег с классом, чтобы можно было обратиться к тегу через класс:
Как обратиться к этому же классу с абсолютно одинаковым тегом и классом...!?
rezult_7 = document.getElementsByClassName("rezult_6")[1];
rezult_7 . onclick = function (){
rezult_7 . innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО КЛАССУ ВТОРОЙ ПО СЧЕТУ ТЕГ";
}
Результат:
Как обратиться к тегу по его атрибуту Name getElementsByName
Для того, чтобы обратиться к тегу по его
И втрое, что нам потребуется - это опять какое-то действие, давайте повесим действие на кнопку...
Результат:
Для того, чтобы проверить результат обращения к тегу по Name - нажмите кнопку!
Nne мне подумалось, а почему бы не нажать по самой форме и обратиться к этому тегу и изменить что-то в нем!
ЛЕГКО!
rezult_8 = document.getElementsByName("textarea_primer")[1];
rezult_8 .onclick = function (){
rezult_8 .innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО АТРИБУТУ NAME ВТОРОЙ ПО СЧЕТУ ТЕГ";
}
Результат:
Как обратиться к тегу
