СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
ruweb.net (19)
atom (19)
forum (19)
html book (17)
board (17)
Показать еще :
php file (16)
svg (16)
js method (16)
hosting (16)
link (15)
htaccess (13)
color (13)
osclass (13)
path (12)
table (12)
js delete (11)
icon (11)
php date (11)
jsphp (11)
notepad (11)
input (11)
online (11)
php img (10)
yandex (10)
url (10)
form (10)
mouse (9)
info (9)
comment (7)
img (7)
cookie (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

Метод document.getElementsByTagName()

18.04.2021 Марат 125 0 js |
getelementsbytagname или как работает "Метод document.getElementsByTagName()" - самое лучшее разбираться в методах и функциях - это живые примеры! Мы все так и делаем на сайте. чтобы вы с легкостью понять о чем вообще идет речь!

Подробно о getelementsbytagname.

  1. Что такое getelementsbytagname.
  2. Что возвращает getelementsbytagname.

  1. Что такое getelementsbytagname

    С самого начала дадим определение - "что такое getelementsbytagname"?
    getelementsbytagname - возвращает массив указанного типа в методе.
    Если вместо типа указывается звездочка *, то getelementsbytagname вернёт всё содержание элемента.
    Ну как? Понятно!? Если вы первый раз встречаетесь с методом getelementsbytagname , то с 100% вероятностью, что вы ничего не поняли!

    И правильно!

    Я даже не стану больше приводить теорию - потому, что вы все равно ничего не поймете!

    Нам нужен пример!

    Для того, чтобы понять как работает getelementsbytagname создадим вот такое дерево Dom из нескольких элементов.

    <div id="divs">
         <span>Текст в спане 1 </span>
        <span>Текст в спане 2 </span>
    </div>

    Далее кнопка button с id

    <button id="idbutton">Нажми на меня</button>

    Далее javascript → script + onclick + getElementById + alert + консоль:

    В общих чертах, что происходит ниже... получаем(getElementById) объект из "divs" и отправляем во всплывающее окно все span-ы, и заодно в консоль.

    <script>
    idbutton.onclick = function()
      {
        var objekt = document.getElementById("divs");
        alert(objekt .getElementsByTagName("span"));
        console.log(objekt .getElementsByTagName("span"));
      }
    </script>

    Размещаем выше приведенный код - прямо здесь:

    Текст в спане 1 Текст в спане 2
    Нажмите по кнопке... и мы далее поговорим о результатах работы приведенного кода. где использовался getelementsbytagname В следующем пункте разберем, как использовать полученный объект с помощью "getelementsbytagname"!


  2. Что возвращает getelementsbytagname.

    Теперь нам нужно понять, что мы получили... с помощью "getelementsbytagname"... если вы нажали на кнопку, то внутри функции был alert, который ничего нам не вывел, кроме objec HTMLCollection:

    Что возвращает getelementsbytagname.
    Что возвращает getelementsbytagname.

    Да... не легче...

    А что отправилось в консоль!?

    Здесь мы видим... чуть лучшую ситуацию... а именно:

    HTMLCollection(2) - что это массив, состоящий из 2 ячеек.

    0: span → в нулевой ячейке "span"

    1: span → в первой ячейке "span"

    length: 2 → длина 2, т.е. если вы примените к данному массиву свойство "length", то вернуться должно число 2.

    Что возвращает getelementsbytagname.
    Что возвращает getelementsbytagname.

    Давайте нажмем по нашему первому спану и если опустимся чуть ниже, то увидим... содержание внутри тега span innerHTML.

    Что возвращает getelementsbytagname.
    Что возвращает getelementsbytagname.

    Из чего следует, что мы можем с помощью getelementsbytagname и ячейки 0 получить текст... например вот так:

    alert(objekt .getElementsByTagName("span")[0].innerHTML);

    Нам нужен новый код:

    Html:

    <div id="divs">

    <span>Текст в спане 1</span>

    <span>Текст в спане 2 </span>

    </div>

    <button id="button2">Нажми на меня</button>

    javascript

    <script>

    button2.onclick = function()

    {

    var objekt = document.getElementById("divs");

    alert(objekt .getElementsByTagName("span")[0].innerHTML);

    console.log(objekt .getElementsByTagName("span")[0].innerHTML);

    }

    </script>

    Результат использования getelementsbytagname.

    Разместим выше приведенный код прямо здесь, кроме "спанов..."

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
getelementsbytagname
document getelementsbytagname
getelementsbytagname script
document getelementsbytagname script
document getelementsbytagname script
js getelementsbytagname
javascript getelementsbytagname
javascript document getelementsbytagname
js document getelementsbytagname
javascript function document getelementsbytagname
getelementsbytagname type
var s document getelementsbytagname
var s document getelementsbytagname script
var s d getelementsbytagname script
function var s d getelementsbytagname
js var s document getelementsbytagname
js var s d getelementsbytagname
getelementsbytagname s type text javascript
getelementsbytagname return
getelementsbytagname length
getelementsbytagname body

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb