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');

2 番目の行への参照を取得します。

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 に答える