Javascript初心者を脱出したい者です。タグをgetElementsByTagNameで取得し、みたいに囲いたいと考えています。条件として、タグの親ノードはタグです。全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？ Insert nextContent IMGタグに親ノードを追加したい文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 ★ インデントは全角スペースで行っております。ご教示お願いします。

classの設定は昔から鬼門ですね、こまかいことに目をつむればダイレクトに .classNameをいじってしまうとかもありですが、まぁこだわるとブラウザの依存を考慮しながらの処理になるでしょう span.align_left{ color:red; } window.onload = function() { var list = document.getElementsByTagName('img'); for(var i=0;i IMGタグに親ノードを追加したい test test

<img>タグを<span>でくくりたい

解決済

質問者：brosis
質問日時：2011/09/01 23:24
回答数：4件

Javascript初心者を脱出したい者です。

<img>タグをgetElementsByTagNameで取得し、
<span class="align_left"><img .... /></span> みたいに囲いたいと考えています。

条件として、<img>タグの親ノードは<p>タグです。
全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Insert nextContent</title>
<script type="text/javascript">

</script>
</head>
<body>
<h1> IMGタグに親ノードを追加したい </h1>
<p>
文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。
<img src="../images/logo.gif" alt="Logo" />
</p>
</body>
</html>

★　インデントは全角スペースで行っております。

ご教示お願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： my--
回答日時：2011/09/02 00:47

// この後...

out_span.appendChild(img.parentNode.replaceChild(out_span, img));

nodeObject.parentNode
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-re …
nodeObject.replaceChild( newChild, oldChild )
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-re …
nodeObject.appendChild( newChild )
http://www2u.biglobe.ne.jp/~oz-07ams/prog/dom-re …

この回答への補足

すみません。お礼の後、setAttribute関係のスクリプトを外して実行したところ、単なる<span></span>で囲われることを期待したのですが、そうなりませんでした。（IE6と7, FireFox3.6）

ブラウザで「ソースの表示」で確認しているのですが、
<span>タグが追加されておりません。

原因は、class属性の追加ではなく、提供頂いた、
out_span.appendChild(img.parentNode.replaceChild(out_span, img));
にブラウザ間の互換性に問題があるのでしょうか？

補足日時：2011/09/02 09:46

通報する

- 0
- 件

通報する

この回答へのお礼

夜おそくまで回答いただきありがとうございます。

Chrome13 で、成功することを確認しました。
質問の趣旨が変わってしまうのですが、
IE6, FireFox6で、以下のattribute設定をためしたところいずれも成功しません。

out_span.setAttribute('class', 'align_left'); // Chrome Ok
out_span.setAttribute('className', 'align_left'); //Chrome Ok, But classname="align_left"
out_span.className = "align_left";// IE6,FF6 Ng

一方、DOMツリーに既存の要素の class属性値を変更するには、
//IE6 Ok
elem.setAttribute( 'className', 'foo');
//FF6, Chrome13 Ok
elem.setAttribute( 'class', 'foo');
で出来ました。

DOMツリーに追加する前のオブジェクトに、class属性を追加する場合、
IE6 では何か特別なことをする必要があるのでしょうか？

通報する

お礼日時：2011/09/02 08:39

No.4

回答者： my--
回答日時：2011/09/02 12:38

補足的に。

setAttributeのIE6実装は何かと問題があるようですから
classNameプロパティで設定した方が良いです。
生成直後の要素なら値がないのは分かってますから、単純な代入で済みます。

以上です。

- 0
- 件

通報する

この回答へのお礼

はい。
IE6 は今、環境的に確認できませんが、
のち検証したいと思います。

詳細まで教えていただき、本当にありがとうございました。

通報する

お礼日時：2011/09/02 13:08

No.3

回答者： my--
回答日時：2011/09/02 10:51

>> No.1 補足

「初心者を脱出したい」のなら「ソースの表示」で確認していてはダメです。

的外れな質問、補足を繰り返すことになりますから「Firebug」などで検索して
DOMを確認できる環境を整えるようにして下さい。

- 0
- 件

通報する

この回答へのお礼

はい。

その後、
<style>
span.align_left {
　　float: left;
　　margin: 20px 20px;
}
などで、class属性が効いていることを確認しました。

Firebug など、これから習得したいと思います。

アドバイスありがとうございました。

通報する

お礼日時：2011/09/02 11:59

No.2

回答者： yambejp
回答日時：2011/09/02 10:10

classの設定は昔から鬼門ですね、こまかいことに目をつむればダイレクトに

.classNameをいじってしまうとかもありですが、まぁこだわるとブラウザの
依存を考慮しながらの処理になるでしょう

<style>
span.align_left{
color:red;
}
</style>
<script>
window.onload = function() {
var list = document.getElementsByTagName('img');
for(var i=0;i<list.length;i++){
var img=list[i];
var out_span = document.createElement('span');
out_span.appendChild(img.cloneNode(true));
var alt=img.getAttribute('alt');
if(alt) out_span.appendChild(document.createTextNode(alt));
out_span.className='align_left';
img.parentNode.replaceChild(out_span,img);
}
}
</script>
<h1> IMGタグに親ノードを追加したい </h1>
<p>
test
<img src="1.jpg" alt="alt1">
<img src="2.jpg" alt="alt2">
<img src="3.jpg">
test
</p>