按內容選擇元素

在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

按內容選擇元素

回答

相關問題