ある要素の兄弟要素が兄なのか弟なのかを判定する方法があれば教えていただきたいです。
例えば以下のhtml について、id="C" の要素を基準にしたとき、id="A" の要素は C の要素より前に出てくるか後に出てくるか、また、id="F" の要素についてはどうか、判定する簡潔な方法はありませんか？

また、class="is-target" となる要素は C の要素の前に出てくるか後に出てくるかを判定する方法はありますか？

環境はGoogle Chrome 71 相当です。

html
1<div>
2  <p id="A"></p>
3  <p id="B"></p>
4  <p id="C"></p>
5  <div>
6    <p id="D"></p>
7    <p id="E" class="is-target"></p>
8  </div>
9  <p id="F"></p>
10</div>

行動規範の内容に同意します

回答5件

ベストアンサー

Node.compareDocumentPosition を使う。

投稿2019/04/19 05:21

退会済みユーザー

総合スコア0

noc

2019/04/19 09:06

こんな方法があったのですね。 DOMツリーの位置関係を見るというところで、公式にもサポートされているAPIでもあり、安心感がありますね。ありがとうございます。

行動規範の内容に同意します

要件が気になります。

(A) 兄要素の場合と弟要素の場合でそれぞれに処理があるのか
(B) #A,C,F の要素は必ず存在するのか

A. , B 共にYesなら、

JavaScript
1document.querySelector('#A,#C').id;
2document.querySelector('#parent>#A,#parent>#C').id;

要素の前後性でセレクタを複数回呼び出すのは効率的ではないので、一度のセレクタで要件を満たせるようにします。
(両コードは階層固定するかで使い分けます)

BがNoなら、querySelectorAll に切り替えます。

JavaScript
1var nodeList = document.querySelectorAll('#A,#C');
2
3if (nodeList.length === 2 && nodeList[0].id === 'A') {
4  // 処理
5}

Re: siic さん

投稿2019/04/19 03:43

編集2019/04/19 03:46

think49

総合スコア18162

noc

2019/04/19 09:10

効率的な方法ありがとうございます。要件を詳細に書いていなくてご不便をおかけいたしました。

think49

2019/04/19 09:30

要件を追記した上でベストアンサーを選んではいかがでしょうか。

noc

2019/04/22 05:26

要件はあらためて説明するほどのものでもないと存じますので、心苦しいですが閉じさせていただきました。改めて読み返しますと、`querySelector()` を使った分かりやすく簡潔な方法だと存じます。ありがとうございます。

行動規範の内容に同意します

同じ兄弟要素の場合、兄弟セレクタを使えばセレクタだけで判定ができるかと思います。

javascript
1// #Cが#Aよりあとにある兄弟要素の場合true
2document.querySelector('#A ~ #C') !== null

階層が変わるような場合は、その階層に応じた判定が必要な気もします。

投稿2019/04/19 00:49

maisumakun

総合スコア145183

noc

2019/04/19 01:09

この方法は盲点でした。親要素からchildNodes 取得して総当たりするしかないかと思っていたので。ありがとうございます。

行動規範の内容に同意します

IE であれば sourceIndex があるため簡単です。
https://msdn.microsoft.com/en-us/ie/ms534635(v=vs.94)#MainContent

標準にはないため、全要素を取得するという富豪的なスクリプトを考えました。

JavaScript
1var entryC = document.getElementById('C');
2var target = document.querySelector('.is-target');
3var all = Array.from(document.querySelectorAll('*'));
4console.log(all.indexOf(entryC), all.indexOf(target)); // 8 11

投稿2019/04/19 04:14

x_x

総合スコア13749

noc

2019/04/20 00:16

ありがとうございます。でも私は貧乏なので貧民～中産階級的コードを希望します。

行動規範の内容に同意します

cを基準にチェックするにはこう

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  var a=document.querySelector('#A');
4  var c=document.querySelector('#C');
5  var e=document.querySelector('#E');
6  console.log([].indexOf.call(c.parentNode.children,a));
7  console.log([].indexOf.call(c.parentNode.children,c));
8  console.log([].indexOf.call(c.parentNode.children,e));
9});
10</script>
11<body>
12<div>
13  <p id="A"></p>
14  <p id="B"></p>
15  <p id="C"></p>
16  <div>
17    <p id="D"></p>
18    <p id="E" class="is-target"></p>
19  </div>
20  <p id="F"></p>
21</div>
22</body>

is-targetであるEは兄弟ではないので-1になる。
完全に相対値をとりたいなら、自分の親を再帰的に拾って
インデックスを拾っていく必要があります

追記

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  var a=document.querySelector('#A');
4  var c=document.querySelector('#C');
5  var t=document.querySelector('.is-target');
6  var d=document.querySelector('#D');
7  var g=document.querySelector('#G');
8  console.log(compArray(getIndexs(c),getIndexs(a)));//#Cより#Aは前(-1)
9  console.log(compArray(getIndexs(c),getIndexs(t)));//#Cより.is-targetは後(1)
10  console.log(compArray(getIndexs(c),getIndexs(c)));//#Cと#Cは同じ
11  console.log(compArray(getIndexs(d),getIndexs(g)));//#Dは#Gを含む(2);
12  console.log(compArray(getIndexs(g),getIndexs(d)));//#Gは#Dに含まれる(-2);
13});
14function getIndexs(ele){ //IE対応版
15  if(p=ele.parentNode){
16    var idxs=[];
17    if(eles=p.children){
18      for(var i=0;i<eles.leng
19        if(eles[i]==ele) brea
20      }
21      idxs=getIndexs(p).conca
22    }
23    return idxs;
24  }else{
25    return [0];
26  }
27}
28/*
29function getIndexs(ele){
30  if(ele.parentNode){
31    var idx=[].indexOf.call(ele.parentNode.children,ele);
32    return getIndexs(ele.parentNode).concat([idx]);
33  }else{
34    return [0];
35  }
36}
37*/
38function compArray(a1,a2){
39  for(var i in a1){
40    if(typeof a2[i]=="undefined") return 2;
41    if(a1[i]<a2[i]) return 1;
42    if(a1[i]>a2[i]) return -1;
43  };
44  return a1.length==a2.length?0:-2;
45}
46</script>
47<body>
48<div>
49  <p id="A"></p>
50  <p id="B"></p>
51  <p id="C"></p>
52  <div id="G">
53    <p id="D"></p>
54    <p id="E" class="is-target"></p>
55  </div>
56  <p id="F"></p>
57</div>
58</body>