JavaScriptとDOMでタグの操作ができる

2023/10/22 22:38

このQ&Aのポイント

JavaScriptとDOMの両方でタグの操作ができることを知りました。
一般的にはJavaScriptでタグを操作する際にはDOM形式の記述が多いです。
DOMの参考書を購入する際には、JavaScriptに特化した参考書を選ぶと良いでしょう。

ベストアンサー

javascriptとDOM

2012/01/06 19:19

javascriptを勉強中なのですが、 javascript形式とDOM形式の両方で、タグの操作が出来ると事を知りました。例)threeは、imgのid名です。 javascript：　書き方：document.three.src="画像ファイル"; DOM　：　書き方： document.getElementById('three').src="画像ファイル"; 質問1：一般的には、javascriptでタグを操作したりするとは、「DOM」「javascript」どちらの形式で javascriptを記述することが多いのでしょうか？質問2：現在、DOMのほうが扱いやすいのかなと思ってはいるのですが、DOMの参考書を購入しようと考えた際、どのような参考書を買えばいいでしょうか。javascriptで使用することを考えています。どなたかご教授いただけましたら幸いです。よろしくお願いします。

ShiftTail
お礼率80% (423/528)

JavaScript
回答数1
ありがとう数1

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

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

ベストアンサー

SAYKA
ベストアンサー率34% (944/2776)

2012/01/07 10:22 回答No.1

これからやるならDOMの方が良いよ。あと言っているのはどっちもjavascriptだから。要素の操作の仕方がDOM的かどうかってだけ。書き方がめんどくさいけどDOMじゃない方はブラウザによって挙動がまちまちだからDOMの方がやや安全って感じなだけ。 DOMに関してはjavascriptでxml　だとかでネットを探すと出てくるから　無理に買わなくても良いんじゃないかな。慣れてくると　紙の資料じゃ情報が更新されなくて使いにくくなるよ。 http://www6.airnet.ne.jp/manyo/xml/ 「たのしいXML」というサイトがオススメ。メニューの真ん中あたりにDOMとJavaScriptというのが有る筈だから見てみたら良いよ。可能ならDOMって何？とか、操作しようとしてるXMLが何者なのかを学ぶと良いよ。それをHTMLに当てはめて使おうとしてるだけだから。

質問者

お礼 2012/01/09 20:19

ご回答ありがとうございます。 DOMに焦点をあてて勉強してみようと思います。

関連するQ&A

javascript DOM
javascript DOMについて DOMはドキュメントオブジェクトモデルの略だと思いますが、DOMそのものというのはブラウザ画面に映っているオブジェクトそのものという解釈で良いのでしょうか？というのもjavascriptには「document.write()」というメソッドがあると思いますがdocumentはブラウザ画面そのものを指していて、writeは書く。直訳するとブラウザ画面に書くになると思いますが DOMもdocumentはブラウザ画面、オブジェクトはブラウザに移っているオブジェクト（<input type="button">など）、モデルは良くわからないのですが HTMLの画面に映っているタグ自体はDOMと呼ぶのでしょうか？
- ベストアンサー
- JavaScript
IE11 javascriptについて
すみません、IE11なってから、以下のjavascriptが動かなくなりました。画像は、フェードイン、フェードアウトを繰り返し、画像はランダムに移動します。全部のロジックを書いてしまいましたが、何処がIE11から変更されたかが解らなくて、困っている所です。何処を直すのか、全部聞くのもあつかましいと思いました、どのあたりを見直しすれば宜しいですか。教えて頂ければ幸いです。 <SCRIPT language="JavaScript">  </SCRIPT>
- ベストアンサー
- JavaScript
JavascriptのDOMについて
JavascriptのDOMについて <textarea id="ta"></textarea> というHTMLがあり、Javascriptで、 document.getElementById("ta").value = "test"; とすれば表示されますが、この .valueプロパティを知らずに最初 .innerHTMLとしていました。 textareaのプロパティで書き込むのはvalueと知る方法が知りたいです。知らない人は.valueすら想像できません。皆さんは、どのようにしてプロパティを見つけているのでしょうか？
- ベストアンサー
- JavaScript
抽出　正規表現　DOM?
PHPの正規表現で、例えば <img src="画像ファイル名"...> のようにイメージタグのsrc部分の画像ファイル名を抽出させたいのですが、正規表現の記述の仕方がわかりません。このようなイメージタグなのですが、imgがIMGだったり、src=画像ファイル名　のように""がなかったり、 alt, width, height, borderなど属性もありますので、正規表現で純粋に画像ファイル名を抽出するのは難しいと考えますが、ふと思ったのですが、DOM???を使えば簡単にできる？かなと思うだけでこれも実現方法がわかりません。現在、PHP4.3を使っていますが可能でしょうか？
- ベストアンサー
- PHP
javascript について追加の質問
質問NO6591909＝3/14　10：59の追加の質問です。素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？　IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>
- ベストアンサー
- JavaScript
javascriptの記述について
私は今javascriptを独学で勉強をしていて、勉強した範囲内で自分で作成してみようと思いjavascriptのプログラムを書いています。やりたいこととしてはメイン画像があり、その下に三つボタンを作成し、その三つのボタンのどれか一つにマウスを持っいくとメイン画像が切り替わるという javascriptを作成しています。またその三つのボタンにはそれぞれメイン画像が切り替わるようにイベントをだしています。 html側 <body> <div id="image"> <img src="image/main-image.jpg" /> </div> <div id="bottonbox"> <div id="botton1"> <img src="image/staff01.png" /> </div> <div id="botton2"> <img src="image/staff01.png" /> </div> <div id="botton3"> <img src="image/staff01.png" /> </div> </body> javascript window.addEventListener('load',photo_change,false); function photo_change(event){ var elem = document.getElementById('botton1'); elem.addEventListener('mouseover',botton1,false); elem.document.getElementById('botton2'); elem.addEventListener('mouseover',botton2,false); elem.document.getElementById('botton3'); elem.addEventListener('mouseover',botton3,false); } function botton1(event){ var img_change = document.getElementById('image'); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } ※botton2,3はsrc=画像名だけが違うだけで、botton1関数と同じの為、省略します。これを実行すると、もともとあるメイン画像がremoveされず、下に新しい画像が表示されてしまいます。ブレークポイントをつけてトレースしたのですが、どうやらimg_change.removeChild(img_change.firstChild); でremoveされていないらしくなぜか二回目にremoveされます。ですので、試しに function botton1(event){ var img_change = document.getElementById('image'); //removeChild二回やってみる img_change.removeChild(img_change.firstChild); img_change.removeChild(img_change.firstChild); var img =document.createElement('img'); img.src = 'image/main-image2.png'; img_change.appendChild(img); } こうするともともとあったメイン画像がremoveされ、botton1にマウスを載せた時に表示させようとしていた画像がちゃんと表示されます。ですが、なぜ一回のimg_change.removeChild(img_change.firstChild);ではメイン画像をremoveできないのでしょうか。どなたかわかる方おしえていただけますでしょうか。また、どこが悪いのか、など解説も付け加えていただけると幸いです。
- ベストアンサー
- JavaScript
DOM 属性の取得
下記は画像などのスライドのスクリプトです。スライドの後のほう、つまり順番の最後にあたる9番目で　http://www.trape3.com/ban.htmlへのリンクを貼っています。そのリンクを外した上で、 <img>を入れなおしています。つまり、 1) <img src="image02/ani001.jpg" name="anime"> へのリンクを貼る。 →その結果このようになる。　　<a href="http://www.trape3.com/ban.html"><img src="image02/ani001.jpg" name="anime"></a> 2) その次に　上記の全体をremoveする。 3) その上で、<img src="image02/ani001.jpg" name="anime">　を置きなおす。という操作をしていますが、そこで問題。この最後の9場面が終了して、ふたたび一番目に戻って、そこでスライドが止まってしまいます。理由は、 1) name="anime" を取得できない。 2) あるいは、 name="anime" が存在していない。どちらかだと思われます。というのは、 document.anime.src　の代わりに　document.getElementById('bb01').firstChild.src とすると、動きが止まらないで継続していくからです。ということで、 name="anime" はどうなってしまったのか。この部分の操作に関するスクリプトは　次のとおりです。 imageTag=document.createElement('img'); imageTag.setAttribute('name','anime'); imageTag.setAttribute('src','image02/ani001.jpg'); 　　　document.getElementById("bb01").appendChild(imageTag); imgエレメントを作成し、そこに属性としてのname="anime"を置くということですね。本に書かれてあるとおりです。(笑この置いたはずの　name="anime"　が効いていない、どうしてなのかという質問です。よろしくお願いします。 ------------------------------------------- スクリプト ■htmlファイル <body onload="timerID=setTimeout('change()',5000)"> <div style="position: absolute; top: 220px; left:80px" id="bb01"><img src="image02/ani001.jpg" name="anime" alt="アニメ"></div> ■jsファイル image1=new Image(); image1.src="image02/ani001.jpg"; image2=new Image(); image2.src="image02/ani002.jpg"; image3=new Image(); image3.src="image02/ani003.jpg"; image4=new Image(); image4.src="image02/ani004.jpg"; image5=new Image(); image5.src="image02/ani005.jpg"; image6=new Image(); image6.src="image02/ani006.jpg"; image7=new Image(); image7.src="image02/ani007.jpg"; image8=new Image(); image8.src="image02/ani008.jpg"; image9=new Image(); image9.src="image02/150.jpg"; function change() { clearTimeout(timerID); if(document.anime.src==image1.src) document.anime.src=image2.src; else if(document.anime.src==image2.src) document.anime.src=image3.src; else if(document.anime.src==image3.src) document.anime.src=image4.src; else if(document.anime.src==image4.src) document.anime.src=image5.src; else if(document.anime.src==image5.src) document.anime.src=image6.src; else if(document.anime.src==image6.src) document.anime.src=image7.src; else if(document.anime.src==image7.src) document.anime.src=image8.src; else if(document.anime.src==image8.src) { document.getElementById('bb01').removeChild(document.getElementById('bb01').firstChild); document.getElementById("bb01").innerHTML = "<a href=\"http://www.trape3.com/ban.html\">" + "<img src=" + "\"" + image9.src + "\"" + "width=\"100px\"" + "name=\"anime\"" + "\">" + "</a>"; } else { document.getElementById('bb01').removeChild(document.getElementById('bb01').firstChild); imageTag=document.createElement('img'); imageTag.setAttribute('name','anime'); imageTag.setAttribute('src','image02/ani001.jpg'); document.getElementById("bb01").appendChild(imageTag); } timerID=setTimeout("change()",5000); }
- ベストアンサー
- JavaScript
JavaScriptでリクエストを飛ばす方法を教えて下さい。
下記内容で画像の切り替えを教えて頂いたのですがこれに画像をクリックした時にサーバー側にクリックした事を分るために URL（リクエスト）をバックグラウンド（非同期かな）で渡したいと思います。どうしたら良いでしょうか？？ブラウザーの画面は画像をクリックしても切り替わりません。誠に恐縮ですが下記ソースに追加して教えて頂ければと思います。何卒よろしくお願いします。 <html> <head> <script type="text/javascript"></script> </head> <body onload="init();"> <img src="a.jpg" id="img1" style="cursor:pointer;" onclick="clickImg(this);" /> </body> </html>
- 締切済み
- JavaScript
JavaScriptについて
サイト作成中なのですが、JavaScriptのところでつまづいています。ボタンをクリックすると別窓で画像が出てきて表示されるというJavaScriptを作ると、ボタンは表示されていたのですが、ボタンを押しても画像が表示されません。つまり押しても何も反応がありません。恐らく画像の保存場所が違うのではないかとにらんでみたのですが見当違いかな？？タグは以下の通りです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> function cl(){ popwin=window.open(",'img','width=150,height=150'); popwin.document.write('<IMG SRC="image3.jpg">'); } </SCRIPT> </BODY> クリックしてください。 <FROM> <INPUT type="button" VALUE="クリック" onClick="cl()"> </FROM> </BODY> </HTML> 私はここの部分で間違えてると思いました。 popwin.document.write('<IMG SRC="***.jpg">'); デスクトップに置いてるmyhomepageにimageというフォルダを置いてそこに画像を保存しています。その場合、<IMG SRC="image/***.jpg">かなと思い実行してみましたがダメでした。。 JavaScriptのときは何か特別なファルダを作る必要があるんでしょうか？？ JavaScriptに関しては最近はじめたばかりでチンプンカンプンなのでわかりやすく説明していただけるとありがたいです。ちなみに上記のタグは説明本通り記載しました。よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
再度、JavaScriptのことで教えて！
先程、JavaScriptのことで質問した者です。下記にように記述したのですが、プレビューでは正常に表示されるのですが、アップすると、画像が×印で表示されません。関数、若しくは、ソースの記述に問題があるのでしょうか？どなたか、検査願えませんか？ --外部ファイル--（ファイル名：men.js）  --ソース--- <script type="text/javascript" src="js/men.js"></script>
- ベストアンサー
- その他([技術者向] コンピューター)