Javascript 如何在<；头>；_Javascript_Html

Javascript 如何在<；头>；

javascript html

Javascript 如何在<；头>；,javascript,html,Javascript,Html,我和一位朋友在我们构建的js插件（）中遇到了一个问题——与加载DOM、其img元素和getElementsByClassName函数有关。一个简化的例子： <img class="pserve" /> <img class="pserve" /> <img class="pserve" /> <img class="pserve" /> 在类中，我们使用类.pserve调用document.getElementsByClassName： <

我和一位朋友在我们构建的js插件（）中遇到了一个问题——与加载DOM、其img元素和getElementsByClassName函数有关。一个简化的例子：

<img class="pserve" /> 
<img class="pserve" />
<img class="pserve" />
<img class="pserve" />

在类中，我们使用类.pserve调用document.getElementsByClassName：

<!DOCTYPE html>
<html lang="en-us" dir="ltr">
    <head>
            <script>
            elements = document.getElementsByClassName("pserve");
            console.log(elements);
        </script>

但是，如果尝试获取元素数组的长度，则结果为零：

<head>
        <script>
            elements = document.getElementsByClassName("pserve");
            console.log(elements.length);
        </script>



==> returning value for the console.log is 0  ==> wrong


elements=document.getElementsByClassName（“pserve”）；
console.log（elements.length）；
==>console.log的返回值为0==>错误

如果将console调用放在

之前，则会得到正确的返回值4

        <script>
            elements = document.getElementsByClassName("pserve");
            console.log(elements.length);
        </script>
 </body>



==> returning value for the console.log is 4  ==> right


elements=document.getElementsByClassName（“pserve”）；
console.log（elements.length）；
==>console.log的返回值为4==>正确

因此，问题是：

是否可能，如果可能，如何访问via getElementsByClassName中的“元素”，或者是否需要另一个js函数，或者更合适

带有[item:function]和四个条目的返回输出看起来很奇怪。是否有其他方法可以访问这些元素？e、 g.通过函数调用还是回拨

干杯r

当浏览器在解析HTML时遇到JavaScript时，浏览器会对其进行评估。在

中，尚未看到文档的正文

将脚本放在末尾，或者将代码放在“加载”或“准备就绪”事件处理程序中。

在解析HTML时遇到JavaScript时，浏览器会对其进行评估。在

中，尚未看到文档的正文

将脚本放在末尾，或者将代码放在“加载”或“准备就绪”事件处理程序中。

使用window.load事件。第一次调用脚本时，浏览器对这些元素一无所知。

使用window.load事件。当您第一次调用脚本时，浏览器对这些元素一无所知。

在您的情况下，

脚本在DOM加载相应元素之前执行。

将脚本放在所有内容之后，如下所示 <head>....</head> <body> // Content here... <script> elements = document.getElementsByClassName("pserve"); console.log(elements.length); </script> </body> 。。。。 //内容在这里。。。 elements=document.getElementsByClassName（“pserve”）； console.log（elements.length）；在您的情况下，脚本在DOM加载相应元素之前执行。将脚本放在所有内容之后，如下所示 <head>....</head> <body> // Content here... <script> elements = document.getElementsByClassName("pserve"); console.log(elements.length); </script> </body> 。。。。 //内容在这里。。。 elements=document.getElementsByClassName（“pserve”）； console.log（elements.length）；您必须使其处于dom就绪状态-因此向窗口的load事件添加一个处理程序。使用jQuery，您可以使用document ready函数有一件事让我感到困惑。到目前为止，你是如何在插件中编写了如此多的JavaScript，但你不知道在DOM中工作必须具备的一个基本方面？你必须使其处于DOM就绪状态-因此向窗口的load事件添加一个处理程序。有了jQuery，你可以使用document ready函数有一件事让我感到困惑。到目前为止，你是如何在这个插件中编写了这么多JavaScript的，但是你不知道在DOM中工作必须具备的一个基本方面？嗯，这个链接插件是一个普通的响应图像解决方案。如果我们将脚本放在最后，那么问题是基本的回退图像会在当前视口需要的图像之前加载-图像会加载两次或两次。我们问是否有其他解决方案的原因是，在身体被加载之前，已经有了一些已知的东西，因为正如我所描述的，getElementsByClassName已经识别了4个对象，但无法访问它们。@rpk-这很简单：在中运行的JavaScript不等待解析文档的其余部分，就无法访问文档的其余部分。DOM根本就没有在那个时候构建。@pointy-True。但这让我很困惑，为什么img对象列表通过粘贴在中的console.log可见和已知（如第一个代码段所示）。我猜DOM并不是为图像对象交换而构建的。那么现在已经有机会访问这些对象了吗？@rpk:在装载尸体之前还不知道。发生的情况是，.getElementsByCassName 返回元素的“活动列表”，该列表为空。但是，当您进入控制台查看输出时，文档已经加载，live列表显示了DOM相对于您提供的类的当前状态……即使集合不是“live”，一些控制台可能会欺骗您，因为它们不会在调用console.log（）时及时复制列表以表示快照，而只是在开发人员最终在控制台中展开列表时保存引用并显示其内容。hmmmm链接的插件是一个普通的响应映像解决方案。如果我们将脚本放在最后，那么问题是基本的回退图像会在当前视口需要的图像之前加载-图像会加载两次或两次。我们问是否有其他解决方案的原因是，在身体被加载之前，已经有了一些已知的东西，因为正如我所描述的，getElementsByClassName已经识别了4个对象，但无法访问它们。@rpk-这很简单：在中运行的JavaScript不等待解析文档的其余部分，就无法访问文档的其余部分。DOM根本就没有在那个时候构建。@pointy-True。但这让我很困惑，为什么img对象列表通过粘贴在中的console.log可见和已知（如第一个代码段所示）。我猜DOM并不是为图像对象交换而构建的。它也是