В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 25-02-2024! 🞨
Меню :
js tag (56)
js (243)



Blog (1385)
php (328)
js (243)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
js date (33)
php array (33)
form html (30)
online (29)
fonts (26)
Показать еще :
link (26)
ruweb.net (25)
foto (22)
atom (20)
php file (20)
forum (19)
svg (18)
hosting (18)
input (18)
php date (17)
board (16)
html book (16)
php time (16)
color (15)
js url (14)
js events (14)
img (14)
info (14)
js time (14)
notepad (13)
select (13)
htaccess (13)
osclass (13)
dw block (12)
php path (12)
keyboard (12)
знак (12)
php img (12)
download (12)
table (12)
form (11)
jsphp (11)
icon (11)
mouse (10)
js delete (10)
yandex (10)
keyframes (10)
hover (9)
chart (9)
dosite (8)
browser (8)
cookie (7)
php url (7)
comment (7)
canvas (6)
list (6)
iframe (6)
adminka (6)
mysql (6)
click (6)
php get (6)
vs code (6)
search (5)
heading (5)
mb (5)
reg.ru (5)
js math (5)
tag a (5)
year (5)
ftp (5)
js id (5)
value (5)
xml (4)
base64 (4)
bbcode (4)
scandir (4)
нок (4)
js form (4)
day (4)
ssl (4)
php var (4)
week (4)
flags (4)
task (4)
month (4)
vk (4)
submit (4)
console (4)
pages (4)
symbols (4)
games (4)
js hash (3)
line (3)
domen (3)
js post (3)
https (3)
captcha (3)
money (3)
куб (3)
ucoz (3)
numbers (3)
js img (3)
padding (3)
tag hr (2)
sitemap (2)
google (2)
рся (2)
prompt (2)
details (2)
counter (2)
height (2)
qr kod (2)
typeof (2)
arrows (2)
js vars (2)
youtube (2)
video (2)
seo (2)
header (1)
windows (1)
speed (1)
cursor (1)
нод (1)
jino (1)
smile (1)
archive (1)
rutube (1)
scroll (1)

Метод getelementsbyclassname javascript

Метод getElementsByClassName. Как работает метод getElementsByClassName, примеры использования. Синтаксис.

Подробно о Методе getelementsbyclassname в javascript

  1. Синтаксис getElementsByClassName:
  2. Живой пример работы getElementsByClassName

  1. Синтаксис getElementsByClassName:

    Что такое getElementsByClassName? getElementsByClassName - это метод, который соберет все элементы с указанным классом в массив(объект )массивоподобный объект) )

    document.getElementsByClassName("example");

    Для лучшего понимания работы метода getElementsByClassName соорудим маленький стенд:

    Который будет составлять из нескольких элементов Dom, это :

    Пример вывода данных элементов:

    <button class="example">button</button>
    <div class="example">div</div>
    <input name="text" type="text" class="example">

    Далее создадим три кнопки:

    Как вы наверное уже заметили, то у каждой кнопки есть некоторое отличие! Присутствие квадратных скобок и числа.

    Что нам намекает, что мы будем оперировать с объектом(массивом).

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

    <button onclick="document.getElementsByClassName('example')[0].innerHTML=' style=&quot;background:blue&quot;'">[0] - нулевая ячейка коллекции</button>

    <button onclick="document.getElementsByClassName('example')[1].innerHTML=' style=&quot;background:blue&quot;'">[1] - первая ячейка коллекции</button>

    <button onclick="document.getElementsByClassName('example')[2].innerHTML=' style=&quot;background:blue&quot;'">[2] - вторая ячейка коллекции</button>

    Выведем выше приведенный код прямо здесь:

    Чтобы увидеть результат работы метода getElementsByClassName нажмите по очереди ниже приведенные кнопки:

    <button class="example">button</button>

    <div class="example">div</div>

    <input name="text" type="text" class="example">

    Вывод в консоль результат работы метода getElementsByClassName

    Давайте выведем в консоль объект полученный с помощью getElementsByClassName:

    console.log(document.getElementsByClassName("example"));

    Если вы открыли консоль, то должны были увидеть вот такую картину:

    Вывод в консоль результат работы метода getElementsByClassName

  2. Живой пример работы getElementsByClassName

    В следующем Пункте приведем тот стенд с работой метода getElementsByClassName :

    Html код

    div
    И три кнопки:

    Н и собственно вам осталось только всего - проверить как работает метод getElementsByClassName :

Не стесняемся говорить спасибо!
Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.015066 секунд. Подробнее