Как проверить, существует ли элемент document.getElementsByClassName(‘super_div’) на странице
при этом варианте, если на странице есть такой див, то условие if выполняется, а если такого элемента нет, то условие все равно выполняется.
Но я гуглил на эту тему и там, предлагают проверять переменную на null:
var test = document.getElementsByClassName('super_div'); if (test == null) console.log('Такого элемента нету'); else console.log('Элемент существует');
Результат тот же, если есть див, то пишет: «Элемент существует», если нету дива то все равно пишет: «Элемент существует».
А если посмотреть что получает в переменная при обеих вариантах:
var test = document.getElementsByClassName('super_div'); console.log(test);
Если такой элемент есть то в консоли пишется:
Вся информация об этом диве что в него входит и т.д. и т.п. и с ним можно дальше работать.
Если такого элемента нет, то в консоли пишется:
[item: function, namedItem: function]
length: 0
__proto__: HTMLCollection
. //И тут далее идут какие-то однотипные function, proto и т.п. которые нам ничего не говорят.
И с такой переменной нельзя дальше работать.
Так вот как же быть в таком случае? И как правильно проверять существует ли тот или иной элемент на странице?
Как проверить, существует ли элемент в коллекции?
Есть List класса tablobj ( код класса ниже). class tablobj < public string.
Как проверить существует ли в массиве указанный элемент
Нужна помощь в написании кода: Суть: одномерный массив из 7 элементов, заполняется случайными.
Как проверить элемент на странице
Всем привет! Хочу сделать переключение стилей для блоков. Есть вот такая структура: <div.
Получить элемент из getElementsByClassName по innerHtml
Добрый день! Есть скрипт: var allesDiv=document.getElementsByClassName("status"); .
if ($(".super_div")){ console.log('Элемент существует'); } else { console.log('Такого элемента нету'); }
if ($("#super_div")){ console.log('Элемент существует'); } else { console.log('Такого элемента нету'); }
Я думаю вам стоит почитать какой-нибудь простой учебник, и такие вопросы сразу отпадут и будут казаться стыдными.
Вопросы для медитации:
что вернет эта конструкция при условии что элемента trololo нету?
document.getElementById('trololo')
document.getElementsByClassName('trololo')
Ответы вы разумеется всегда можете посмотреть в консоли. Вообще если сначала смотреть в консоли, а потом спрашивать, вопросов будет меньше
Добавлено через 6 минут
З.Ы.: Спасибо таким web-программистам как Ukkas — на их фоне я могу требовать куда больше денег)
Вы хотели сказать, что нужно в if сразу подставлять эту конструкцию без присваивания его к переменной?
Я запустил этот код на странице где был класс trololo и потом где его нету, результат один и тот же условие выполняется всегда:
if (document.getElementsByClassName('trololo')) { тут делаем чего-нибудь с этим элементом; } else { Сказать что этого элемента нету; }
Я уже выше отписывал, что мне возвращается в консоли если есть такой класс и если его нет.
Сообщение было отмечено UchihaSV как решение
Решение
Нет, я хотел сказать, что:
1. document.getElementById возвращает элемент, если он есть, и null если такого элемента нету.
2. document.getElementsByClassName возвращает NodeList — структуру, напоминающую массив. Заполненный если элементы есть, пустой если элементов таких нет.
И работать соответственно с айдишником и с классами надо по-разному.
3. Соответственно проверка if(document.getElementsByClassName(‘trololo’)) лишена смысла условие if([]) или if(<>) всегда выполнится.
if(document.getElementsByClassName(‘trololo’)==null) соответственно всегда уйдет в false
4. Для document.getEleementById же такое условие отработает
5. Проверить есть ли такой элемент можно проверив на пустоту результат getElementsByClassName. Это не вполне массив, но свойство length у него есть, в чем Вы сами убедились. Так что мешает его использовать?
И это все не rocket science, не какая-то недоступная черная магия. Это то, что можно понять с консолью и гуглом самому, имея минимальное представление о js
Поиск: getElement*, querySelector*
Свойства навигации по DOM хороши, когда элементы расположены рядом. А что, если нет? Как получить произвольный элемент страницы?
Для этого в DOM есть дополнительные методы поиска.
document.getElementById или просто id
Если у элемента есть атрибут id , то мы можем получить его вызовом document.getElementById(id) , где бы он ни находился.
Также есть глобальная переменная с именем, указанным в id :
…Но это только если мы не объявили в JavaScript переменную с таким же именем, иначе она будет иметь приоритет:
Это поведение соответствует стандарту, но поддерживается в основном для совместимости, как осколок далёкого прошлого.
Браузер пытается помочь нам, смешивая пространства имён JS и DOM. Это удобно для простых скриптов, которые находятся прямо в HTML, но, вообще говоря, не очень хорошо. Возможны конфликты имён. Кроме того, при чтении JS-кода, не видя HTML, непонятно, откуда берётся переменная.
В этом учебнике мы будем обращаться к элементам по id в примерах для краткости, когда очевидно, откуда берётся элемент.
В реальной жизни лучше использовать document.getElementById .
Значение id должно быть уникальным. В документе может быть только один элемент с данным id .
Если в документе есть несколько элементов с одинаковым значением id , то поведение методов поиска непредсказуемо. Браузер может вернуть любой из них случайным образом. Поэтому, пожалуйста, придерживайтесь правила сохранения уникальности id .
Метод getElementById можно вызвать только для объекта document . Он осуществляет поиск по id по всему документу.
querySelectorAll
Самый универсальный метод поиска – это elem.querySelectorAll(css) , он возвращает все элементы внутри elem , удовлетворяющие данному CSS-селектору.
Этот метод действительно мощный, потому что можно использовать любой CSS-селектор.
Псевдоклассы в CSS-селекторе, в частности :hover и :active , также поддерживаются. Например, document.querySelectorAll(‘:hover’) вернёт коллекцию (в порядке вложенности: от внешнего к внутреннему) из текущих элементов под курсором мыши.
querySelector
Метод elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.
Иначе говоря, результат такой же, как при вызове elem.querySelectorAll(css)[0] , но он сначала найдёт все элементы, а потом возьмёт первый, в то время как elem.querySelector найдёт только первый и остановится. Это быстрее, кроме того, его короче писать.
matches
Предыдущие методы искали по DOM.
Метод elem.matches(css) ничего не ищет, а проверяет, удовлетворяет ли elem CSS-селектору, и возвращает true или false .
Этот метод удобен, когда мы перебираем элементы (например, в массиве или в чём-то подобном) и пытаемся выбрать те из них, которые нас интересуют.
. . closest
Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.
Метод elem.closest(css) ищет ближайшего предка, который соответствует CSS-селектору. Сам элемент также включается в поиск.
Другими словами, метод closest поднимается вверх от элемента и проверяет каждого из родителей. Если он соответствует селектору, поиск прекращается. Метод возвращает либо предка, либо null , если такой элемент не найден.
getElementsBy*
Существуют также другие методы поиска элементов по тегу, классу и так далее.
На данный момент, они скорее исторические, так как querySelector более чем эффективен.
Здесь мы рассмотрим их для полноты картины, также вы можете встретить их в старом коде.
- elem.getElementsByTagName(tag) ищет элементы с данным тегом и возвращает их коллекцию. Передав «*» вместо тега, можно получить всех потомков.
- elem.getElementsByClassName(className) возвращает элементы, которые имеют данный CSS-класс.
- document.getElementsByName(name) возвращает элементы с заданным атрибутом name . Очень редко используется.
// получить все элементы div в документе let divs = document.getElementsByTagName('div');Давайте найдём все input в таблице:
Ваш возраст:
let inputs = table.getElementsByTagName('input'); for (let input of inputs) Одна из самых частых ошибок начинающих разработчиков (впрочем, иногда и не только) – это забыть букву «s» . То есть пробовать вызывать метод getElementByTagName вместо getElementsByTagName .
Буква «s» отсутствует в названии метода getElementById , так как в данном случае возвращает один элемент. Но getElementsByTagName вернёт список элементов, поэтому «s» обязательна.
Другая распространённая ошибка – написать:
// не работает document.getElementsByTagName('input').value = 5;Попытка присвоить значение коллекции, а не элементам внутри неё, не сработает.
Нужно перебрать коллекцию в цикле или получить элемент по номеру и уже ему присваивать значение, например, так:
// работает (если есть input) document.getElementsByTagName('input')[0].value = 5;Ищем элементы с классом .article :
Живые коллекции
Все методы «getElementsBy*» возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.
В приведённом ниже примере есть два скрипта.
- Первый создаёт ссылку на коллекцию . На этот момент её длина равна 1 .
- Второй скрипт запускается после того, как браузер встречает ещё один , теперь её длина – 2 .
First div Second div Напротив, querySelectorAll возвращает статическую коллекцию. Это похоже на фиксированный массив элементов.
Если мы будем использовать его в примере выше, то оба скрипта вернут длину коллекции, равную 1 :
First div Second div Теперь мы легко видим разницу. Длина статической коллекции не изменилась после появления нового div в документе.
Итого
Есть 6 основных методов поиска элементов в DOM:
| Метод | Ищет по. | Ищет внутри элемента? | Возвращает живую коллекцию? |
| querySelector | CSS-selector | ✔ | — |
| querySelectorAll | CSS-selector | ✔ | — |
| getElementById | id | — | — |
| getElementsByName | name | — | ✔ |
| getElementsByTagName | tag or ‘*’ | ✔ | ✔ |
| getElementsByClassName | class | ✔ | ✔ |
Безусловно, наиболее часто используемыми в настоящее время являются методы querySelector и querySelectorAll , но и методы getElement(s)By* могут быть полезны в отдельных случаях, а также встречаются в старом коде.
- Есть метод elem.matches(css) , который проверяет, удовлетворяет ли элемент CSS-селектору.
- Метод elem.closest(css) ищет ближайшего по иерархии предка, соответствующему данному CSS-селектору. Сам элемент также включён в поиск.
И, напоследок, давайте упомянем ещё один метод, который проверяет наличие отношений между предком и потомком:
- elemA.contains(elemB) вернёт true , если elemB находится внутри elemA ( elemB потомок elemA ) или когда elemA==elemB .
Задачи
Поиск элементов
Вот документ с таблицей и формой.
- Таблицу с id=»age-table» .
- Все элементы label внутри этой таблицы (их три).
- Первый td в этой таблице (со словом «Age»).
- Форму form с именем name=»search» .
- Первый input в этой форме.
- Последний input в этой форме.
Откройте страницу table.html в отдельном окне и используйте для этого браузерные инструменты разработчика.
Есть много путей как это сделать.
// 1. Таблица с `id="age-table"`. let table = document.getElementById('age-table') // 2. Все label в этой таблице table.getElementsByTagName('label') // или document.querySelectorAll('#age-table label') // 3. Первый td в этой таблице table.rows[0].cells[0] // или table.getElementsByTagName('td')[0] // или table.querySelector('td') // 4. Форма с name="search" // предполагаем, что есть только один элемент с таким name в документе let form = document.getElementsByName('search')[0] // или, именно форма: document.querySelector('form[name="search"]') // 5. Первый input в этой форме form.getElementsByTagName('input')[0] // или form.querySelector('input') // 6. Последний input в этой форме let inputs = form.querySelectorAll('input') // найти все input inputs[inputs.length-1] // взять последний