jsで次のELEMENT_NODEを見つけたい

解決済

質問者：d-k-d-k
質問日時：2010/12/08 11:51
回答数：5件

しごく単純な質問かもしれませんが、検索エンジン等で捜しても見つからなかったのでご教授頂けないでしょうか？（検索の仕方が悪いかもしれません。。。）
たとえば以下の簡単なjavascriptがあるとします。

<body>
<div id="test1">hogehogehoge</div>
<div>fugafugafuga</div>
<script type="text/javascript">
var obj = document.getElementById('test1');
console.log(obj.nextSibling);
</script>
</body>

この場合、nextSiblingで取得した値は次のテキストノードになってしまいます。
決めうちであれば以下のようにやってみたらうまくいきましたが、
なんだかなぁ～って感じです。

<script type="text/javascript">
var obj = document.getElementById('test1');
console.log(obj.nextSibling.nextSibling);
</script>

jQueryで言うところのsiblings()のような使い方、またはソースをご教授いただけないでしょうか？（できれば説明文も添えて頂ければ助かります）
一応jQueryのソースを読もうとしましたが、まことに恥ずかしいのですが力不足でまるで読むことができませんでした。
以上よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： think49
回答日時：2010/12/09 23:39

#4 です。

お礼のコードを拝見しました。残念ながらあまり上手くありません…。

<p id="Sample">Sample</p>

<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>

<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 …

- 0
- 件

通報する

この回答へのお礼

#4のサンプルコードで完璧にできました。
お忙しい中お時間を頂きまことに有難う御座いました。

通報する

お礼日時：2010/12/11 15:34

No.4

回答者： think49
回答日時：2010/12/09 17:05

横からですが…。

#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? …

- 0
- 件

通報する

この回答へのお礼

ご指摘有難う御座います！

仰るとおりうまくいきませんでした。
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>

通報する

お礼日時：2010/12/09 20:03

No.3

回答者： yyr446
回答日時：2010/12/08 14:43

No.2補足

nextElementSibling使えないのはもはやIE8以下だけみたいです。

http://www.quirksmode.org/dom/w3c_traversal.html

※IE9は使えそうです（ベータ情報ですが）
http://msdn.microsoft.com/en-us/library/ff975836 …

- 0
- 件

通報する

この回答へのお礼

IE8以下が使えませんか・・・。

このリアクションで想像できてしまうかもしれませんが、
IE6対応させなきゃなんです。。。

自分の時間を割いて、色々お調べくださって本当に感謝致します。
これからもよろしくお願い申し上げます。

通報する

お礼日時：2010/12/08 19:31

No.2

回答者： yyr446
回答日時：2010/12/08 13:06

Firefox3.5で、

　Element.nextElementSiblingと、Element.previousElementSibling
が実装されています。

https://developer.mozilla.org/En/DOM/Element.nex …

これを使えば一発かな。
console.log(obj.nextElementSibling);

- 0
- 件

通報する

この回答へのお礼

おおお！一発でしたｗ

通報する

お礼日時：2010/12/08 19:27

No.1

回答者： fujillin
回答日時：2010/12/08 12:23

実質的に次の要素を取得したいということですよね？

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;
}
みたいにしておいて、必要に応じて呼び出すとか。