- ベストアンサー
HTMLとJavascriptの汎用的な書き方について
HTMLのタグにid="namae"とすれば、Javascriptでdocument.getElementByIdを使って平面状に（すべてdocumentの下？）でアクセスできるので、 getElementByIdは便利かなと思っているのですが、 タグで name属性を使ってアクセスする場合と、 id属性でgetElementByIdでアクセスする場合の どちらが今後一般的になるのでしょうか？ nameは昔から？あったようなので、切り捨てるのも 気になりますが、記述の面で両方書くと手間なので、 id属性で一本化しても問題ないでしょうか？
- nati_desu
- お礼率3% (4/107)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
formなど階層的な構造を持つオブジェクトに対しては nameでアクセスする方が楽です。 また、nameはユニークである必要はないので、 同じ属性（？）のオブジェクトに対して再帰的にアクセス する場合はIDは使えないのでNameでアクセスすることに なるでしょう。 （getElementsByClassなどが実装されればまた違うので しょうけどね・・・） IDで統一は難しいとおもいますが時代の趨勢としては getElementByIdが一般的になっていくでしょう。
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
タグと一般的に言った場合には、 name 属性は限られたタグにしか記述できません。 対してid は、ほとんどのタグに記述できます。 どちらのアクセスが・というのは、正しければどちらでもいいと思います。
関連するQ&A
- 【JavaScript】toggleの使い方
id="color"を付けた<p>タグで以下のような記述をしてみました。 マウスオーバーをすれば、上記の<p>タグの色は赤に変わり、マウスをはずすと 色が元の色（black）に戻ります。 うまくはいきましたが冗長に感じます。 classListを使ってtoggleをつけた練習をしたことはあります。 このようなケースで"toggle"を使ってマウスオーバーをした時にはテキストは赤色、はずすと元の色(black)になるように簡潔に記述する方法はあります？ 超初心者です。簡潔に記述する方法があれば教えて下さい。宜しくお願いします。 (HTML) <p>こんにちは。こんにちは。こんにちは。</p> <p id="color">こんにちは。こんにちは。こんにちは。</p> <p>こんにちは。こんにちは。こんにちは。</p> ---------------------------------------------------- (JavaScript) document.getElementById("color").addEventListener("mouseover", () => { document.getElementById("color").style.color = "red"; }); document.getElementById("color").addEventListener("mouseout", () => { document.getElementById("color").style.color = "black"; });
- ベストアンサー
- JavaScript
- XHTMLとHTMLの違いについて
XHTMLのHTMLの違いについて教えてください。 勉強するものの、これといった違いが判らずにこまってます。 （今のところ、HTMLとは記述方式が違うんだよ～とか、XMLの宣言が必要なんだよ～、ということはわかったのですが） （参考したＵＲＬ） http://www.atmarkit.co.jp/fxml/askxmlexpert/022xhtml/22xhtml.html HTMLとXHTMLの違いとして以下の点が挙げられていることがわかりました。 ----------------------------------------------------------------- １．文書は整形式でなければならない ２．要素名及び属性名は小文字でなければならない ３．非空要素には終了タグが必要である ４．属性値は常に引用符で括られなければならない ５．属性の省略化はしてはならない ６．meta、hr、br、img などは、空要素として書く ７．属性値内での改行を含む複数の空白は１つと見なす ８．スクリプトおよびスタイル要素の定義が異なる ９．要素の入れ子などSGMLの排除機能を再現できない １０．‘id’および‘name’属性をもつ要素は、‘id’属性を使用する ----------------------------------------------------------------- とあるのですが、違う部分っていうのは「こういった定義部分だけ」であって、動作として大きな違い「ここが違うんだ」といった部分はないのでしょうか？ 「書式が厳密になっています。」言葉から、XHTMLは「HTMLをより厳密に書くもの」ということなのでしょうか？ また、１０番目の、 「‘id’および‘name’属性をもつ要素は、‘id’属性を使用する 」について、イメージできなかったのですが、一体何のことを言っているのでしょうか？ 例えば、JavaScriptを使用して、要素を操作する場合は、 getElementById("ID名")にて、操作を行うべきである、と言っているのでしょうか？
- ベストアンサー
- HTML
- javascriptにてHTMLのhiddenエリアのvalueを変更したい
javascriptにてHTMLのHIDDENエリアのVALUEをフォームの値が変わるごとに更新していきたいのですが、やり方がいまいちわかりません。 <input type = "text" value="10" id="aaa" onchange=aaa();/> <input type = "text" value="20" id="bbb" onchange=aaa();/> <input type = "hidden" name="abc" value="aaa"/> <script> function aaa(){ document.abc.value = document.getElementById("aaa").value+document.getElementById("bbb").value ; } </script> このような感じで考えていますが、進みません。どなたかご教授お願いいたします。
- 締切済み
- JavaScript
- これってJavaScriptですか？？
以下のソースはJavaScriptになりますか？ HPを（初心者ながら）作っているのですが JavaScriptを使うとパソコンのブラウザなどによっては違うように見えると聞きました。 以下のソースがJavaScriptなら、どのへんがどんな風に違って見えるのでしょうか？ <table cellspacing="0" cellpadding="0" style="width:250px;font-size:13px;color:#000"><tbody><tr style="text-align:center"><td style="border-width:1px 1px 0 1px;border-style:solid;border-color:#000"><div style="background:#ffcccc;border-bottom:1px solid #ffcccc;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME1" onclick="document.getElementById('NAME4').style.backgroundColor='#ffcccc';document.getElementById('NAME1').style.borderColor='#ffcccc';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME11').innerHTML"> タブ１ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ff6699;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME2" onclick="document.getElementById('NAME4').style.backgroundColor='#ff6699';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#ff6699';document.getElementById('NAME3').style.borderColor='#000000';document.getElementById('NAME4').innerHTML=document.getElementById('NAME22').innerHTML"> タブ２ </div></td><td style="border-width:1px 1px 0 0;border-style:solid;border-color:#000"> <div style="background:#ffeeee;border-bottom:1px solid #000;padding:3px 8px;cursor:hand;white-space:nowrap" id="NAME3" onclick="document.getElementById('NAME4').style.backgroundColor='#ffeeee';document.getElementById('NAME1').style.borderColor='#000000';document.getElementById('NAME2').style.borderColor='#000000';document.getElementById('NAME3').style.borderColor='#ffeeee';document.getElementById('NAME4').innerHTML=document.getElementById('NAME33').innerHTML"> タブ３ </div></td><td style="width:100%;border-bottom:1px solid #000"> </td></tr><tr><td colspan="4"><div style="border-width:0 1px 1px 1px;border-style:solid;border-color:#000;background:#ffcccc;padding:10px;height:130px" id="NAME4"> ここにタブ１の文章 </div></td></tr></tbody></table> <div style="display:none" id="NAME11"> ここにもタブ１の文章 </div><div style="display:none" id="NAME22"> ここにタブ２の文章 </div><div style="display:none" id="NAME33"> ここにタブ３の文章 </div>
- ベストアンサー
- JavaScript
- JavaからJavascriptの呼び出し
教えてください。 ある決まったフォーマットのHTMLファイルがあり、その中のいくつかの要素をJavascriptで取得するということをしています。 HTMLファイルはサーバ上にあるため、ブラウザでアクセス→Javascriptで取得ということをしていたのですが、ブラウザで開くと言う処理が手間になってきたのでＨＴＭＬファイルから直接取得できないかと考えました。 まずはＪａｖａでＤＯＭを使ってＨＴＭＬを解析しようとしたところ、ＨＴＭＬの形式が正しくない（ＸＨＴＭＬになっていない？）ため、エラーが発生してしまいました。ＨＴＭＬの形式は修正不可のため、私が調べた限りでは現状のまま進めるとなると、1つずつタグを解析するしか方法がないように思えました。 例えば、<td id="hoge">hoge</td>の中身を取得しようとした場合、javascriptならgetElementByIdですぐに取得できますが、javaだと文字列として”<td id="hoge">”を検索するといった動作が必要かと思われます。 そこで、すでにあるjavascriptをjava上から呼び出し、同じ結果を取得できないかと考えました。 まず、この方法は可能でしょうか？可能だとすると参考になるようなサイトを教えていただけると助かります。 また、上記以外にもっとスマートなやりかたがある場合は、教えていただけないでしょうか。 説明が下手で申し訳ありませんが、よろしくお願いします。
- ベストアンサー
- Java
- javascriptとDOM
javascriptを勉強中なのですが、 javascript形式とDOM形式の両方で、タグの操作が出来ると事を知りました。 例)threeは、imgのid名です。 javascript： 書き方：document.three.src="画像ファイル"; DOM ： 書き方： document.getElementById('three').src="画像ファイル"; 質問1：一般的には、javascriptでタグを操作したりするとは、「DOM」「javascript」どちらの形式で javascriptを記述することが多いのでしょうか？ 質問2：現在、DOMのほうが扱いやすいのかなと思ってはいるのですが、DOMの参考書を購入しようと考えた際、どのような参考書を買えばいいでしょうか。javascriptで使用することを考えています。 どなたかご教授いただけましたら幸いです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- paramタグのvalue値を取得する方法
はじめまして。JavaAppletにかんするHTMLで <applet name="myApplet"> <param name="myParam" value="ABCDE" /> </applet> としたとき、Javascriptによって、このparamタグの値「ABCDE」だけを文字列として取得するには、どのように記述すればよいのでしょうか。（特にIE 7やFireFox 3で動作するように） フォームの扱いと同様に、 text = document.myApplet.myParam.value; のように書いてみましたがうまくいきません。ご存じの方がいらっしゃれば、教えてください。 条件としては、paramタグにid属性を加えたり、JavaAppletそのもののソースコードを書き換えたりする必要がない方法でお願いします。(appletタグにid属性をつけるのはOK)
- ベストアンサー
- JavaScript
- HTMLのinputタグ数が変わる場合のjavascript処理
パターンＡ ～HTML～ <input type='text' name='a[]'> <input type='text' name='a[]'> ～JavaScript～ var n = document.form1.elements["a"][0].value ; var n = document.form1.elements["a"][1].value ; パターンＢ ～HTML～ <input type='text' name='a[]'> ～JavaScript～ var n = document.form1.elements["a"][0].value ; ---(1) パターンＡではエラーが出ないのですが、パターンＢでは(1)のところでエラーになってしまいます。 【elements["a"][0]】の部分を【elements["a"]】とすればエラーは出ません。 どうやら、inputタグが1つしかない場合は、Javascriptでは配列として認識しないようです。 できれば、inputタグが1つの場合でも複数の場合でも、同じJavascriptコードを使いたいのですが、何か良い方法はありますか？
- ベストアンサー
- JavaScript
- javascript aタグ内の記述について
javascriptのaタグ内の記述について質問です。 まず、gallery.htmlというページ内で、下記のような記述をして表示の切り替えを実装しています。 ■HTML内 <a href="javascript:SwitchTopic(01);">画像一覧</a> ■js内 function SwitchTopic(num) { var num; if(num == 01){ document.getElementById("topic01").style.display = 'block'; //これだけ表示 document.getElementById("topic02").style.display = 'none'; } } これを、他のページからgallery.htmlへリンクを飛ばしたときに SwitchTopicで表示を切り替えた部分に飛ばしたいのですが <a href="../../gallery.html"> ↑このaタグ内で一緒に javascript:SwitchTopic(01)の実装ができるものでしょうか？ gallery.htmlに飛ばすことはできても、切り替えた部分に飛ばすことができず行き詰っております… あまりjavascriptの知識がないため、記述の仕方をご教授いただければ助かります。 よろしくお願いいたします。
- 締切済み
- JavaScript
- HTMLからXHTMLへ変更する際のhtmlファイルの内容の変更について
HTML4.01では<div style="color:#ffffff">と</div>の間の文字色をjavascriptの中の関数で変える時、 <script type="text/javascript"> function func() { document.getElementById("xx")="#ff0000"; } </script> と記述しますが、XHTMLではstyle属性が非推奨となっています。 XHTMLでstyle属性を使わずにボタンを押すことで<div style="color:#ffffff">と</div>の間の文字色を変えるには javascriptの中の関数内でどのように記述すればよいのでしょうか。
- 締切済み
- HTML
