Question

我正在研究如何通过javascript节点解析以各种方式收集信息。

当我运行下面的代码时，一切正常，直到我说到：

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

我收到错误：“未捕获的TypeError：无法读取未定义的属性'长度'。

这是我的完整脚本：

<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");

不正确？如果是这样，为什么？或者是其他导致这个问题的东西？

后续问题：是否有更好的方法来访问元素内部的文本节点，而不是我在这里完成的方式？

Answer 1

为什么不使用标签名称？

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

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

//etc

Answer 2

按照这篇文章了解。 ElementsByTagName为您提供实时收藏，有时为空。您正在获取OL标签的信息而不是其子项。如果您想获取子信息，请使用ById

How to use document.getElementByName and getElementByTag?

Answer 3

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

getElementsByTagName - 无法读取未定义的属性“length”

3 个答案: