Question

我想通过来自服务器端的特定DIV / UL的类名来获取元素。但是当我使用
访问元素时 “ var element=document.getElementsByClassName("Class-Name");”，
它的名称未定义，因为：HTML正在加载，但是加载来自服务器端的特定UL需要花费时间。需要帮助吗？

我尝试过：
1.在HTML代码的末尾编写脚本。
2.尝试使用“ window.load = function（）”

来自服务器（站点核心/ CSHTML）的

UL：

<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

如果这是服务器端渲染，并且仅从服务器获取了此代码块，请尝试在页面末尾插入脚本而不添加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调用的结果，则可以在XHR的成功回调中添加JavaScript。

window.onload是在DOM完全加载了图像和其他资源后执行的。在您的情况下，ul的加载是一个显式请求，因此window.onload不会在执行之前等待它。参见MDN Docs。

如果您没有访问HTML源代码的权限，请在JavaScript中创建一个函数，并请有权访问HTML源代码的开发人员在ul标签末尾执行您的函数。

在您的代码中很明显，在执行ul时未加载window.onload，因此您需要在源代码中注入脚本，或者如果是XHR调用则使用回调。 / p>

Answer 2

使用onload而不是load。

Answer 3

最直接的方法是，在成功回调中，发送回HTML的XHR完成并将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>

只需确保目标browsers support即可。

Answer 4

使用数组标识符-[0]。您设置的变量是一个数组。

Answer 5

如果您想在执行JS之前首先呈现html，我想您只需要将script标签放在结束body标签之前即可。

在HTML中加载特定的div后，如何执行Java脚本？

5 个答案: