Javascript getElementsByTagName（'；img'；）。长度注销为0

我读过多篇关于这个的文章，但仍然不明白为什么document.getElemenstsByTagName（'img'）。length打印出“0”，但当您在控制台日志中显示正确的长度时

为了进一步解释我的问题，我的HTML的一部分如下所示

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

为什么将属性“imageLength”指定为“0”而不是实际长度

编辑：

这是我的全部剧本

<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>

$.getJSON（'data.json'，函数（数据）{
$.each（数据、图像、函数（键）{
setImages（data.images[key]）；
});
});
函数集图像（obj）{
var imgTag=“”；
imgTag+=“”；
$（“#滑块”）.append（imgTag）；
}
$（文档）.ready（函数（）{
var slide=getManualSlide（）；
document.getElementsByClassName（'left'）。onclick=function（）{
slide.previousImg（）；
};
document.getElementsByClassName（'right'）[0].onclick=function（）{
slide.nextImg（）；
};
函数getManualSlide（）{
var手动滑动={
imageNum:1，
imageLength:document.getElementsByTagName（'img'）。长度，
图像：document.getElementsByTagName（'img'），
上一个示例：函数（）{
如果（this.imageNum>1）{
这个.imageNum--；
}
否则{
this.imageNum=this.imageLength；
}
document.pics.src=this.image[this.imageLength-1]；
},
下一步：函数（）{
如果（this.imageNum>this.imageNum）{
这个.imageNum++；
}
否则{
this.imageNum=1；
}
log（document.getElementsByTagName（'img'）.length）；
console.log（this.imageLength）；
document.pics.src=this.image[this.imageLength-1]；
}
};
返回滑轨；
}
});

这是关于代码执行的时间和地点

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

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

---

这完全一样

因为对象是在文档中没有img标记时创建的。对象数据不会随文档一起更新。如果需要此行为，则应使用事件

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

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

    return manualSlide;
}

---

您的JavaScript代码可能位于

中的

标记中，它出现在

中所有

标记之前。在浏览器继续解析页面的后续部分之前，

标记中的代码会立即进行计算。Yup。阅读注释部分：如果您使用jQuery，您也可以使用$（“img”）.length而不是document.getElementsByTagName（'img'）。lengthi尝试过使用$document.ready{…}它仍然读取为0，而不是实际的lengthalso不使用$document.ready（）{…}在解析所有其他对象和图像之前执行$document.ready（）（function（）{…}）而不是$document.ready{…}它应该在加载DOM（包括图像标记）时执行。但是这并不意味着图像已经加载（即'load'事件是针对$（window.load（function（）{…}）；）

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

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

    return manualSlide;
}