それが私の問題の例です
<div onclick="this.childNodes(0).innerHTML='0';">
1<b>2</b>3<b>4</b>5
</div>
ご覧のとおり、2 つの子ノード (「2」と「4」) がタグ付けされており、その他は単純なテキストです。問題は、他のノード/テキストに触れずに、特定の div コンテナー内のタグ付きおよびタグなしのノード (テキスト) の innerHTML を変更する方法です。
それが私の問題の例です
<div onclick="this.childNodes(0).innerHTML='0';">
1<b>2</b>3<b>4</b>5
</div>
ご覧のとおり、2 つの子ノード (「2」と「4」) がタグ付けされており、その他は単純なテキストです。問題は、他のノード/テキストに触れずに、特定の div コンテナー内のタグ付きおよびタグなしのノード (テキスト) の innerHTML を変更する方法です。
基本的に、テキストノード( 3)およびそれ以外の場合(fiddle)にはdata
(text)プロパティを使用します。nodeType
innerHTML
<div onclick="this.childNodes[0][this.childNodes[0].nodeType === 3 ? 'data' : 'innerHTML'] = '0'">
1<b>2</b>3<b>4</b>5
</div>
[編集]必要なのは基本的な概念の簡単な説明だけである場合、ソリューションとしてライブラリを提供するすべての人に本当にうんざりしています。たとえば、テキストノードと要素ノードのコンテンツプロパティは異なりdata
ますinnerHTML
。
Linguigiという lib を作成しました。それは同じくらい簡単でしょう
new Linguigi(element).eachText(function(text) {
if(this.parentNode.tagName === 'B') {
return "BACON";
}
});
これにより、b タグ内のすべてのテキスト ノードのテキストが「BACON」に変わります。元のコンテンツを「テキスト」パラメーターとして取得し、それを変換できます。
onclick
ところで:インラインイベント処理(属性)を取り除く必要があります
各ノードを再帰的に循環し、それらのプロパティを順番にチェックし、ノードがテキスト ノード ( で示される) の場合はプロパティを '0' でnodeType
更新できます。nodeValue
nodeType == 3
このHTMLがあると仮定します:
<div onclick="doReplace(this)">
1<b>2</b>3<b>4</b>5
</div>
次に、次のように、自分自身を再帰的に呼び出す単純な置換関数を記述できます。
window.doReplace = function (rootNode) {
var children = rootNode.childNodes;
for(var i = 0; i < children.length; i++) {
var aChild = children[i];
if(aChild.nodeType == 3) {
aChild.nodeValue = '0';
}
else {
doReplace(aChild);
}
}
}
動作するフィドルはここにあります: http://jsfiddle.net/p9YCn/1/