Javascript проверить существует ли элемент

Как проверить, существует ли элемент 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

Источник

Как проверить есть ли элемент в массиве js

Для этого в JS существует метод includes() , который работает на массивах. Метод includes() принимает два аргумента, один из которых обязательный. Это искомый элемент. После выполнения метод возвращает true или false в зависимости от того, есть элемент в массиве или нет. Ниже я привёл пример использования данного метода:

const collection = ['something', 'hexlet', 'something else']; const isHexletInCollection = collection.includes('hexlet'); console.log(isHexletInCollection); // => true 

Для поиска элемента в массиве можно использовать метод indexOf() , если элемент не найден, он возвращает -1 , если найден — индекс элемента:

const collection = ['something', 'hexlet', 'something else']; const isHexletInCollection = arr.indexOf('hexlet') != -1; console.log(isHexletInCollection); // => true 

Для того, чтобы проверить, есть ли элемент в массиве, могут помочь не только стандартные методы, о которых писали выше. К примеру, есть библиотека Lodash, в которой присутствуют методы для поиска элементов в массиве.

Метод _.indexOf()

Этот метод устроен достаточно хитро, его можно использовать в двух вариантах:

const numbers = [1, 2, 1, 2]; const findNumber = 2; const findIndex = _.indexOf(numbers, findNumber); // => 1 //В переменной findIndex окажется число 1 (индекс искомого элемента). //Если число 2 бы не нашлось, что в переменную findIndex было бы присвоено -1. 

Как видно из примера выше, метод нашёл тот элемент, который встретился первым. Но, что делать, если в данном массиве есть и другие элементы, которые равны искомому?
Здесь начинается самое интересное. Данный метод может найти элемент, который равен искомому, но после определенного индекса.

const numbers = [1, 2, 1, 2]; const findNumber = 2; const indexAfter = 2; const findIndex = _.indexOf(numbers, findNumber, indexAfter); // => 3 // Ищем число 2 после индекса 2. В итоге в переменной оказалось число 3. //Почему? 3 - индекс искомого числа, который встретился после второго индекса. 

Если вдруг вам нужно выполнить поиск элемента массива не слева направо, а наоборот, в библиотеке Lodash найдётся и такой метод.
Он работает ровно зеркально методу _.indexOf().

Метод _.lastIndexOf()

const numbers = [1, 2, 1, 2]; const findNumber = 2; const findIndex = _.lastIndexOf(numbers, findNumber); // => 3 

В переменную findIndex вернулся индекс совпадающего значения, но не от начала массива, а от его конца.

const numbers = [1, 2, 1, 2]; const findNumber = 2; const indexAfter = 2; const findIndex = _.lastIndexOf(numbers, findNumber, indexAfter); // => 1 

В переменную findIndex вернулся индекс совпадающего значения, после второго индекса (но опять же не от начала массива, а от его конца).

Источник

Array.prototype.includes()

Метод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false .

Интерактивный пример

Синтаксис

arr.includes(searchElement[fromIndex = 0])

Параметры

Позиция в массиве, с которой начинать поиск элемента searchElement . При отрицательных значениях поиск производится начиная с индекса array.length + fromIndex по возрастанию. Значение по умолчанию равно 0.

Возвращаемое значение

Примеры

[1, 2, 3].includes(2); // true [1, 2, 3].includes(4); // false [1, 2, 3].includes(3, 3); // false [1, 2, 3].includes(3, -1); // true [1, 2, NaN].includes(NaN); // true 

fromIndex больше или равен длине массива

Если fromIndex больше или равен длине массива, то возвращается false . При этом поиск не производится.

var arr = ['a', 'b', 'c']; arr.includes('c', 3); // false arr.includes('c', 100); // false 

Вычисленный индекс меньше нуля 0

Если fromIndex отрицательный, то вычисляется индекс, начиная с которого будет производиться поиск элемента searchElement . Если вычисленный индекс меньше нуля, то поиск будет производиться во всём массиве.

// длина массива равна 3 // fromIndex равен -100 // вычисленный индекс равен 3 + (-100) = -97 var arr = ['a', 'b', 'c']; arr.includes('a', -100); // true arr.includes('b', -100); // true arr.includes('c', -100); // true 

Использование includes() в качестве общих метода

includes() специально сделан общим. Он не требует, чтобы this являлся массивом, так что он может быть применён к другим типам объектов (например, к массивоподобным объектам). Пример ниже показывает использование метода includes() на объекте arguments.

(function()  console.log([].includes.call(arguments, 'a')); // true console.log([].includes.call(arguments, 'd')); // false >)('a','b','c'); 

Полифил

// https://tc39.github.io/ecma262/#sec-array.prototype.includes if (!Array.prototype.includes)  Object.defineProperty(Array.prototype, 'includes',  value: function(searchElement, fromIndex)  if (this == null)  throw new TypeError('"this" is null or not defined'); > // 1. Let O be ? ToObject(this value). var o = Object(this); // 2. Let len be ? ToLength(? Get(O, "length")). var len = o.length >>> 0; // 3. If len is 0, return false. if (len === 0)  return false; > // 4. Let n be ? ToInteger(fromIndex). // (If fromIndex is undefined, this step produces the value 0.) var n = fromIndex | 0; // 5. If n ≥ 0, then // a. Let k be n. // 6. Else n < 0,// a. Let k be len + n. // b. If k < 0, let k be 0.var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0); function sameValueZero(x, y)  return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y)); > // 7. Repeat, while k < lenwhile (k  len)  // a. Let elementK be the result of ? Get(O, ! ToString(k)). // b. If SameValueZero(searchElement, elementK) is true, return true. if (sameValueZero(o[k], searchElement))  return true; > // c. Increase k by 1. k++; > // 8. Return false return false; > >); > 

Если требуется поддержка устаревших движков JavaScript, которые не поддерживают Object.defineProperty , то наилучшим решением будет вообще не делать полифил для методов Array.prototype , так как не получится сделать их неперечисляемыми.

Спецификации

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Источник

Как проверить есть ли элемент на странице JS?

Перехожу плавно с jquery на vanilla js. Столкнулся с такой проблемой, когда нету элемента на странице показывает ошибку: Root element must be a existing Html node ну или та которая у других плагинов..

Как проверить есть ли элемент на странице?

$.fn.exists = function() < return this.length >0; > // example if( $(".price").exists() )

вот мой исходник, правильно я вообще начал собирать его?

import Glide from '@glidejs/glide'; import Isotope from 'isotope-layout'; import * as basicScroll from 'basicscroll'; import Masonry from 'masonry-layout'; import imagesLoaded from 'imagesloaded'; import GLightbox from 'glightbox'; const glide_settings = < /** * Glide all settings */ init() < // Component lenght const CustomLength = function (Glide, Components, Events) < return < mount() < Events.emit('slider.length', Components.Sizes.length); >, >; >; // Glide settings const glide = new Glide('.glide', < type: 'carousel', gap: '0', >); // Current slide const glide_curent = document.querySelector('#glide-current'); glide.on(['build.after', 'run'], function () < glide_curent.innerHTML = glide.index + 1; >); // Total slides const glide_total = document.querySelector('#glide-total'); glide.on('slider.length', (length) => < glide_total.innerHTML = length; >); // Glide mount glide.mount(< CustomLength, >); >, >; const back_text = < /** * Background text duplicate */ init() < // var back_text = document.querySelectorAll('.back-text'); // Array.prototype.forEach.call(back_text, function (e) < // const text_in = e.innerText; // e.appendChild(document.createElement('span')).textContent = text_in; // >); // const createImg = (el, i) => < // const img = document.createElement('img'); // img.src = images[~~(Math.random() * images.length)]; // el.appendChild(img); // setTimeout(() =>img.classList.add('animate'), i * 500); // >; // document.querySelectorAll('.result').forEach(createImg); // create and duplicate text document.querySelectorAll('.back-text').forEach((elem, i) => < const text_in = elem.innerText; const text_span_create = document.createElement('span'); const text_span = elem.appendChild(text_span_create); text_span.textContent = text_in; setTimeout(() =>text_span_create.classList.add('animate'), i * 500); >); >, >; const animation = < /** * Animation for texts */ init() < var basicScroll = require('basicscroll'); let parallax_sections = document.querySelectorAll( '.back-text span, .history__portfolio-box' ); for (let parallax_section of parallax_sections) < let _from = parallax_section.getAttribute('data-from') || '0%'; let _to = parallax_section.getAttribute('data-to') || '-30%'; let instance = basicScroll.create(< elem: parallax_section, from: 'top-top', to: 'bottom-bottom', direct: true, props: < '--ty': < from: _from, to: _to, >, >, >); instance.start(); > >, >; const smooth_scroll = < /** * Smooth scroll to anchor & header fix */ init() < // for header const el = document.querySelector('.site__header'); const observer = new IntersectionObserver( ([e]) =>e.target.classList.toggle('active', e.intersectionRatio < 1), < threshold: [1] >); observer.observe(el); // add anchors document.querySelectorAll('a[href^="#"]').forEach((trigger) => < trigger.onclick = function (e) < e.preventDefault(); let hash = this.getAttribute('href'); let target = document.querySelector(hash); let headerOffset = 0; let elementPosition = target.offsetTop; let offsetPosition = elementPosition + headerOffset; window.scrollTo(< top: offsetPosition, behavior: 'smooth', >); >; >); >, >; const isotope = < /** * Smooth scroll to anchor & header fix */ init() < var grid = document.querySelector('.home-portfolio__list'); var iso; imagesLoaded(grid, function () < iso = new Isotope(grid, < itemSelector: '.portfolio__item', percentPosition: true, masonry: < columnWidth: '.grid-sizer', >, >); >); // bind filter button click var filtersElem = document.querySelector('.home-portfolio__tags'); filtersElem.addEventListener('click', function (event) < var filterValue = event.target.getAttribute('data-filter'); iso.arrange(< filter: filterValue >); >); // change is-checked class on buttons var buttonGroups = document.querySelectorAll('.home-portfolio__tags'); for (var i = 0, len = buttonGroups.length; i < len; i++) < var buttonGroup = buttonGroups[i]; radioButtonGroup(buttonGroup); >function radioButtonGroup(buttonGroup) < buttonGroup.addEventListener('click', function (event) < buttonGroup.querySelector('.active').classList.remove('active'); event.target.classList.add('active'); >); > >, >; const glight = < /** * Smooth scroll to anchor & header fix */ init() < const lightbox = GLightbox(< touchNavigation: true, loop: false, autoplayVideos: true >); >, >; document.addEventListener('DOMContentLoaded', () => < glide_settings.init(); back_text.init(); animation.init(); smooth_scroll.init(); isotope.init(); glight.init(); >);

Источник