Question

在javascript中，你能通过psuedo类来定位页面上的元素吗？例如：

<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。

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

Answer 1

您始终可以使用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 showed this in his answer

Answer 2

如何选择这样的元素，然后使用它作为使用innerHTML更新的参考

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

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

正如其他人提到的那样，它并不是非常可靠 - 就像桌面结构发生了变化（你说这是你无法控制的），你将不得不改变你的代码再次工作。

Answer 3

这是一个简单的代码，可以更改文本：

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;
        }
    }
}

Answer 4

如何定位“用户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";

按内容选择元素

4 个答案: