DOMを使ったテキストノードの繰り返し書き換え方法

2011/12/04 04:56

このQ&Aのポイント

ブラウザがかたまってしまう理由とは？
テキストノードの書き換え方法を調べました
i%2==0で空白テキストノードを除くようにしてみましたが、うまくいきません

tekkenman7
お礼率70% (150/212)

JavaScript
回答数8
ありがとう数5

みんなの回答 （8）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

think49
ベストアンサー率59% (285/482)

2011/12/04 14:50 回答No.3

いくつか手段が考えられます。 > 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 プロパティに値を代入してませんか？

質問者

お礼 2011/12/07 20:37

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/ こんなに便利なサイトがあったんですね！大変参考になりました。有難うございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (7)

babu_baboo
ベストアンサー率51% (268/525)

2011/12/05 10:57 回答No.8

think49 さん、ご指摘、有難う御座います。「文法違反」では無かったようです。ちょと反省。（やっぱりこの手の指摘は、控えようと思います） <title></title> 回答者でこれさえも書かない人がいるなかで、書く人はごく少数。更に中身を書かないのは、ほぼ私ですね。配慮が足りませんでした。今後何かしら付け加えようと思います。（もじすうせいげんがなかったら、もうちょっときれいにかこうとおもったり、どっちみちめんどうくさいのでかかなかったり・・・）

ログインすると、全ての回答が全文表示されます。

think49
ベストアンサー率59% (285/482)

2011/12/05 02:52 回答No.7

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)

2011/12/04 23:04 回答No.6

もうこんなかきかたにもなれた？ 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> ようそでも、とおってしまうから。

質問者

お礼 2011/12/07 20:52

Array.prototype.forEach.call Arrayに変換するとコストを削減できるとか・・・でもIE8以降には対応していないようです。実際に使っていないので分かったようで分かっていないので使ってみて理解を深めていくつもりです。文法を意識しないで質問しましたが、これからは自分のためにも意識します。

ログインすると、全ての回答が全文表示されます。

pringlez
ベストアンサー率36% (598/1630)

2011/12/04 16:55 回答No.5

皆さんの説明を総合して反映するとこうなります。一応、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>

質問者

お礼 2011/12/07 20:39

if (pp.item(i).nodeType == 1) { こういったやり方も参考になりました。

ログインすると、全ての回答が全文表示されます。

think49
ベストアンサー率59% (285/482)

2011/12/04 14:55 回答No.4

#3 です。 #3 の説明は誤解が生まれるかもしれないので、補足します。 > children は DOM4 規定ですが、IE5 以上で使用可能です。先行実装には変わりないので childNodes と併用するといいと思います。「先行実装」と書きましたが、実際には多くのブラウザが独自実装したものを DOM4 に取り込んだ形です。 innerHTML が HTML5 に取り込まれた経緯と似ています。

ログインすると、全ての回答が全文表示されます。

notnot
ベストアンサー率47% (4903/10364)

2011/12/04 11:00 回答No.2

まず、無限ループしてますね。誤＞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"; } ですかね。

質問者