- ベストアンサー
DOMを使ったテキストノードの繰り返し書き換え方法
- ブラウザがかたまってしまう理由とは？
- テキストノードの書き換え方法を調べました
- i%2==0で空白テキストノードを除くようにしてみましたが、うまくいきません
- tekkenman7
- お礼率70% (150/212)
- JavaScript
- 回答数8
- ありがとう数5
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
いくつか手段が考えられます。 > pels.childNodes.item(i).nodeValue = "test"; p要素ノードは子ノードを持たないため、childNodes は空のノードリストです。 textContent (IE8- は innerText) でテキストノードを代入するか、createTextNode でテキストノードを生成する必要があります。 document.getElementById('aaa').gelElementsByTagName('p'); でp要素ノードを取得する。<div id="aaa"> の子要素に限定されない制約があります。 http://jsfiddle.net/jwj24/ document.getElementById('aaa').children; で子要素ノードを取得する。children は DOM4 規定ですが、IE5 以上で使用可能です。先行実装には変わりないので childNodes と併用するといいと思います。 http://jsfiddle.net/jwj24/1/ http://www.w3.org/TR/domcore/#interface-element http://www.quirksmode.org/dom/w3c_core.html#t71 上記は createTextNode で実現していますが、textContent (IE8- は innerText) でもやり方は同じです。 --- To: #2 さん p要素ノードの nodeValue プロパティに値を代入してませんか？
その他の回答 (7)
- babu_baboo
- ベストアンサー率51% (268/525)
think49 さん、 ご指摘、有難う御座います。 「文法違反」では無かったようです。ちょと反省。 （やっぱりこの手の指摘は、控えようと思います） <title></title> 回答者でこれさえも書かない人がいるなかで、書く人はごく少数。 更に中身を書かないのは、ほぼ私ですね。 配慮が足りませんでした。 今後何かしら付け加えようと思います。 （もじすうせいげんがなかったら、もうちょっときれいにかこうとおもったり、どっちみちめんどうくさいのでかかなかったり・・・）
- think49
- ベストアンサー率59% (285/482)
To: #6 (babu_baboo) さん <p></p> は HTML 4.01 Strict においても内容が必須ではありません…。( http://validator.w3.org/ でも valid) --- <!ELEMENT P - O (%inline;)* -- paragraph --> http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/strict.dtd --- HTML-lint では警告を発しますが、"宗教的によろしくないんじゃないかとされるもの" に分類されていました。 http://openlab.ring.gr.jp/k16/htmllint/explain.html#empty-container p要素の内容を空にすべきではないと私も思いますが、どちらかといえばtitle要素の内容がない事が気になります。 <title></title> はvalidですが、タブブラウザのタブタイトルが空白になるという切実な問題がありまして…。 文法違反を回避するためか <title></title> はたまに見られますが、例えサンプルであっても <title>サンプル</title> ぐらいの配慮があると嬉しいなと。 # かくいう私もjsfiddleではほとんどさぼっているのであまり偉そうなことはいえないのですが、フレーム内部を辿る人は多分少ないので許してくれたら嬉しいな、って…。 ところで、HTML 4.01 Strict におけるtitle要素の DTD は <!ELEMENT TITLE - - (#PCDATA) -(%head.misc;) -- document title --> ですが、「#PCDATA がなければならない」にも関わらず、空の内容を許しているvalidatorにやや違和感を覚えました。 http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.3.3.1 を読むと、"A" の説明が "Aが1回のみ出現しなければならない。" とあります。 #PCDATA を追いかけると http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/types.html#h-6.2 に辿り着きますが、HTML 4.01 仕様上では "文字集合" の表現にとどめられ、何個以上の文字列かまでは定義されていないようです。 どうやら、[ISO8879] に情報がありそうですが、海外のキャッシュがないとダウンロードできそうもないので諦めました…。 > if (node.nodeName == 'P') で、よいとおもう。 if (node.tagName == 'P') が更にベターだと思いますｗ
- babu_baboo
- ベストアンサー率51% (268/525)
もうこんなかきかたにもなれた？ Array.prototype.forEach.call (document.querySelectorAll ('#aaa > p'), function (n) { n.textContent = 'test'; }); <p></p> これは、ぶんぽういはん（HTML4.01）。（ついでに <script> も） <p> </p> とかにするとか、なかになにかいれる「くせ」をつけるべき・・・ くせといえば DOCTYPE をせんげんするべき・・・ if (node.nodeType == 1) でちぇっくするくらいなら if (node.nodeName == 'P') で、よいとおもう。 <hr> ようそでも、とおってしまうから。
お礼
Array.prototype.forEach.call Arrayに変換するとコストを削減できるとか・・・ でもIE8以降には対応していないようです。 実際に使っていないので分かったようで分かっていないので 使ってみて理解を深めていくつもりです。 文法を意識しないで質問しましたが、 これからは自分のためにも意識します。
- pringlez
- ベストアンサー率36% (598/1630)
皆さんの説明を総合して反映するとこうなります。 一応、ChromeでもFireFoxでもIEでも動く機能のみを使いました。 <script> var pels = document.getElementById("aaa"); var pp = pels.childNodes; for (var i = 0; i < pp.length; i++) { // 要素ノードのみを対象とする if (pp.item(i).nodeType == 1) { pp.item(i).innerHTML = "test"; } } </script>
お礼
if (pp.item(i).nodeType == 1) { こういったやり方も参考になりました。
- think49
- ベストアンサー率59% (285/482)
#3 です。 #3 の説明は誤解が生まれるかもしれないので、補足します。 > children は DOM4 規定ですが、IE5 以上で使用可能です。先行実装には変わりないので childNodes と併用するといいと思います。 「先行実装」と書きましたが、実際には多くのブラウザが独自実装したものを DOM4 に取り込んだ形です。 innerHTML が HTML5 に取り込まれた経緯と似ています。
- notnot
- ベストアンサー率47% (4900/10358)
まず、無限ループしてますね。 誤＞for(i=0; i=pp.length; i++){ 正＞for(i=0; i<pp.length; i++){ var pp = document.getElementById("aaa").gelElementsByTagName("p"); for(i=0; i<pp.length; i++){ pp[i].nodeValue = "test"; } ですかね。
お礼
for(i=0; i=pp.length; i++) 気が付かなかったです。 有難うございます。
- yambejp
- ベストアンサー率51% (3827/7415)
テキストノードを書き換えちゃっていいの？ フロー的にはPタグの間の改行マーク部分のテキストノードを つかんでいるみたいだけど・・・Pタグの中身を書き換えたいのではない？ i%2は順番が保証されているわけではないのでオススメできないですね
お礼
ありがとうございます。
お礼
childNodes＝子ノードへのアクセス ノードへのアクセスは (1)getElementById('aaa').getElementsByTagName('p')[i] (2)getElementById('aaa').children[i] このような方法でできて、 createTextNodeでテキストノードを追加 (1)getElementById('aaa').getElementsByTagName('p')[i].createTextNode("") (2)getElementById('aaa').children[i].createTextNode("") textContentでテキストにアクセスしてもできる。 ですね。 http://jsfiddle.net/ こんなに便利なサイトがあったんですね！ 大変参考になりました。有難うございました。