2016-09-21 55 views
-2

我正在學習如何通過javascript節點解析以各種方式收集信息。getElementsByTagName - 無法讀取未定義的屬性「長度」

當我運行下面的代碼在內,所有的作品,直到我去行,說:

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

我得到的錯誤:「遺漏的類型錯誤:無法讀取的未定義的屬性‘長’」。

這裏是我完整的腳本:

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

不正確的?如果是這樣,爲什麼?或者是別的什麼原因造成這個問題?

後續問題:有沒有更好的方式來訪問元素內的文本節點比我在這裏做的方式?

+0

VAR oltags =文件的信息。 getElementsByTagName(「ol」)將返回HTML集合,您可以通過其索引訪問每個元素 –

+0

這就是我上面使用的。我不明白爲什麼當我使用'oltags.childNodes.length'時它給出了「未定義」的錯誤。我將閱讀以下@jsquerylover引用的文章。 –

+0

另外,任何人都可以告訴我爲什麼這個對我來說票倒下?我在這裏做錯了什麼? –

回答

1

爲什麼不使用標籤名稱?

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

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

//etc 
+0

這是我用來訪問文本節點的代碼中的第一種方法。之後我正在嘗試其他方式。我試圖理解爲什麼工作,但後來的代碼沒有。爲什麼我得到'未定義'的錯誤? –

0

請按照這篇文章的理解。 ElementsByTagName爲您提供實時收藏,有時爲空。你得到OL標籤而不是它的child..If你想獲得孩子的信息,然後使用ById

How to use document.getElementByName and getElementByTag?

+0

感謝@jsquerylover通過閱讀您引用的文章可以看出,getElementById返回一個元素,而getElementsByTagName返回一個NodeList。我需要進一步研究這個以瞭解這個的含義。 –

0

您應該使用document.getElementById("idOfElement"),然後遍歷它的子節點

+0

謝謝。我早些時候在我的代碼中做了這個。我只是想看看是否還有其他方法。不理解爲什麼我在我所引用的代碼行上遇到'未定義'錯誤。最終,我只是想看看所有的方法來訪問不同的節點和節點類型並獲取他們的信息。 –

相關問題