getElementsByTagName - 无法读取未定义的属性“长度”答案

【问题标题】：getElementsByTagName - Cannot read property 'length' of undefinedgetElementsByTagName - 无法读取未定义的属性“长度”
【发布时间】：2016-09-21 22:55:35
【问题描述】：

我正在学习如何通过 javascript 节点进行解析，以各种方式收集信息。

当我运行下面包含的代码时，一切正常，直到我到达以下行：

for(var i = 0; i < olElements.childNodes.length; i++){

我收到错误：“Uncaught TypeError: Cannot read property 'length' of undefined”。

这是我的完整脚本：

<script type="text/javascript" language="JavaScript1.1">
function getNodeValue(){
    var olElement = document.getElementById("toDoList");
    var a = olElement.getElementsByTagName("li");
    console.log("The ordered list contains " + a.length + " items.\n\n");

    console.log(a[a.length - 1].lastChild.nodeValue + "\n\n");



    for(var i = 0; i < olElement.childNodes.length; i++){
        if(olElement.childNodes[i].nodeType == 1 ){
            var childOf = olElement.childNodes[i];
            for(var j = 0; j < childOf.childNodes.length; j++){
                if(childOf.childNodes[j].nodeType == 3 ){
                    console.log(childOf.childNodes[j].nodeValue);
                }
            }
        }
    }

    var oltags = document.getElementsByTagName("ol");
    for(var k = 0; k < oltags.childNodes.length; k++){
        if(oltags.childNodes[k].nodeType == 1 ){
            var childOf = oltags.childNodes[k];
            for(var l = 0; l < childOf.childNodes.length; l++){
                if(childOf.childNodes[l].nodeType == 3 ){
                    console.log(childOf.childNodes[l].nodeValue);
                }
            }
        }
    }


}
window.onload = getNodeValue;
</script>

HTML 如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Getting Node Values</title>
</head>
<body>
    <h1>Things To Do</h1>
    <ol id="toDoList">
        <li>Mow the lawn</li>
        <li>Clean the windows</li>
        <li>Answer emails</li>
        <li>Learn javascript</li>
        <li>Learn more javascript</li>
        <li>And learn even more!</li>
    </ol>

    <p id="toDoNotes">Make sure all are completed by 8pm so I can watch the game on TV!</p>
</body>
</html>

是我在代码中使用getElementsByTagName吗

var oltags = document.getElementsByTagName("ol");

不正确？如果是这样，为什么？还是其他原因导致了这个问题？

后续问题：有没有比我在这里做的更好的方法来访问元素内的文本节点？

【问题讨论】：

var oltags = document.getElementsByTagName("ol") 将返回 HTML 集合，您可以通过索引访问每个元素
这就是我上面使用的。我不明白为什么当我使用oltags.childNodes.length 时它会给出“未定义”错误。我将阅读下面@jsquerylover 引用的文章。
另外，谁能告诉我为什么对我投反对票？我在这里做错了吗？
因为oltags没有属性childNodes，但是oltags[0]有
谢谢@OlenaHoral！所以你是说当我使用var olElement = document.getElementById("toDoList"); 访问id 为toDoList 的ol 时，我的变量有一个属性childNodes，但是如果我尝试使用var oltags = document.getElementsByTagName("ol"); 访问所有的ol 标签我没有childNodes 属性使用该变量而不使用索引。我开始明白了。谢谢！！！

标签： javascript html parsing getelementsbytagname

【解决方案1】：

为什么不直接使用标签名称呢？

var a = olElement.getElementsByTagName("li");

for(var i = 0; i < a.length; i++){
    if(a[i].nodeType == 1 ){

//etc

【讨论】：

这是我在代码中用来访问文本节点的第一种方式。之后我在尝试其他方法。我试图理解为什么会这样，但后来的代码没有。为什么我收到“未定义”错误？

【解决方案2】：

你应该使用document.getElementById("idOfElement") 然后迭代它的子节点

【讨论】：

谢谢。我之前在我的代码中这样做了。我只是想看看其他方法是否也能奏效。不明白为什么在我引用的代码行上出现“未定义”错误。最终，我只是想了解访问不同节点和节点类型并获取其信息的所有方法。