Обратиться к тегу по классу javascript

"обратиться к тегу по классу javascript" - сколько способов существу для обращения к тегу по его классу? Выведем несколько с примерами!

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

1. Обратиться к классу js
2. Обратиться к классу js нажав по кнопке
3. Пример использования обращения к тегу по его классу js?
4. Обратиться к тегу по классу с помощью getElementsByClassName
5. Обратиться к n-ому тегу по классу с помощью getElementsByClassName

Обратиться к классу js

Для того, чтобы обратиться к классу в javascript - вам понадобится:

Какой то элемент, пусть это будет div.

Добавим ему class с произвольным значением

class="apply_tag_by_class"

Соберем ваш div:

<div class="apply_tag_by_class">Как обратиться к классу</div>

Javascript

Далее нам потребуется querySelector - поместим полученные данные в переменную obj.

Обращаю ваше внимание!!!

При использовании querySelector... если у вас несколько блоков с одинаковым классом, то "querySelector" получит данные первого элемента, который стоит выше всех.

Если вы собираетесь вывести с помощью alert, то вы получите:

[object HTMLDivElement]

Если вывести в консоль, то вы получите ваш div:



Скрипт обращения к тегу по его классу:

<script>
var obj = document.querySelector(".apply_tag_by_class");
alert(obj);
console.log(obj);
</script>

Выше вы видели теорию, как обратиться к тегу по его классу... теперь давайте воплотим это в реальность по нажатию на кнопку:




Обратиться к классу js нажав по кнопке

Далее перейдем к практическим действиям, а именно : Обратиться к классу js нажав по кнопке.

Для этого вам понадобится:

div у вас уже есть.

<div class="apply_tag_by_class">Как обратиться к классу</div>

Нам понадобится кнопка(button), по которой будем нажимать:

Внутрь помещаем onclick с произвольной функцией - "foo1()"

<button onclick="foo1()">button</button>

Выше приведенный код javascript помещаем в script с function. И в фигурных скобках поместим alert + Console.log();

Соберем весь код:

Код обращения к тегу по его классу:

Html

<div class="apply_tag_by_class">Как обратиться к классу</div>

<button onclick="foo1()">button</button>

Javascript

<script>

var elm = document.querySelector(".apply_tag_by_class");

function foo1(){

alert(elm);

console.log(elm );

}

</script>

Пример получения данных элемента по его классу:

Далее возьмем приведенный выше код и разместим его прямо здесь.

Для того, чтобы получить данные нажмите по кнопке : "Обратись к тегу используя класс и нажатие"

Как было выше сказано будет выведен объект

[object HTMLDivElement]

И второе - смотри в Console.log();


Как обратиться к классу
[kod] Обратись к тегу используя класс и нажатие



Как использовать обращение к тегу по его классу js?

Вы скажите:

- Отлично! Мы обратились к классу и получили объект, что дальше с ним можно сделать!

Я вам отвечу:

- Если вы смогли получить объект тега, то вы сможете получить абсолютно все данные этого тега...

Пример использования обращения к тегу по его классу js?

Предположим, что вам нужно получить какую то часть вашего тега, пусть это будет "текст"...

Не буду повторяться, ... возьмем тот код, что использовал выше... и добавим в наш код innerHTML

Код примера использования обращения к тегу по его классу js?

Html:

<div class="apply_tag_by_class_1">Пример: Как обратиться к классу</div>

<button onclick="foo2()" class="width_100">Обратись к тегу используя класс и нажатие</button>

Javascript

<script>

var elm = document.querySelector(".apply_tag_by_class_1");

function foo2(){

alert(elm . innerHTML);

console.log(elm . innerHTML);

}

</script>

Пример использования обращения к тегу по его классу js?

Далее выведем выше приведенный прямо здесь:

Пример: Как обратиться к классу
[kod] Обратись к тегу используя класс и нажатие

Код примера 2 использования обращения к тегу по его классу js?

Предположим, что вам нужно получить значение атрибута id... добавим его с неким значением в тег :

<div class="apply_tag_by_class_2" id="value_id">Пример 2: Как обратиться к классу</div>
Код с маленькими изменениями: Html:

<div class="apply_tag_by_class_2" id="value_id">Пример 2: Как обратиться к классу</div>

<button onclick="foo3()" class="width_100">Обратись к тегу используя класс и нажатие</button>

Javascript

<script>

var obj= document.querySelector(".apply_tag_by_class_2");

function foo3(){

alert(obj . id);

console.log(obj . id);

}

</script>

Пример №2 - использования обращения к тегу по его классу js?

Нажмите на кнопку "Обратись к тегу используя класс и нажатие" и вы получите значение...

Пример 2: Как обратиться к классу
[kod] Обратись к тегу используя класс и нажатие



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

Обратиться к тегу можно используя getElementsByClassName - теорию повторять не буду, лишь скажу, что в отличии от querySelector-а "getElementsByClassName" получает массив(HTMLCollection)

Давайте разберем пример обращения к тегу с помощью getElementsByClassName

Для этого вам понадобится:

Опять поступаем аналогично.. предыдущем пункту, возьмем оттуда код и немного его модернизируем и будем использовать getElementsByClassName.

Поскольку(я уже выше сказал), что мы получаем массив, то и для обращения к тегу - используем ячейку массива, т.е. используем квадратные скобки. Внутри скобок указываем какой именно тег вас интересует! Напоминаю, что отсчет начинается с цифры 0

[номер тега от верха страницы]

Сразу перейдем к коду:

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

Html:

<div class="apply_tag_by_class_4">Пример 4: Как обратиться к классу(getElementsByClassName)</div>

<button onclick="foo4()" class="width_100">Обратись к тегу используя класс и нажатие(getElementsByClassName)</button>

Javascript

<script>

var obj= document.getElementsByClassName("apply_tag_by_class_4")[0] ;

function foo4(){

alert(obj. innerHTML);

console.log(obj. innerHTML );

}

</script>

Живой пример обращения к тегу по классу с помощью getElementsByClassName

Поскольку... вы наверное поняли, как мы получаем объект тега - и это довольно скучно... давайте используем innerHTML

Пример 4: Как обратиться к классу(getElementsByClassName)
[kod] Обратись к тегу используя класс и нажатие(getElementsByClassName)



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

Предположим, что вам требуется "обратиться к n-ому тегу по классу с помощью getElementsByClassName", для этого вам понадобится... :

Определимся к какому тегу вы хотите обратиться... путь это будет третий по счету от верха страницы...

Создаем три одинаковых(по классу) div, но с разным текстом:

<div class="apply_tag_getelementsbyclassname">Нулевой div с классом</div>
<div class="apply_tag_getelementsbyclassname">Первый div с классом</div>
<div class="apply_tag_getelementsbyclassname">Второй div с классом</div>

И обращаю ваше внимание на то, что отсчет начинается не 1 с нуля, поэтому... если мы хотим обратиться к тегу по классу по счету номер 3, то используем ячейку №2

[2]

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

Плюс, опять, чтобы не получать объект... используем innerHTML!

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

Html:

<div class="apply_tag_getelementsbyclassname">Нулевой div с классом</div>

<div class="apply_tag_getelementsbyclassname">Первый div с классом</div>

<div class="apply_tag_getelementsbyclassname">Второй div с классом</div>

Button

<button onclick="foo_5();" class="width_96_2pro margin_10_0">Обратитесь к тегу</button>

Javascript

<script>

obj= document.getElementsByClassName("apply_tag_getelementsbyclassname")[2];

function foo_5(){

alert(obj . innerHTML )

}

</script>

Вывод Кода обращения к n-ому тегу по классу с помощью getElementsByClassName

Ну и опять... выведем "Код обращения к n-ому тегу по классу с помощью getElementsByClassName", который вы видите выше... прямо здесь:

Нулевой div с классом
Первый div с классом
Второй div с классом
Обратитесь к тегу