Question

我有一个div，其中包含其他标签

<div id="mainDiv">
    <div>
        <table>
            <tbody>
                   <tr>
                      <td>1</td>
                      <td>item</td>
                      <td>item</td>
                      <td>2</td>
                   </tr>
            </tbody>
        </table>
    </div>

    <div>
        <table>
            <tbody>
                   <tr>
                      <td>1</td>
                      <td>item</td>
                      <td>item</td>
                      <td>5</td>
                   </tr>
            </tbody>
        </table>
    </div>
</div>

如何通过javascript访问此mainDiv的<td>。我想更改这些<td>

的innerHTML

Answer 1

var allDivTd = document.getElementById("mainDiv").getElementsByTagName("TD");

for(var i = 0; i < allDivTd.length; i++){
    var td = allDivTd[i];
    td.innerHTML = // do something w/ inner html
}

Answer 2

使用jQuery：$('div#mainDiv td')将返回一个包含所有<td>的集合。

您可以使用.html()修改其内容。有关示例，请参阅http://jsfiddle.net/StuperUser/vD3Tk/。

如果您正在执行大量的JS并且需要执行大量的DOM操作，请使用jQuery。它具有来自CSS的强大而简洁的选择器语法，用于DOM操作和跨浏览器兼容性的许多扩展方法。但是，如果你只是做了少量的JS，那就觉得没必要了。

Answer 3

您可以使用document.getElementsByTagName获取所有tr代码，然后对其进行迭代以访问单个td：

trs = document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {
    var tds = trs[i].childNodes;
        for (var J = 0; j < tds.length; j++) {
            var td = tds.childNodes[j];
            // process td
        }
    }
}

虽然，正如你所看到的，这看起来并不好看，而且非常冗长。对于这些类型的任务，使用jQuery，mootools，dojo等Javascript框架更容易。它们支持CSS选择器（例如jQuery），它允许您使用CSS选择器遍历DOM，它类似于XPath样式表达式，并且比手动dom遍历具有Javascript最初为此提供的少量功能强大得多。

Answer 4

var children = document.getElementById('mainDiv').getElementsByTagName('td');

通过javascript访问div内的项目

4 个答案: