- 締切済み
HTML文書のタグの属性をjavascriptで抜き出す。
はじめまして。 現在javascriptでHTML文書にある要素の属性名を抜き出すロジックを 考えているのですが、詰まっています。 例えば ＜form name="A" action="B"＞ という要素があった場合にその属性名「name」「action」を抜き出したいのです。 ＨＴＭＬ文書にある要素名を抜き出すロジックは何とか出来ました。 以下がその関数です。 -------ここから------- function test() { kazu=document.all.length //文書の要素数を設定 var tagname='' for(i=0; i<kazu; i++){ tagname=tagname+document.all(i).nodeName+'\n' //要素名を抜き出す。 } document.send.aa.value=tagname //フォーム部品に結果をセットする。 } ------ここまで----------- 要素名を抜き出している部分は document.all(i).nodeName とかけましたが 属性名を抜き出すのは document.all(i).attributes… のように書くんだろうな… と予測して実行したのですがエラーがでました。 DOM文書を読んでみたのですがいまいちピンときません。 どなたが教えていただけませんか？ 使用しているブラウザはWindowsのIE5.5です。
- yukiy
- お礼率50% (1/2)
- JavaScript
- 回答数1
- ありがとう数4
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- j_b_h
- ベストアンサー率100% (2/2)
以前、仕事で使用したコードですが、 このようなものでよろしければ。。。 <HTML> <BODY> <script language=javascript> function chk(n,str) { document.write(str,"の情報..."); cnt = 0; for (i in n) { document.write("<BR>[",cnt,"] ",i.bold(),"=<FONT color='red'>",n[i],"</FONT>"); cnt++; } } chk(window); </script> </BODY> </HTML> こうすると、windowオブジェクトの属性が見られます。 windowの部分をいろいろ変更して試してみてください。
関連するQ&A
- HTMLとJavascriptの汎用的な書き方について
HTMLのタグにid="namae"とすれば、Javascriptでdocument.getElementByIdを使って平面状に（すべてdocumentの下？）でアクセスできるので、 getElementByIdは便利かなと思っているのですが、 タグで name属性を使ってアクセスする場合と、 id属性でgetElementByIdでアクセスする場合の どちらが今後一般的になるのでしょうか？ nameは昔から？あったようなので、切り捨てるのも 気になりますが、記述の面で両方書くと手間なので、 id属性で一本化しても問題ないでしょうか？
- ベストアンサー
- 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でbottonクリックできない
javascriptでＷＥＢの自動操作をしたいのですが、button要素のクリックが一か所だけできないんです。（他は何か所か成功してます） button要素の位置は下記ソースで間違いないはずなんですが、ID / name もないのに加えて、classNameの属性が入ってるせいなのか、成功しません。 objIE.document.getElementById('??????').click(); ？？に何を入れていいのががわかりません・・ 違う方法になるのでしょうか。不躾で恐縮なのですが、お分かりの方ご教授ください。 要素内容です。---------------------------- div class= panel-footer text-right tagName = BUTTON className = btn pri_sub nodeName = BUTTON id = なし name = なし outerHTML = <button class="btn pri_sub" style="border-image: none;" type="button" data-toggle="modal" data-target="#modal_dialog" data-message="更新OK?" data-action="Update" data-title="更新確認">更新</button>
- ベストアンサー
- JavaScript
- HTMLの属性を自由に作ることはいいのか？
(X)HTMLの規則にそって書け、とよく言われますが、果たして100%従うことだけが善なのでしょうか？ CSSが普及してから、完全に文書とデザインを分けて考えるようになり、進化系として、完全なXML(XHTML)的文書にして、検索エンジンなどにもわかりやすい文書構造に、ということで盲信しているイメージがあります。もしXMLであるならば、より効果的な属性の設定などもあっていいんじゃないかと思うのです。 たとえば、ページングのリンクなどで 1 2 3 4 5 とページへのリンクアンカーがあるとして、通常は <a href="?page=1">1</a> <a href="?page=2">2</a> のような形になるでしょうが、XML(DOM)としては <a href="?page=1" page="1">1</a> <a href="?page=2" page="2">2</a> というような 独自に page という属性にそのページナンバーを入れた方が取得しやすいと思うのですが、こういうのでもルール外だから悪、と言われてしまうのでしょうか？ その文書をparseしても、そのページナンバーを取得するのにもうひと工夫が必要になってしまいます(hrefを正規表現するなどして)。それなら属性に書いた方が絶対楽だし、その値の意味を属性名としてわかりやすく定義できると思うのですが、どうなんでしょうか？ 気になる点としては、今後新しく予約語としてその属性名が定義される可能性があり、その値の意味が異なり、ブラウザの挙動もおかしくなる可能性は理解できます。でも、それはプログラミングしてる人なら、バージョンアップでよく出てくることですし、とりわけHTMLだけやめておけ、というのもおかしいと思いますし。絶対かぶらないように、属性名を作ればいいだけですけどね。servicename_page="2" みたいな(笑)。
- 締切済み
- HTML
- XML の属性部分を JavaScript で表示したい (誤動作してます)
初心者です。XML の属性を JS で表示したいのですが属性の表示をJSで記入すると属性部分(?)が「null」と表示されるだけで元の XML の内容が正しく反映されません。何が間違っているのかご教示いただけると有り難いです。宜しくお願いします。 ---XML-[orders.xml]------------------ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE orders SYSTEM "orders.dtd"> <orders> <order> <customerid limit="1000">1111111</customerid> <status>発送済み</status> <item instock="Y" itemid="SA15"> <name>商品名ABC</name> <price>825.00</price> <qty>1</qty> </item> </order> </orders> ---/XML------------------- ---DTD--[orders.dtd]----------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE orders SYSTEM "orders.dtd"> <orders> <order> <customerid limit="1000">1111111</customerid> <status>発送済み</status> <item instock="Y" itemid="SA15"> <name>商品名ABC</name> <price>825.00</price> <qty>1</qty> </item> </order> </orders> ---/DTD------------------- ---html--[hoge.html]----------------- <?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>A Parser Test</title> <script type="text/javascript"> var tab=" " function printElement(indent, node) { var i; if (node.nodeType == 3) {document.write("<br />" +indent + node.nodeValue); document.write("<br />" +indent + "attributes: "+ node.attributes);} <!--この1行を足しました。誤動作しています(TT)--> else { document.write("<br />" +indent + "[" + node.Name + "]"); for (i = 0; i < node.childNodes.length; i++) { printElement(indent+tab, node.childNodes[i]); } document.write("<br />" +indent + "[/" + node.nodeName + "]"); } } var xmlDoc = new ActiveXObject("Microsoft.XMLDOM") xmlDoc.async="false" xmlDoc.load("orders.xml") if (xmlDoc.parseError.errorCode != 0) { document.write("<br />Error Code: "); document.write(xmlDoc.parseError.errorCode); document.write("<br />Error Reason: "); document.write(xmlDoc.parseError.reason); document.write("<br />Error Line: "); document.write(xmlDoc.parseError.line); document.write("<br />"); } else { document.write("<strong>ファイルはパーサーを通りました</strong><br />"); document.write("<p /><h1>ツリー構造の表示</h1><p />") printElement("", xmlDoc.documentElement); } </script> </head> <body> </body> </html> ---/html-------------------
- 締切済み
- XML
- METAタグのNAME、CONTENT属性のさまざまな値について
HTMLで難解なMETAタグですが、NAME、CONTENT属性にさまざな値を下記のように代入できるようなんですが、その有用性がわかりません。 例）1.作者名を宣言 META NAME="author" CONTENT="作者名や会社名など" 2.タイトルを宣言 META NAME="title" CONTENT="タイトル名" 3.HTML文書を作成したソフト名の宣言 META NAME="GENERATOR" CONTENT="ソフト名" 4.問い合わせ先のメールアドレス META NAME="REPLY-TO" CONTENT="メールアドレス" 5.ドキュメントの制作日や、制作時間を宣言 META NAME="BUILD" CONTENT="02.4.1(作成年月日)" などです。 1.と4.などは、本文中にブラウザ上で表示しますし、2.はTITLEタグで通常指定しています。 1.～5.全てに言えることですが、特に記述する必要を感じませんし、仮に記述したとして、何かメリットがあるのでしょうか？ ご存知の方がおられましたら、ぜひ教えてください<m(__)m>
- 締切済み
- HTML
- JavaScriptで変更した属性の元の値の取得
いつもお世話になっております。 ページの画像をとある条件で変更しようとしております。 HTML5のdata-を利用して変更後の画像のパスをimg要素内に持たせております。 JavaScriptでimg要素を取得し画像の変更は実現できております。 その後もとの画像に戻したいのですが、JavaScriptでimg要素を取得してもsrc属性が変更後の値になっており変更前の値が取得できません。 変更前の値の取得方法を教えてください。 ■HTMLソースの一部 <p><img src="img/moto.gif" alt="" data-mimage="img/ato.gif"></p> ■JavaScriptの一部 function wid(){ var image=document.getElementsByTagName('img'); if(window.innerWidth>=320){ for(var i=0;i<image.length;i++){ image.item(i).src=image.item(i).getAttribute("data-mimage"); } }else{ // ここに元の画像に戻すためのスクリプトを書きたい } } } wid関数を作ってそのなかでimg要素を取得し、条件を満たしたらすべてのimg要素のdata-mimageの属性値を元のsrc属性に上書きします。 次に条件が満たされていない場合はHTMLにもともと書いてあったsrc属性の属性値をsrc属性値に戻したいのですがこの値が取得できません。 img/moto.gifをimg/ato.gifに変更することは出来ます。 img/ato.gifに変更した後img/moto.gifに戻すことが出来ません。 もちろんdata-mimage2="img/moto.gif"を追加すれば可能なのは分かっていますが、現状のHTMLを変更することなく実現したいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- 【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での使用です。 以上、よろしくお願いします。
- ベストアンサー
- JavaScript
- 要素のid属性の名前について
要素のid属性の名前について質問があるのですが、 ■質問1 ID名を付けるとき、同一文書内に同じID名を複数使用してはいけない、というのはこれは同じ要素に対して同じID名を複数付けてはいけないということでしょうか？それとも要素は関係なく、ID名そのものが複数存在してはいけないということでしょうか？ 例1：要素、ID名ともに同じ場合× <p id="name"></p> <p id="name"></p> 例2：要素が違って、ID名が同じ場合？ <p id="name"></p> <div id="name"></div> 例3：要素が違い、ID名も違うので○ <p id="name1"></p> <div id="name2"></div> ■質問2 ID名は、同一文書内に同じID名を複数使用してはいけないと言われていますが、実際には使用できてしまうそうですが、やはり本来の使用方法にのっとって同一ID名を複数使用しない方がよいのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- 別フレームのタグ属性を取得する方法
いつもお世話になります。 左右に分割した左フレームから、右フレームのタグ属性を取得することはできないでしょうか。 過去ログ http://oshiete1.goo.ne.jp/kotaeru.php3?q=371451 を見て、 flm.htmlで、 <frame name="left" src="tst_fll.html" scrolling="auto" target="top"> <frame name="main" src="tst_flr.html" scrolling="auto" target="_self"> 左側フレームtst_fll.htmlで、 <script type='text/javascript'><!-- document.write("右側フレームの<br>タグ属性を取得<br>") alert("1 aaaaaこれは表示される"); var obj = window.main.document.getElementsByTagName("*"); alert("2 bbbbbこれは表示されない"); var len = obj.length; for (var i=0;i<len;i++){ var tagName = obj[i].tagName var hrefName = obj[i].id; var ttl = obj[i].title; document.write(ttl); } //--> </script> としてみたのですが、 alert("1 aaaaaこれは表示される"); までは、スクリプトが実行されるのですが、 alert("2 bbbbbこれは表示されない"); は、表示されず、この前でスクリプトが停止されてしまいます。 また、右側フレームtst_flr.htmlの内容は、以下のようなものです。 <h4 id="00" title="０章<br>">第０章</h4> <h4 id="01_fold" title="１章">第１章</h4> <h5 id="01_01" title="1-1">１－１</h5> <h5 id="01_02_fold" title="1-2">１－２</h5> <h6 id="01_02_01" title="1-2-1">１－２－１</h6> <h6 id="01_02_02" title="1-2-2">１－２－２</h6> <h5 id="01_03" title="1-3<br>">１－３</h5> よろしくお願いいたします。
- ベストアンサー
- JavaScript
