Uncaught TypeError: Cannot read property ‘href’ of undefined 原因与解决方法

今天在调试代码的时候，无意中发现原生JavaScript代码报错如下：

Uncaught TypeError: Cannot read property 'href' of undefined

中文翻译

未捕获的TypeError：无法读取未定义的属性'href'

原因：

我暂时也没有找具体是什么原因？因为我的：

1、原生JavaScript代码 已经放在html最底部了，不存在页面没有加载完就优先运行了JS代码。

2、原生JavaScript代码 我自认为是没有问题的，如果有问题请指正。

解决方法

由于没有找到原因，很尴尬，暂时先做一个内容记录吧！希望有朋友能找到解决方法。

我是一直没有解决掉这个问题，但是我的代码又可以正常运行，这段代码的功能以及效果又可以正常实现，但是又会一直提示这个错误，让我很无语。

既然我们知道了报错，也说了报错的行数，我就去看一下，具体如下：

重要的JS代码部分，我已经放出来了，如下：

<script>
    //导航 菜单点击选中 JavaScript代码区域
    var all_a = document.getElementsByTagName('a');
    var url = document.URL;

    for(var i=0;i<=all_a.length;i++){
        //console.log(document.getElementsByTagName('a')[0].href);
        if(document.getElementsByTagName("a")[i].href === url){
            document.getElementsByTagName("a")[i].classList.add("layui-this");
            document.getElementsByTagName('a')[i].parentElement.parentElement.parentElement.classList.add("layui-nav-itemed");
            // console.log(document.getElementsByTagName('a')[i].parentElement.parentElement.parentElement);
        }
    }

</script>

经过我不断的测试，得到以下结果：

1、我把循环代码中的的 i 换成数字 1 2 3 4 5 6 7 8 9 ...... 就不会提示任何的报错，只要用  i 就会报错。

2、我用了

document.getElementsByTagName("a")[i].getAttribute("href");

结果一样提示类似的错误，但是代码功能与效果皆一切正常。

总结：

由于我不是专业做前端的，我的原生JavaScript代码也是非常非常的菜，有哪位大神知道为什么的？欢迎评论中留言，非常感谢！

经过某位网友大神指导，他说原因是：

length i 实际是 100，href 只有50，所以报错了。