0

在 javascript 中，您是否能够通过伪类定位页面上的元素？例如：

<table id="loginInnerTable">
 <tbody>
  <tr>
   <td colspan="3">
    <span class="required">*</span><span> = required</span>
   </td>
  </tr>
  <tr>
   <td>User ID <span class="required">*</span></td>
  </tr>
 </tbody>
</table>

我将如何定位“用户 ID”文本以使用 .innerHTML 对其进行更改？这是一个表单示例，我无法访问代码本身，除非通过 JS。

否则，最好的方法是什么？

4

4 回答 4

4

您始终可以使用 DOM 遍历和 HTML DOM 扩展。不过，这取决于您的实际标记。在这种特定情况下，您可以执行以下操作：

获取对表的引用：

var table = document.getElementById('loginInnerTable');

获取对第二行的引用：

var row = table.rows[1];

获取对第一个单元格的引用：

var cell = row.cells[0];

更改第一个子节点的值（因为它是文本节点而有效）：

cell.firstChild.nodeValue = 'Some new text';

或者遍历所有文本节点以找到正确的节点（如果您有混合元素和文本节点，或者您要更改的节点不是第一个子节点）：

var node = cell.firstChild;
do {
    if (node.nodeType === 3 && node.nodeValue.indexOf('User ID') > -1) {
        node.nodeValue = 'Some new text';
        break;
    }
} while(node = node.nextSibling);

如果您不想将解决方案过多地限制在当前结构（它可能会不时更改），那么迭代所有行/单元格并找到所需的单元格将是一种更灵活的方法。Karl-André Gagnon 在他的回答中表明了这一点。

于 2013-04-30T13:15:51.993 回答
1

这里有一个简单的代码来改变文本：

var tdEl = document.getElementsByTagName('td')

for(var cpt = 0; cpt < tdEl.length; cpt++){
    if(tdEl[cpt].innerHTML.indexOf('User ID') != -1){
        tdEl[cpt].innerHTML = 'some text <span class="required">*</span>';
    }
}

如果你想让它成为一个函数（重用代码）：

changeNode('td', 'User ID', 'some text <span class="required">*</span>')

function changeNode(node, text, replace){
    var el = document.getElementsByTagName(node)
    for(var cpt = 0; cpt < el.length; cpt++){
        if(el[cpt].innerHTML.indexOf(text) != -1){
            el[cpt].innerHTML = replace;
        }
    }
}
于 2013-04-30T13:14:29.937 回答
1

像这样选择元素怎么样，然后将其用作更新使用的参考innerHTML

var userTD = document.getElementById('loginInnerTable').getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td');

我不确定它的效率如何，但它应该可以解决问题。

正如其他人提到的那样，它并不是非常可靠 - 好像表结构发生了变化（你说这是你无法控制的），你必须更改你的代码才能再次工作。

于 2013-04-30T13:13:40.937 回答
0

我将如何定位“用户 ID”文本以使用 .innerHTML 对其进行更改？

你不会的。当然你可以做类似的事情

var tab = document.getElementById('loginInnerTable');
tab.innerHTML = tab.innerHTML.replace("User ID", "something else");

但这将替换整个表，粉碎并重新解析其 DOM（当然，它在 IE 中不起作用）。

相反，您将使用 DOM 操作来获取和更改该文本节点：

var tab = document.getElementById('loginInnerTable'),
    td = tab.rows[1].cells[0],
    text = td.firstChild;
text.nodeValue = "something else";
于 2013-04-30T13:17:28.467 回答