Понедельник , 22 Октябрь 2018
ДомойПубликацииВыборка элементов страницы в JavaScript

Выборка элементов страницы в JavaScript

Всем доброго понедельника.

Статья, показывающая работу со свойствами элемента посредством JavaScript, должна была показать (я надаюсь на это) всю лёгкость манипулирования стилями. Там же говорилось о том, что стили применяются к конкретному элементу. А как его получить?

В JS существует несколько медотов, с помощью которых программисту предоставляется возможность получать выборки элементов. Речь идёт о группах getElement* и querySelector*.

Выборка элементов в JavaScript

Браузеры предоставляют следующие методы:

  • getElementById — выборка одного элемента по его идентификатору (атрибут id);
  • getElementsByClassName — поиск элементов по имени класса (атрибут class);
  • getElementsByName — возвращает все элементы с указанным именем (атрибут name);
  • getElementsByTagName — поиск группы элементов по тегу (названию);
  • querySelector — выборка первого элемента по селекторам (имеются ввиду CSS селекторы);
  • querySelectorAll — похоже на предыдущий, но возвращает все элементы, попадающие под условие.

Прежде всего, условимся с html кодом, на примере которого будем отрабатывать навыки. Это будет небольшая матрёшка из контейнеров div.

<div id="go" class="da">
    <div name="none" class="one da">one
        <div class="two da">two</div>
    </div>
    <div class="three da">three</div>
</div>

getElementById

Самый простой метод, знакомый, пожалуй, каждому. Для получения ссылки на элемент достаточно выполнить простой запрос:

var elem = document.getElementById('go');

После этого elem будет содержать ссылку на элемент с идентификатором #go (у нас это <div id="go">). Теперь можно совершать различные манипуляции, например, изменить цвет на красный:

elem.style.color = '#FF0000';

Важно! Атрибут id должен быть уникальным для всей страницы. Если вы решите присвоить двум элементам одинаковый идентификатор, фунция всё равно вернёт 1 элемент. Какой? Зависит от многих факторов. Ключевой момент — вы не можете быть уверены, что получите определённый объект. Поэтому примите за правило: id обязан быть уникальным.

Метод применим только к объекту document. Просто запомните вызов метода: document.getElementById(id).

getElementsByClassName

Возвращает группу элементов (поэтому и Elements), в которых присутствует искомый класс. Отличительная особенность от предыдущего метода — дозволено указать элемент, относительно которого начинать поиск. Это может быть и document — выбирать элементы на всей странице, либо указатель на определённый блок. Например, получим все элементы с классом .da внутри контейнера #go.

var elem = document.getElementById('go');
var elems = elem.getElementsByClassName('da');

После выполнения кода в массиве elems будут содержаться 3 элемента: .one, .two и .three.

Если же требуется получить всё на странице, достаточно сделать так:

var elems = document.getElementsByClassName('da');

К трём элементам выше добавится ещё один — #go (как видно из кода, ему тоже присвоен класс .da).

К сожалению, данный метод не поддерживается в Internet Explorer версии 8 и ниже. Это значит, что все обладатели Windows XP оказываются в пролёте. Можно сделать свою реализацию функции, которая оббежит все теги на странице и отберёт лишь те, className которых соответствует условию, но есть более удобные методы для работы.

getElementsByName

Метод возвращает элементы, у которых атрибут name соответствует заданному имени.

var elems = document.getElementsByName('none');

Переменная elems после выполнения будет содержать 1 элемент со ссылкой на div.one (ему присвоено имя none).

Увы, и здесь не обошлось без ложки дёгтя. IE старых версий возвращает лишь те элементы, для которых атрибут name определён спецификацией, например: input, a. Приведённый код ничего не найдёт.

getElementsByTagName

Ищет элементы по имени тега. Метод применяться как к document, так и к конкретному элементу.

var elem = document.getElementById('go');
var elems = elem.getElementsByTagName('div');

Вернёт массив из трёх элементов: .one, .two, .three.

Для выборок используется редко. Наиболее частое применение — добавление нового элемента в цепочку. Пример ниже добавит элемент div.zero перед текстом one.

var new_div = document.createElement('div');
new_div.className = 'zero';
new_div.innerHTML = 'zero';
elems[0].insertBefore(new_div, elems[0].firstChild);

Ещё одна интересная особенность — если вместо названия тега указать звёздочку *, поиск производится по всем тегам.

var elems = document.getElementsByTagName('*');

Будут возвращены все теги на странице.

querySelector

Вот мы и подошли к серьёзным методам.

querySelector возвращает первый элемент, соответствующий условию.

var elem = document.querySelector('#go div');

Код вернёт ссылку на div.one. Про селекторы мы уже говорили, ссылка на статью в начале.

Может возникнуть вопрос, в чём преимущество данной функции? Если элемент имеет уникальный идентификатор, быстрее (и правильнее) воспользоваться document.getElementById(id). Но в html такое встречается нечасто. Поэтому, для матрёшек удобнее указывать привычную цепочку селекторов.

querySelectorAll

Последний метод, но не по значению. Всего одним запросом вы получаете целую пачку элементов, расположенных в разных блоках, принадлежащие определённому классу и т. п.

var elems = document.querySelectorAll('#go div.two, .one');

Вернёт 2 элемента: .one и .two. Метод примечателен тем, что отсеивает дубли — можно не беспокоиться, что в результирующую выборку будут включены элементы, соответствующие каждой цепочке селекторов. Например:

var elems = document.querySelectorAll('#go div, .one');

Будет содержать 3 элемента: .one, .two и .three, а не 4, как можно было подумать (из-за второго правила .one).

Оба метода querySelector* применимы не только к document, но и к конкретному элементу. В некоторых ситуациях это очень удобно.

Было бы просто свинством, если я, рассказав про выборки, не привёл бы пример их использования. Единичные элементы, возвращаемые с помощью getElementById или querySelector, уже являются ссылкой и готовы к дальнейшим манипуляциям. Остальные выборки возвращают массивы. Но это не такая большая проблема, как может показаться; просто пробежим по всем элементам и каждому присвоим нужное свойство. Пусть это будет что-то совсем простое — сделать цвет текста красным.

for (var i = 0, cnt = elems.length; i < cnt; i++) {
    elems[i].style.color = '#FF0000';
}

Вот и всё. Теперь и вы, уважаемый читатель, познали дзэн и способны делать удивительные вещи.

Рейтинг: 0

Автор публикации

1 891
не в сети 5 дней

x64 (aka andi)

Комментарии: 2750Публикации: 384Регистрация: 02-04-2009
Так себеНеплохоХорошоЗамечательноСупер! (1 голосов, в среднем: 5,00 из 5)
Загрузка...

8 комментариев

  1. Как же давно их не было… Вкусненьких статеюшек-пирожоооочкооов от Андрея smile
    я пока в процессе постижения дзэна))) Но удивительные вещи хоцца творить прямо сейчас ;)
    Как это можно сделать, Андрей?))))

    Рейтинг: 1
    • Анастасия, приветики smile
      Да куда уж ещё удивительнее и непостижимее? Ты самый креативный Копирайтер!
      Доказательства нужны, или на слово верим? ;-)

      Рейтинг: 0
  2. А как добавить пункт в конец списка ?

    Есть код:

    <a href="/empire/ru/categories" rel="nofollow"> Все разделы</a>
    ...
    Тут ещё пункты...
    ....

    А этот пункт создать и в конец списка вставить

    <a href="/discussion/345160/kalendarsobytiy-2018" rel="nofollow"> Календарь</a>

    sorry

    Рейтинг: 0
    • Alex, здравствуйте.

      Есть несколько способов.
      Самый простой — через innerHTML: получить старое содержимое, добавить к нему новое и заменить получившееся в старом.
      Чтобы было понятнее:

      
      <div id="menu">
          <a href="/empire/ru/categories" rel="nofollow">Все разделы</a>
          <a href="/empire/ru/add_categories" rel="nofollow">Дополнительные разделы</a>
      </div>
      <input type="button" value="добавить" onclick="add_elem()">
      

      В этом коде, при нажатии «добавить» вызывается функция add_elem() (наша функция), которая и добавляет в конец очередной элемент.

      Пример в лоб:

      function add_elem() {
        document.getElementById('menu').innerHTML = document.getElementById('menu').innerHTML + '<a href="/discussion/345160/kalendarsobytiy-2018" rel="nofollow">p; Календарь</a>p;';
      }

      Более правильное решение:

      function add_elem() {
        var a = document.createElement('a');
        a.href = '/discussion/345160/kalendarsobytiy-2018';
        a.rel = 'nofollow';
        a.innerHTML = ' Календарь';
        document.getElementById('menu').appendChild( a );
      }

      Помимо appendChild, есть ещё метод insertBefore(), он используется когда нужно добавить элемент перед другим.

      Рейтинг: 0
  3. Здравствуйте, имеется скрипт, который делает выборку одного элемента по его идентификатору, а необходимо для всех элементов на странице…

    Имеется строчка
    Заголовок 1
    Заголовок 2
    Заголовок 3
    Заголовок 4
    ююю и т.д.

    Этот скрипт срабатывает только для заголовка 1, что логично, так как происходит выборка одного элемента. Как сделать, чтобы данный скрипт работал для вех заголовков. Сам пробовал реализовать, но получается коряво. Может стоит через getElementsByClassName, но что-то не вышло…

    Собственно сам скрипт:

    var base_color=»#777″
    var color1=»#d19191″
    var color2=»#6eb9cc»
    var flashspeed=100
    var flashingletters=2
    var flashingletters2=2
    var flashpause=0
    var n=0
    var color_c_text=»»

    message=document.getElementById(«c_text»).innerHTML;

    if (document.all||document.getElementById){
    /*color_c_text=»;*/
    for (m=0; m<message.length; m++) color_c_text+='’+message.charAt(m)+»
    /*color_c_text+=»*/
    document.getElementById(«c_text»).innerHTML = color_c_text
    }
    else document.getElementById(«c_text»).innerHTML = message

    function crossref(number){
    var crossobj=document.all? eval(«document.all.neonlight»+number) :
    document.getElementById(«neonlight»+number)
    return crossobj
    }

    function neon(){
    if (n==0){
    for (m=0;mflashingletters-1) { crossref(n-flashingletters).style.color=color2 }
    if (n>(flashingletters+flashingletters2)-1) {
    crossref(n-flashingletters-flashingletters2).style.color=base_color }
    if (n<message.length-1) { n++ }
    else {
    n=0
    clearInterval(flashing)
    setTimeout("start_color()",flashpause)
    return
    }
    }
    function start_color(){
    if (document.all||document.getElementById)
    flashing=setInterval("neon()",flashspeed)
    }
    start_color()

    Заранее благодарен за ответ.

    Рейтинг: 0
    • Алексей, здравствуйте.
      Не совсем понятно, что должно происходить, некоторые данные отсутствуют. Плюс код использует очень старые трюки. В частности, метод getElementById() появился в далёком IE 5.5 (середина двухтысячных), так что сложно представить, что сейчас где-то его нет. Да что там, сайты уже давно перестали учитывать, что у кого-то может быть отключен JS.

      Так понимаю, есть группа заголовков с идентификаторами:
      neonlight-1
      neonlight-2
      neonlight-…
      По рабочей части кода выходит, что каждый тик setInterval() меняет цвет одного из заголовков.

      Рейтинг: 0
      • Здравствуйте, спасибо за ответ.
        Код работает как надо, но на странице, например, test.php имеется пять заголовков типа:

        1. Это 1 заголовок
        2. Это 2 заголовок
        3. Это 3 заголовок
        4. Это 4 заголовок
        5. Это 5 заголовок

        то данный код, работает, только для первого заголовка, в данном случае взял 3 цвета (основной и 2 которые меняются).
        Выборка одного элемента по его идентификатору, где id=»c_text», так как у меня все заголовки на странице с этим id (что неправильно, я привёл просто для примера), то метод getElementById() будет работать только для одного элемента на странице, в моём случае:

        1. Это 1 заголовок, а остальные просто игнорируются, а мне нужно чтобы функция neon () работала для всех заголовков.

        Если на странице 1 заголовок, то проблем нет — прописываем id и всё работает, а если несколько заголовков, то этот метод не сработает. Тут надо по-другому этот скрипт реализовать, вот и пытаюсь данный момент решить.
        C id не вариант, думал единый класс всем заголовкам прописать, но пока с кодом не выходит…
        Надеюсь вы сейчас поняли, что я пытался донести.
        Просто имеется блог, на одной странице 6 тем, а у каждой темы свой заголовок и в данный момент идёт подсветка одного заголовка так как идёт выборка по id, а нужна чтобы функция работала для всех заголовков.

        Рейтинг: 0
        • Давайте пойдём от простого к сложному)
          Вот простой пример работы с группой элементов, принадлежащих одному классу: клик.
          Код страницы можно сохранить или посмотреть в браузере — комбинация Ctrl-U. В примере на каждом «тике» окрашивается один заголовок.

          Рейтинг: 0

Оставить комментарий

Ваш email не будет опубликован.Необходимы поля отмечены *

*

Добавьте изображение (jpg/gif/png)

Политика конфиденциальности

Наш сайт использует файлы cookies, чтобы улучшить работу и повысить эффективность сайта. Продолжая работу с сайтом, вы соглашаетесь с использованием нами cookies и политикой конфиденциальности.

Принять

Авторизация

Регистрация

Пароль не введен

Генерация пароля