Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Метод document.getElementsByTagName()

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

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 + console:

    В общих чертах, что происходит ниже... получаем(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.

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

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

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

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

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

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

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

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

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

    Что возвращает 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.

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


Последняя дата редактирования : 18.04.2021 14:18
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
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

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
29/04/2021 01:46
Реанимирована страница о "шаблонах в DREAMWEAVER"!Эта программа была основной для редактирования моих сайтов на…
подробнее.
Марат :
23/04/2021 04:35
Страница обновлена - добавлен скрипт - всё в одном. Скачивание картинку по…
подробнее.
Марат :
13/04/2021 08:12
Во-первых пожалуйста!1). $new_array - был прописан оттого, что контент на сайте пишется на живых примерах. И часто…
подробнее.
Валерий :
13/04/2021 05:47
перебрал весь материал- во первых спасибоискал другое но понравился Ваш материалerror - или неточность 1. везде…
подробнее.
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.