Как выполнить Java Script после загрузки определенного div в HTML?

Question

Я хочу получить элементы по имени класса определенного DIV / UL, который поступает со стороны сервера. Но пока я обращаюсь к элементу, используя"var element=document.getElementsByClassName("Class-Name");",Это дает неопределенное значение, потому что: HTML загружается, но требуется время для загрузки этого конкретного UL, который поступает со стороны сервера.Нужна помощь?

Я пробовал:1. Написание скрипта в конце кода HTML.2. Попробовал 'window.load = function ()'

UL, исходящий с сервера (Site-core / CSHTML):

<ul class=" Class-Name carousel-modal__info-list list-unstyled mb-0">
   <li>
      <h6>Space designed by</h6>
      <div class="row">
         <div class="col-6">By me</div>
         <div class="col-6 text-right">Link</div>
      </div>
   </li>
   <li>
</ul>
.
.
.
<script>
window.load = function(){
var element=document.getElementsByClassName("Class-Name");
console.log(element);
}
</script>

Фактический результат: Неопределенный Ожидается: 'элементы, относящиеся к классу

Answer 1

Если вы хотите визуализировать html перед выполнением JS, я думаю, вам просто нужно поместить тег script непосредственно перед закрывающим тегом body.

Answer 2

Самый простой способ - попытаться выбрать те элементы, когда XHR, который отправляет этот HTML, завершает и внедряет HTML, в обратном вызове успеха.

Другой (и менее идеальный) способ - использовать MutationObserver для отслеживания изменений в дочернем списке элементов.

// Simulates your AJAX call injecting HTML asynchronously.
setTimeout(() => {
  document.querySelector('#parent')
    .innerHTML = `
      <div class="foo"></div>
      <div class="foo"></div>
    `
}, 500)

const observer = new MutationObserver(() => {
  const elems = document.querySelectorAll('.foo')
  console.log(elems)
})

observer.observe(document.querySelector('#parent'), {
  childList: true
})

<div id="parent">
</div>

Просто убедитесь, что ваш целевой браузер поддерживает it.

Answer 3

Если это рендеринг на стороне сервера и только этот блок кода извлекается с сервера, попробуйте внедрить скрипт в конце страницы без window.onload.

Например, если следующий фрагментHTML извлекается,

<div id='test'>test</div>

Вы можете просто написать свой скрипт в конце этой страницы, где заканчивается ваш HTML.

<div id='test'>test</div>
<script>
var testDiv = document.getElementById ('test');
</script>

Этот скрипт будет выполнен, как толькоtest загружено.Поэтому, в вашем случае, введите сценарий ниже </ul>.

Примечание. Если этот конкретный ul является результатом вызова XHR, вы можете добавить свой JavaScript в обратный вызов XHR при успешном завершении.

window.onload выполняется, когда DOM загружен полностью, с изображениями и другими ресурсами.Загрузка ul в вашем случае является явным запросом, поэтому window.onload не будет ждать его перед выполнением.См. Документы MDN .

Если у вас нет доступа к источнику HTML, создайте функцию в своем JavaScript и попросите разработчика, который имеет доступ к источнику HTML, выполнить вашу функцию ниже.конец тега ul.

В вашем коде ясно, что ul не загружается при выполнении window.onload, поэтому вам нужно вставить скрипт в исходный код или использовать обратные вызовы, еслиэто вызов XHR.

Answer 4

Используйте onload вместо просто load.