Как обратиться к тегу js ?

Поддержи проект!!!

Как обратиться к тегу js? Все способы обращения к тегу в javascript , как можно получить данные тега! Давно надо было сделать такую страницу. чтобы рассмотреть все возможные способы обратиться к тегу!

В первом пункте я объясню, как обратиться к тегу, по его каким-то свойствам, очень подробно! Так, чтобы можно было иметь представление, о самом процессе обращения к тегу, а все остальные пункты будут аналогичные, лишь будет меняться элемент обращения!

1. Как обратиться к тегу по его названию!? -> querySelector
2. Как обратиться к тегу по его id!? -> getelementbyid
3. Как обратиться к тегу по его id без функции!?
4. Как обратиться к тегу по его классу !? -> getElementsByClassName
5. Как обратиться к тегу по его атрибуту Name!? -> getElementsByName

Как обратиться к тегу по его названию!?(querySelector)

Чтобы обратиться к тегу по его названию, нужен тег, который будет уникальным на странице!

Придумайте любой, какой-то только сможете:

<rezult1>Тег rezult1 </rezult1>

Теперь мы к нашему тегу обратимся с помощью querySelector
Если мы таким образом передадим в переменную querySelector, тега rezult1, то в переменной окажется object HTML

var perem_1 = document.querySelector("rezult1");
Теперь мы уже можем делать с нашим объектом, все, что захотим... давайте на этот тег повесим onclick и выведем что находится в переменной через alert и console


perem_1 .onclick = function (){

console.log(perem_1);

alert(perem_1);

}

Зачем мы это сделали!? Чтобы видеть процесс вживую! Теперь выведем наш тег rezult1, открываем консоль... и вам остается нажать по этому тегу(текст Тег rezult1)!

Тег rezult1
После того, как вы нажали по нашему тегу, то должны были увидеть два действия... в alert у нас объект, в console наш тег, по которому нажали!
Что дальше!?

Теперь, мы можем манипулировать с данным тегом, нажать по нему, и создать какое-то другое действие, в общем все, что вы можете придумать!

Чтобы не смешивать все в одно, напишем новый тег и новую функцию и заново обратимся уже к новому тегу... можно заменить текст в теге...

<rezult2>Тег rezult2</rezult2>

var perem_2 = document.querySelector("rezult2");

perem_2 .onclick = function (){

perem_2.innertHTML = "новый текст";

}

Нажмите по тексту и вы увидите результат обращения к данному тегу!

Тег rezult2



Как обратиться к тегу по его id с помощью getelementbyid

Если у тега есть id - уникальный идентификатор , то мы можем обратиться к данному тегу через его 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 без функции!?

Если у вас есть id, то можно не использовать никакие функции... достаточно написать такую конструкцию:

<div id="rezult_4 ">ЗДЕСЬ ОБРАЩАЕМСЯ К ТЕГУ ПО ID БЕЗ ФУНКЦИИ</div>

<script>

rezult_4 .onclick = function (){

rezult_4 .innerHTML = "ОБРАЩЕНИЕ К ТЕГУ БЕЗ ФУНКЦИИ";

}

</script>

Нажмите ниже по тексту - вы увидите результат обращения к тегу без функции!

ЗДЕСЬ ОБРАЩАЕМСЯ К ТЕГУ ПО ID БЕЗ ФУНКЦИИ

Функции onclick применяется здесь для иллюстрации живого примера обращения к тегу!

Еще пример обращения к тегу, с добавление цвета текста:

<div id="rezult_5">ЕЩЕ ПРИМЕР ОБРАЩЕНИЯ К ТЕГУ БЕЗ ФУНКЦИИ</div>

<script>

rezult_5.onclick = function (){

rezult_5.style = "color:red;";

}

</script>

ЕЩЕ ПРИМЕР ОБРАЩЕНИЯ К ТЕГУ БЕЗ ФУНКЦИИ



Как обратиться к тегу по его классу с помощью getElementsByClassName

Абсолютно такая же история и для функции getElementsByClassName, с единственной разницей, что мы получаем массивоподобный объект поэтому нам потребуется ячейка [0]


<div class="rezult_6">обращаемся к тегу по его классу 1</div>

rezult_6 = document.getElementsByClassName("rezult_6")[0];

rezult_6.onclick = function (){

rezult_6.innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО КЛАССУ getElementsByClassName";

}

</script>

И выведем наш тег с классом, чтобы можно было обратиться к тегу через класс:

обращаемся к тегу по его классу 1
Вопрос на засыпку...

Как обратиться к этому же классу с абсолютно одинаковым тегом и классом...!?

<div class="rezult_6">обращаемся к тегу по его классу 2 тег</div>
Если вы не разобрались, то для того, чтобы обратиться ко второму тегу по счету сверху страницы с таким же классом, нам нужно заменить 0 в
getElementsByClassName("rezult_6")[0] на 1


rezult_7 = document.getElementsByClassName("rezult_6")[1];

rezult_7 . onclick = function (){

rezult_7 . innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО КЛАССУ ВТОРОЙ ПО СЧЕТУ ТЕГ";

}

Результат:

обращаемся к тегу по его классу 2 тег



Как обратиться к тегу по его атрибуту Name getElementsByName

Как обратиться к тегу по его атрибуту Name, если вы не в курсе, то атрибут name используется в тегах input и textarea
Для того, чтобы обратиться к тегу по его name нам потребуется тег, который имеет этот атрибут:

<textarea name="textarea_primer">Здесь тег textarea с name = textarea_primer</textarea>

И втрое, что нам потребуется - это опять какое-то действие, давайте повесим действие на кнопку...

<button onclick="alert(document.getElementsByName('textarea_primer')[0].innerHTML)">Обращаемся к тегу по его атрибуту name !?</button>

Результат:

Для того, чтобы проверить результат обращения к тегу по Name - нажмите кнопку!

Здесь тег textarea с name = textarea_primer
Обращаемся к тегу по его атрибуту name !? А почему бы не нажать по самой форме!?

Nne мне подумалось, а почему бы не нажать по самой форме и обратиться к этому тегу и изменить что-то в нем!

ЛЕГКО!

rezult_8 = document.getElementsByName("textarea_primer")[1];

rezult_8 .onclick = function (){

rezult_8 .innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО АТРИБУТУ NAME ВТОРОЙ ПО СЧЕТУ ТЕГ";

}

Результат:

Здесь тег textarea с name = textarea_primer