• ベストアンサー

【DOM】HTMLのタグに対してはElementインターフェースが使えない?

HTMLの「document」はXMLDocumentと完全に見立ててDOMを利用できないのでしょうか? <html>   <style>     .foo{       background: #999999;     }   </style>   <body>     <input class="foo" type="text" value="NNNN"/>   </body>   <script language=JavaScript type=text/javascript>   function hoge(){     var Nodes;     Nodes = document.getElementsByTagName("input");     alert(Nodes.item(0).nodeName)     alert(Nodes.item(0).getAttributeNode("class"))     alert(Nodes.item(0).hasAttributeNode("class"))   }   hoge();   </script> </html> 上記のようなコードを書いてもアラートに「foo」と表示されません。 また、hasAttributeNodeにおいては全く反応がありません。 DOMのElementインターフェースが使えないとすれば、 JavascriptからclassやonClickのイベントハンドラなど、 属性を動的に変更するにはどうすればいいでしょうか? 制限事項としてid属性やname属性は使用できません。 IE6での使用です。 以上、よろしくお願いします。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

alert(Nodes.item(0).getAttribute("class")); でアクセスできますね。 変更は Nodes.item(0).setAttribute("class","bar"); javascriptの場合ダイレクトに Nodes.item(0).className="bar"; とすることも多いです。以下サンプル <html> <style> .foo{ background-Color:#999999; } .bar{ background-Color: #ff0000; } </style> <body> <input class="foo" type="text" value="NNNN" onClick="alert(1)"/> </body> <script language=JavaScript type=text/javascript> function hoge(){ var Nodes; Nodes = document.getElementsByTagName("input"); alert(Nodes.item(0).nodeName) alert(Nodes.item(0).getAttributeNode("class")); alert(Nodes.item(0).getAttribute("class")); Nodes.item(0).setAttribute("class","bar"); Nodes.item(0).setAttribute("onclick","alert(2)"); } function hoge2(){ var Nodes; Nodes = document.getElementsByTagName("input"); Nodes.item(0).className="bar"; Nodes.item(0).onclick=function(){alert(2)}; } hoge(); //hoge2(); </script> </html>

OKbokuzyo
質問者

お礼

回答ありがとうございます。 すみません、質問本文のコードが間違ってますね。 getAttribute(string)で属性値。 getAttributeNode(string)では属性ノードが返ってしまいますね。 ですので、alert(Nodes.item(0).getAttributeNode("class").nodeValue)とすると、 正しくfooと返ってきました。 やはり私の環境ではhasAttribute、getAttribute、setAttributeが使えないようです。(アラートのダイアログが出ず、JavaScriptの実行が中断される) getAttributeNode、setAttributeNodeは使えるので代替は可能ですが‥。 また、 >>javascriptの場合ダイレクトに >>Nodes.item(0).className="bar"; こちらの旧来(?)のやり方も有効でした。同じように、 Nodes.item(0).onblur="hoge"; というのもできたのですが、タグの中にonblurイベントハンドラが直接セットされているときは オンロード時にJavaScriptで書き換えても意味無いようですね。 ありがとうございました。

その他の回答 (3)

回答No.4

イベントを動的に変えたいのでしたら、prototype.jsというライブラリを使うと手軽ですよ。 また、これを使うとElementを拡張してsetAttributeとかも使えるようになったと思います。

参考URL:
http://www.prototypejs.org/
OKbokuzyo
質問者

お礼

回答ありがとうございます。 こんなものまであるんですね。 全然知りませんでした。 コードを開いて少し眺めてみましたが、 extendsとか使われていますね。 JavaScriptには継承といった機能はないと思っていたのですが‥。 ライブラリということなので 中のコードまで理解する必要はないかもしれませんが、 まだまだ勉強しなければならないことなども見えてきて 非常に参考になりました。 ありがとうございました。

noname#39970
noname#39970
回答No.2

ごめん Nodes だね node って書いちゃったよ

noname#39970
noname#39970
回答No.1

>Nodes.item(0).getAttributeNode("class") これ 効く? node[0].attribute["class"].nodeValue

OKbokuzyo
質問者

お礼

回答ありがとうございます。 すみません、質問本文のコードが間違ってますね。 getAttribute(string)で属性値。 getAttributeNode(string)では属性ノードが返ってしまいますね。 質問文のalert(Nodes.item(0).getAttributeNode("class"))では 画面上に[object]と返ってきていたので納得できました。 ですので、alert(Nodes.item(0).getAttributeNode("class").nodeValue)とすると、 正しくfooと返ってきました。 ちなみにalert(Nodes[0].getAttribute("class"))はなぜかnull。 回答に頂いたNodes[0].attribute("class").nodeValueはエラーでした。 (attributeというメソッドはありませんでした。 またgetAttributeの返り値はstringなのでやはりエラーです) ありがとうございました。

関連するQ&A

  • イベントハンドラに処理を追加するには?

    例えばbodyタグのonloadイベントハンドラに JavaScriptを使って処理を追加するにはどうすればよいのでしょうか? 例) ・rei.htm <html>  <script language="JavaScript" type="text/javascript">  function hoge(){   alert("hogeです");  }  function foo(){   alert("fooです");  }  </script>  <body onload="hoge();">  </body>  <script language="JavaScript" type="text/javascript">  document.body.onload += foo();  </script> <html> ※前提条件として、変更可能な箇所はscriptタグ内のみとなります。 「こんなんでいけないかな?」と思って上記のようにやってみたのですがうまくいきませんでした。 (結果はfoo()のみ実行され、hoge()は実行されませんでした。 alertでbody.onloadの中身を確認すると『function anonymous{hoge();}undefined』と表示されるので、なぜfoo()が実行されてhoge()が実行されないのかよくわかりませんが‥) また試しに document.body.onload += foo(); これを以下のように変更してみました。 document.body.onload = foo(); この時は、 ・foo()の実行  ↓ ・javascriptエラー  ↓ ・hoge()の実行 となりました。(これもなぜこうなるのかよくわかりせん) 以上、イベントハンドラに最初から任意に入れられている処理を残しつつ、 さらに処理を加えるにはどうすればよいのかご教示お願いします。

  • Javascriptでフィールドを埋める方法

    Javascript初心者です。 HTML <input type="text" id="hoge" value="piyo"> <input type="checkbox" onclick="AutoFill();" > <input type="text" id="foo" value=""> Javascriptでcheckboxをクリックすると、fooというidを持つテキストフィールドの値をhogeというidを持つテキストフィールドと同じ値で埋めたいと思います。 bodyの終りに <script> AutoFill(){ document.elementGetById(foo).value=document.elementGetById(hoge).value; } </script> checkboxをクリックしても何も起こらない。どうすればいいんですか。 ご回答をよろしくお願いいたします。

  • DOMで生成したタグにCSSが適用されない(IE)

    DOMでタグを生成した場合、IEではそのタグにCSSが適用されないのですが 何かいい解決法はないでしょうか。ちなみに試したHTMLは下記の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>test</title> </head> <body> <script type="text/javascript"><!-- A = document.createElement("div"); A.setAttribute("id", "A"); A.setAttribute("style", "color:red;"); document.body.appendChild(A); document.getElementById("A").appendChild(document.createTextNode("test")); --></script> </body> </html>

  • IEでDOMインターフェースを拡張したい

    IEでDOMインターフェースを拡張したい NodeList.prototype.hoge=function(){…} のように、メソッドやプロパティを拡張しようとしたところ、IEでつまづいてしまいました…。 上記のようなコードの場合、「NodeListは宣言されていない…」のようなエラーが表示されます。また、 var NodeList としてみたところ、今度は「'prototype'はNullまたはオブジェクトではありません」と表示されました。 そこで、各DOMインターフェースを alert(Document); alert(Element); … のようにして調べてみたところ、どれも[object]が返ってきました。(もちろんjavascriptコアインターフェースでは期待通りの値が返ってきました。) それで結局のところ、IEでDOMインターフェースを拡張するにはどうすればいいのでしょうか?よろしくお願いします。

  • DOMは、javascriptではないのでしょうか

    ある要素にアクセスする場合、 例えば、 document.form1.hoge;てしたり、 document.getElementsByName('hoge');てしたり、 jQueryを使ったりする方法があるかと思うのですが、 このgetElementsByName()メソッドは、 javascriptではないのでしょうか? 調べると、 DOMのAPIとかって、書いてあるのですが、 XMLとか、JSONみたいな、単なる仕様なのでしょうか? そうすると、PHPとかでも、getElementsByNameは使えるのでしょうか? あるいは、javascriptに特化したメソッドなのでしょうか? javascriptを書くとき、 書き方が色々あるので、 どれを選択すればよいかいつも迷うのですが、 DOMを使ってできる処理は、 一般的には、DOMで書くのでしょうか? DOMのデメリットとしては、 古いブラウザが対応してない、ぐらいしか思い浮かばないのですが、 DOMとjavascriptは対等な関係で、 使わなくてもいいけど、 使ったほうが便利、みたいな認識でいいのでしょうか? DOMでしかできない処理みたいなのはあるのでしょうか?

  • bodyタグの範囲について

    bodyタグの範囲について 質問させてください。 HTMLとJavaScirptで下記のようなソースを書きました。 ~ここから~ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <script language="JavaScript"> function foo(){ <!-- alert("ほげ"); // --> } </script> </head> <body onClick="foo()"> <input type="text"> </body> </html> ~ここまで~ この場合、ウィンドウの中で<BODY>タグが担当する範囲は以下のどちらでしょうか? 1. テキストボックスのみ(余白を含まない) 2. 余白を含んだウィンドウ全体 私としては、関数foo()が実行されるのはテキストボックス内をクリックした場合だけなので、1.だと思います。 しかし、<body>タグの属性のbgcolorをつけると、余白全てが着色されるので、2.なのかもしれないと思い混乱しています。 どなたかお知恵をお貸しください。

    • ベストアンサー
    • HTML
  • INPUTタグ以外からイベントハンドラを起動する方法

    はじめまして。 いろいろ調べたのですが、的確な答えが見つかりませんでしたので、ご教授お願いいたします。 訳あってonchangeイベントをタグの外から起動したいのですが、関数に括弧を付けると「実装されていません」というエラーが出てしまいます。 括弧を付けていない関数はうまく起動します。 どうしても関数に引数を渡してあげたいのですが、どのようにすればよいのでしょうか? 動作環境は IE5.5 windows2000 ASPにてJavaScriptを作成しています。 以下ソースを簡略化して記述しました。 よろしくお願いいたします。 <html> <head> <script TYPE="text/javascript"> <!-- function f_AAA(){ alert("AAA"); } function f_BBB(a_value){ alert(a_value); } --> </script> </head> <body> <form> <input type="text" name="text1" value="1"> <input type="text" name="text2" value="2"> <script TYPE="text/javascript"> <!-- // ↓括弧の付いていない関数は起動します。 document.forms[0].text1.onchange = f_AAA; // ↓括弧の付いている関数は起動しません。 document.forms[0].text2.onchange = f_BBB("OK"); --> </script> </body> </form> </html>

  • javascript DOM

    javascript DOMについて DOMはドキュメントオブジェクトモデルの略だと思いますが、DOMそのものというのはブラウザ画面に映っているオブジェクトそのものという解釈で良いのでしょうか? というのもjavascriptには「document.write()」というメソッドがあると思いますがdocumentはブラウザ画面そのものを指していて、writeは書く。直訳するとブラウザ画面に書くになると思いますが DOMもdocumentはブラウザ画面、オブジェクトはブラウザに移っているオブジェクト(<input type="button">など)、モデルは良くわからないのですが HTMLの画面に映っているタグ自体はDOMと呼ぶのでしょうか?

  • JavascriptでHTMLを書き換えたいのです

    うまく動作しないJavascriptなのですが、こういった方法は可能なのでしょうか? お分かりになりましたらご教授お願いします。 -------------------- ■html <div class="orenge1"></div> オレンジ1です<br> <div class="orenge2"></div> オレンジ2です<br> <div class="orenge3"></div> オレンジ3です<br> -------------------- ■Javascript 記述は最下部の</body>直前です。 <script type="text/javascript"> window.onload = function() { document.getElementsByClassName("orange1").innerHTML = ('<a href="./item/?item=orange1">商品はコチラ</a>'); document.getElementsByClassName("orange2").innerHTML = ('<a href="./item/?item=orange2">商品はコチラ</a>'); document.getElementsByClassName("orange3").innerHTML = ('<a href="./item/?item=orange3">商品はコチラ</a>'); } </script> -------------------- ■やりたい事 <div class="orenge1"></div> の部分に <a href="./item/?item=orange1">商品はコチラ</a> を表示したいと思っています。 同一ページに複数回表れる場合もあります。 よろしくお願い致します。

  • DOMで作ったラジオボタンが選択できない

    JavaScript DOM で作成したラジオボタンが選択できません。 Sleipnirの「選択部分のソースを表示」で確認したところ、 name属性だけがセットされていないようで、選択できない原因はそれだと思いますが、 セットできない理由が分かりません。 どなたか解決策を教えて頂けないでしょうか。 なお、下記の何れの方法でもダメなようです。 obj.name = "hogehoge" obj.setAttribute("name", "hogehoge"); 念のため、現象確認用のソースも貼っておきます。 <html> <head> <script type="text/javascript"> function create1() { var rObj = document.createElement("input"); rObj.type = "radio"; rObj.name = "rd"; rObj.value = 5; var divObj = document.getElementById("box"); divObj.appendChild(rObj); } function create2() { var rObj = document.createElement("input"); rObj.setAttribute("type", "radio"); rObj.setAttribute("name", "rd"); rObj.setAttribute("value", "3"); var divObj = document.getElementById("box"); divObj.appendChild(rObj); } </script> </head> <body> <input type="button" value="create1" onClick="create1()"> <input type="button" value="create2" onClick="create2()"> <div id="box"></div> </body> </html>