Question

我已阅读过多篇帖子，但仍然不明白为什么document.getElemenstsByTagName（＆＃39; img＆＃39;。）长度打印出来＆＃39; 0＆＃39;但是当您控制日志时，它会显示正确的长度。

为了进一步解释我的问题，我的部分HTML看起来像这样

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

现在我动态地将元素作为子元素添加到#slider元素中。

在我的javascript中，我有一个对象

var manualSlide = {
 imageLength: document.getElementsByTagName('img').length,
//other properties 
};

为什么财产＆＃39; imageLength＆＃39;被分配＆＃39; 0＆＃39;而不是实际的长度？

编辑：

这是我的整个脚本

<script>
    $.getJSON('data.json',function(data){
        $.each(data.images, function(key){
            setImages(data.images[key]);
        });
    });

    function setImages(obj){
        var imgTag = '';
        imgTag += "<img src='" + obj.Url + "' style='width:800px;height:400px' alt ='"+ obj.Title +"' name='pics'/>";
        $('#slider').append(imgTag);
    }

    $(document).ready(function(){
        var slide = getManualSlide();

        document.getElementsByClassName('left').onclick = function(){
            slide.previousImg();
        };

        document.getElementsByClassName('right')[0].onclick = function(){
            slide.nextImg();
        };

        function getManualSlide(){

            var manualSlide = {
                imageNum : 1,
                imageLength: document.getElementsByTagName('img').length,
                image: document.getElementsByTagName('img'),
                previousImg: function(){
                    if(this.imageNum > 1){
                        this.imageNum --;
                    }
                    else{
                        this.imageNum = this.imageLength;
                    }

                    document.pics.src = this.image[this.imageLength - 1];
                },
                nextImg: function(){
                    if(this.imageNum > this.imageNum){
                        this.imageNum ++;
                    }
                    else{
                        this.imageNum = 1;
                    }

                    console.log(document.getElementsByTagName('img').length);
                    console.log(this.imageLength);
                    document.pics.src = this.image[this.imageLength - 1];
                }
            };

            return manualSlide;

        }

    });
</script>

Answer 1

所有关于代码执行的地点和时间都是如此。

您必须确保在解析图像标记（添加到DOM树）后执行代码。为此，您可以将代码放在正文中的img-tags后面，或者等待文档加载：

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
     imageLength = document.getElementsByTagName('img').length;
     console.log(imageLength);
  });
</script>

您可以详细了解此活动here。

如果您使用的是jQuery，也可以使用

$(document).ready(function(){ /* your code goes here */ });

完全相同。

Answer 2

因为当文档中没有img标记时创建了对象。对象数据不会随文档一起更新。如果您想要这种行为，您应该使用事件。

而是创建一个函数来返回更新的对象。见下文：

function getManualSlide()
{
    var imgLen = document.getElementsByTagName('img').length;
    var manualSlide = {
     imageLength: imgLen
    };    

    return manualSlide;
}

http://jsfiddle.net/2akca0dg/2/

getElementsByTagName（'img'）。length记录为0

2 个答案: