Как обратится к элементу у которого нет класса и id?

Рейтинг: 2Ответов: 2Опубликовано: 26.08.2023
<div id="modals-container">...</div>
<div style="position: fixed; z-index: 777; width: 1900px; height: 870px">

Как можно обратится к элементу без id и класса? Можно ли к нему обратится зная id предыдущего элемента? Можно ли обратится к такому элементу через свойство стиля? Спасибо за любую помощь заранне!

javascript
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Можно ли к нему обратится зная id предыдущего элемента

Да, можно, для этого обращаемся к #modals-container и получаем следующий от него элемент через метод .nextElementSibling:

document.querySelector('#modals-container').nextElementSibling

Можно ли обратится к такому элементу через свойство стиля?

Тоже можно.
Используйте document.querySelector(), таким образом у вас есть возможность достучаться до элемента через селекторы..
В селекторах есть возможность обращаться к атрибутам по содержимому, тут нам пригодится оператор *=, а далее делаем вот такой запрос и получаем данный элемент:

document.querySelector('div[style*="z-index: 777;"]')

Оба эти варианта будут куда быстрее, чем в ещё одном ответе, где мы собираем все div элементы со страницы и проходим по ним в поисках того самого.

Лично я бы выбрал именно второй вариант, т.к. если вдруг после элемента #modals-container появится какой-то другой, то скрипт получит уже другой элемент.. В прочем такое может случиться и со вторым вариантом, но мне кажется крайне мала вероятность встретить на странице ещё один div элемент с z-index: 777.

Ещё вопросик. А как скрыть этот элемент через JS

Скорее всего этот элемент появляется в вёрстке не сразу при инициализации скрипта, а когда-то после, по этому советую отложить до window.onload:

window.onload = function() {
  var el = document.querySelector('div[style*="z-index: 777;"]')
  if(el) el.style.display = "none";
}

Данный код выполнится когда полностью загрузится страница и если в этот момент данный элемент будет существовать, в противном случае предлагаю использовать вариант с MutationObserver

▲ -1

можно для поиска необходимого блока использовать заранее известные параметры стилей

document.querySelectorAll('div').forEach(x=>{
  if(x.style.zIndex == '777')
      x.innerHTML += ' [current]'
})