Question

我试图从下表中获得值0.51：

HTML：

<div id=myDiv">    
<table class="myTable">
        <tbody>
            <tr>
                <td>Text1:</td>
                <td class="data"><strong>0.51</strong></td>
            </tr>
            <tr>
                <td>Text2:</td>
                <td class="data"><strong>2199</strong></td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript的：

var foo= document.getElementById("myDiv").getElementsByClassName("myTable").getElementsByTagName("td")[0]
var other=foo.innerText

但是，下面这段代码：

document.getElementById("myDiv").getElementsByClassName("myTable").getElementsByTagName("td")[0]

正在返回错误：

TypeError: Object #<NodeList> has no method 'getElementsByTagName'

我做错了什么？

Answer 1

那是因为（道歉）NodeList个对象没有名为getElementsByTagName的方法。

让我们分解一下：

document.getElementById("myDiv")

使用id "myDiv"查找单个元素。

.getElementsByClassName("myTable")

查找其中包含"myTable"类的元素的列表。

.getElementsByTagName("td")[0]

...失败，因为列表没有名为getElementsByTagName的方法。

getElementsByClassName列表中的单个项目具有方法，但不包含列表。

例如，这会将第一个元素与类"myTable"一起使用：

var foo= document.getElementById("myDiv").getElementsByClassName("myTable")[0].getElementsByTagName("td")[0]
// Change here ------------------------------------------------------------^^^

但是，对于较新的（{更好支持的）querySelector和querySelectorAll，您的情况会更好。在这种情况下：

var foo = document.querySelector("#myDiv .myTable td");

...会在td内的第一个.myTable中为您提供第一个#myDiv，并且

var foo = document.querySelectorAll("#myDiv .myTable td");

...会为td中.myTable个元素的所有中的#myDiv个元素的所有列表}。

IE8支持

querySelector / querySelectorAll，而getElementsByClassName不支持。{/ p>

Answer 2

你可以改用：

document.querySelector('#myDiv .myTable td'); 
// cleaner code, since you are looking for 1 element

无论如何，你的问题是.getElementsByClassName("myTable")给你一个列表，你需要一个for循环才能通过它。您可以使用.getElementsByClassName("myTable")[0]来获得单个元素。然后使用：

document.getElementById("myDiv").getElementsByClassName("myTable")[0].getElementsByTagName("td")[0]

获取td的innerText返回错误对象＃<nodelist>没有方法'getElementsByTagName'</nodelist>

2 个答案: