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">
<!--
window.onload = function() {
var out_span = document.createElement('span');
out_span.setAttribute('class', 'align_left');
var list = document.getElementsByTagName('img');
var img = list[0];
/* この後、
どうやって、out_span を挿入すればよいのか?
*/
}
//-->
</script>
</head>
<body>
<h1> IMGタグに親ノードを追加したい </h1>
<p>
文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。
<img src="../images/logo.gif" alt="Logo" />
</p>
</body>
</html>
★ インデントは全角スペースで行っております。
ご教示お願いします。
No.1ベストアンサー
- 回答日時:
// この後...
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));
にブラウザ間の互換性に問題があるのでしょうか?
夜おそくまで回答いただきありがとうございます。
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 では何か特別なことをする必要があるのでしょうか?
No.4
- 回答日時:
補足的に。
setAttributeのIE6実装は何かと問題があるようですから
classNameプロパティで設定した方が良いです。
生成直後の要素なら値がないのは分かってますから、単純な代入で済みます。
以上です。
はい。
IE6 は今、環境的に確認できませんが、
のち検証したいと思います。
詳細まで教えていただき、本当にありがとうございました。
No.3
- 回答日時:
>> No.1 補足
「初心者を脱出したい」のなら「ソースの表示」で確認していてはダメです。
的外れな質問、補足を繰り返すことになりますから「Firebug」などで検索して
DOMを確認できる環境を整えるようにして下さい。
はい。
その後、
<style>
span.align_left {
float: left;
margin: 20px 20px;
}
などで、class属性が効いていることを確認しました。
Firebug など、これから習得したいと思います。
アドバイスありがとうございました。
No.2
- 回答日時:
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>
前回の質問に続けて、回答いただき大変に感謝します。
ご提示いただいた、スクリプトが動くことを確認しました。
まだ、コードの内容は理解していませんが、
やりたいことの道筋となると思います。
本当にありがとうございます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 高校受験 数学 2 2 2 2 ーー + ーー + ーー+ーー 3×5 5×7 7×9 9×11 ーーは1本の 2 2022/04/08 20:40
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- クラシック クラシックの曲の名前を教えてください 3 2022/07/01 21:19
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- 洋楽 たーたーたーー、たたたーーたたーーたたー。 みたいな音楽から始まってクラブ(マルタのしか分からないの 3 2022/05/23 06:02
- セックスレス 台湾の女性とsexをしたのですが 最初から最後まで あーー はぁーー あああー という 言葉?みたい 2 2022/06/20 11:05
- オーケストラ・合唱 曲名がわかりません。 鼻歌検索しても出てこないし、街で聞いたのか映画で聞いたのかもなにもわからないで 1 2022/05/29 23:28
- 子供 息子が、教師から専業投資になったんですが、キャリアになる仕事に就かず、人が来ない夜勤のコンビニバイト 1 2023/05/12 21:06
- カラオケ ひまーーMAX 3 2022/07/12 23:18
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
imgのsrcに値を設定するには
-
window.openで値の渡し方を教え...
-
JS switch文について
-
Javaにて画像を残像が残りつつ...
-
画像の座標位置取得
-
JavaScriptでリクエストを飛ば...
-
this.src等のthisについて
-
MAX関数を使ってからLEFT JOIN...
-
jspでcssが読み込めない
-
createElementで作成した要素を...
-
eclipseでcssを使うためには?
-
jqueryのsortableで一部ソート...
-
交互に入れ替わる画像を複数配置
-
textareaに画像を表示したい
-
読み込んだQRコードをフォーム...
-
c++std::string型をTCHARに変換...
-
javascriptテキストBOX色を元に...
-
CSS <div>の入れ子が反映さ...
-
JSPでの画像ファイル表示
-
checkboxにチェックを入れると...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
imgのsrcに値を設定するには
-
jQueryでサーバー上のファイル...
-
this.src等のthisについて
-
画像の座標位置取得
-
イベントハンドラを完全に外部...
-
連番画像「次へ」「前へ」で、...
-
画像の下に説明文をつけて切り...
-
JS switch文について
-
画像と文字を同時に切り替えたい
-
JavaScriptでシンプルなスライ...
-
スマートな外部javaでロールオ...
-
一定時間で画像とリンク先を変...
-
JavaScriptでリクエストを飛ば...
-
javascript 時計24時間表示
-
これはどんなJavaScriptなので...
-
Javaにて画像を残像が残りつつ...
-
FirefoxでonMouseOver/Outの動...
-
divの背景画像を、徐々に表示さ...
-
商品回転画像の作成方法
おすすめ情報