按内容选择元素

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

我该如何定位“用户标识”文本以使用.innerHTML进行更改？这是一个我没有访问代码本身的例子，除了通过JS。

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

来源

2013-04-30 Ryan

你有机会获得jQuery的？ – 2013-04-30 13:04:17

不幸的是... – Ryan 2013-04-30 13:04:58

您可以使用JavaScript删除第二行，然后使用您选择的文本标签重新创建它。它看起来像这张表不会有太大的变化，所以你可以依靠表格的DOM节点保持不变。 – 2013-04-30 13:08:57

您随时可以使用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。

来源

2013-04-30 13:15:51

我会采用直接的非循环方法。 – 2013-04-30 13:22:06

['node.nodeType === Node.TEXT_NODE']（https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType）？ – Aprillion 2013-04-30 14:46:13

@deathApril：我*认为*这些常量不适用于所有浏览器。或者，这可能只是在较旧的IE版本中DOM节点构造函数未公开的问题。 – 2013-04-30 15:17:37

如何像这样来选择要素，然后只是用它作为基准来innerHTML

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

我不知道它是如何有效地更新，但它应该做的伎俩。正如其他人所说的那样，它不是大规模可靠的 - 就好像表结构发生了变化（你说的超出了你的控制范围），你将不得不改变你的代码再次工作。

来源

2013-04-30 13:13:40 naththedeveloper

这里一个简单的代码，这将改变文本：如果你想成为一个功能（重用的代码）

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-30 13:14:29

为什么麻烦匹配字符串？我只是使用第二个''的索引，实际上，不需要循环...如果表格更改，循环可能会失败，OP将需要相应地调整JavaScript。 – 2013-04-30 13:18:52

如果他有更多的td进行修改，他可以创建一个函数并传递字符串进行搜索。或者如果他决定添加一行，他将不必再次进入JS文件。循环将不会失败，除非他更改包含用户Id的代码 – 2013-04-30 13:21:39

我该如何定位“用户标识”文本以使用.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-30 13:17:28 Bergi

按内容选择元素

回答

相关问题