- ベストアンサー
jsでELEMENT_NODEを見つける方法
- jsのコードで次のELEMENT_NODEを見つける方法について教えてください。
- 質問文章に示されたコードでは、nextSiblingを使用して次のテキストノードを取得してしまうため、うまく動作しません。
- jQueryのsiblings()メソッドのように、jsで指定要素の次の兄弟要素を取得する方法についてもご教授ください。
- d-k-d-k
- お礼率100% (5/5)
- JavaScript
- 回答数5
- ありがとう数7
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
#4 です。 お礼のコードを拝見しました。残念ながらあまり上手くありません…。 <p id="Sample">Sample</p> <!-- Hello --> <p id="Next">nextElementSibling</p> <script type="text/javascript"> function nextElmNode(node){ var node = document.getElementById(node); var next = node.nextSibling; if(next && next.nodeType == 1){ return next; }else{ while(next && next.nodeType != 1){ return next.nextSibling; } } } var targetNode = nextElmNode('Sample'); alert([targetNode.nodeName, targetNode.nodeValue].join(', ')); // #comment, Hello </script> #4 の function nextElementSibling で期待通りに動作すると思いますが、どうでしょうか？ (全角空白は半角空白に置換してください。そうしないと IE では動きません。IE は全角空白を WhiteSpace と見なさないからです。) --- ElementTraversal#nextElementSibling を実装するJavaScriptライブラリを書いてみました。(IE8 で確認) 多分動かないと思いますが自信はないので一応 IE6, IE7 でも試してみてください…。 https://gist.github.com/734657 <p id="Sample">Sample</p> <!-- Hello --> <p id="Next">nextElementSibling</p> <script type="text/javascript" src="../javascript/ElementTraversal.js"></script> <script type="text/javascript"> alert(document.getElementById('Sample').nextElementSibling.id); // Next </script> Object.defineProperty が IE8 からサポートと予測。(MSDN にそれっぽいことが書いてありますが、英語苦手なので確証は得られず) http://msdn.microsoft.com/en-us/library/dd548687%28v=VS.85%29.aspx
その他の回答 (4)
- think49
- ベストアンサー率59% (285/482)
横からですが…。 #1 さんの方法だと引数 node が ELEMENT_NODE の場合に引数自身を返してしまうはずなのですが、それで上手くいったのでしょうか？ 以下、サンプルコードです。 <p id="Sample">Sample</p> <p id="Next">Next</p> <script type="text/javascript"> var Node = 'undefined' !== typeof Node ? Node : { ELEMENT_NODE: 1, ATTRIBUTE_NODE: 2, TEXT_NODE: 3, CDATA_SECTION_NODE: 4, ENTITY_REFERENCE_NODE: 5, ENTITY_NODE: 6, PROCESSING_INSTRUCTION_NODE: 7, COMMENT_NODE: 8, DOCUMENT_NODE: 9, DOCUMENT_TYPE_NODE: 10, DOCUMENT_FRAGMENT_NODE: 11, NOTATION_NODE: 12 }; function nextElementSibling (element) { var nextSibling; if (element.nextElementSibling) { return element.nextElementSibling; } while (nextSibling = element.nextSibling) { if (nextSibling.nodeType === Node.ELEMENT_NODE) { break; } } return nextSibling; } function nextNode (node) { while (node && node.nodeType != 1) node = node.nextSibling; return node; } console.log(nextNode(document.getElementById('Sample'))); // #Sample を返す console.log(nextElementSibling(document.getElementById('Sample'))); // #Next を返す </script> http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view2&f=2646&no=14-
お礼
ご指摘有難う御座います！ 仰るとおりうまくいきませんでした。 IE9ベータとFirefoxのみ確認していましたが、 IE6だと駄目でした。 サンプルコードは今直ぐには理解できなく、申し訳ありませんが参考にさせて頂きます。 どうも有難う御座いました。 僕の現状のソースコードを一応乗せて起きます。 これで一応うまくいったような気がするのですが。。。 <script type="text/javascript"> function nextElmNode(node){ var node = document.getElementById(node); var next = node.nextSibling; if(next && next.nodeType == 1){ return next; }else{ while(next && next.nodeType != 1){ return next.nextSibling; } } } window.onload = function(){ var elm = nextElmNode('test1'); // fugaが表示されれば成功かな？ alert(elm.firstChild.nodeValue); } </script> <div id="test1">hoge</div> <div>fuga</div>
- yyr446
- ベストアンサー率65% (870/1330)
No.2補足 nextElementSibling使えないのはもはやIE8以下だけみたいです。 http://www.quirksmode.org/dom/w3c_traversal.html ※IE9は使えそうです（ベータ情報ですが） http://msdn.microsoft.com/en-us/library/ff975836%28VS.85%29.aspx
お礼
IE8以下が使えませんか・・・。 このリアクションで想像できてしまうかもしれませんが、 IE6対応させなきゃなんです。。。 自分の時間を割いて、色々お調べくださって本当に感謝致します。 これからもよろしくお願い申し上げます。
- yyr446
- ベストアンサー率65% (870/1330)
Firefox3.5で、 Element.nextElementSiblingと、Element.previousElementSibling が実装されています。 https://developer.mozilla.org/En/DOM/Element.nextElementSibling これを使えば一発かな。 console.log(obj.nextElementSibling);
お礼
おおお！一発でしたｗ
- fujillin
- ベストアンサー率61% (1594/2576)
実質的に次の要素を取得したいということですよね？ typeof node や node.nodeType を利用すればよいのではないでしょうか。 var obj = document.getElementById('test1'); var nobj = obj.nextSibling; while (nobj && nobj.nodeType != 1) nobj = nobj.nextSibling; あるいは、関数で function nextNode(node) { while (node && node.nodeType != 1) node = node.nextSibling; return node; } みたいにしておいて、必要に応じて呼び出すとか。
お礼
有難う御座います！！！ 仰るとおりにやってみたらできました。 whileやforを使ってやるんだろうなぁ～っと思ってはいたのですが、力不足でまったく実現できませんでした。 これを機会に勉強に励みます。 本当に有難う御座いました。
お礼
#4のサンプルコードで完璧にできました。 お忙しい中お時間を頂きまことに有難う御座いました。