javascriptでid(class)を持っていたらある動きをさせたい

Question

JavaScriptでid(class)を取得後、その子要素がある要素を持ってたらある動きをさせる、というようにしたいのですが方法が思いつきません。

例えばswitch文で

var a = document.getElementById('a');　//要素を取得
if(a.hasChildNodes()){
switch (???) {  //aの子要素を比べたい
 case b: //bというidをもっていたらある動きをさせたい
 kansuu();
break;
　

よろしくお願いします。

Answer 1

Selectors API

document.querySelectorAll('#a>.b').forEach(b => console.log(b));

XPath

:scope はブラウザの実装が整っていないので、コンテキストノード指定が必要であれば、document.evaluate をお勧めします。

• :scope - CSS: Cascading Style Sheets | MDN
• Introduction to using XPath in JavaScript | MDN

Re: shim1 さん

Comments

[think49]

お勉強目的なら、getElementById -> children -> for -> classList
switch は不要なような(classNameを使用しようとしてる？)

[think49]

childNodes から辿るなら、nodeType + switch できますね。
私的には tagName 判定しそうですが。

Answer 2

例えばこんな

<div id="a">
	<div>
		<div></div>
	</div>
</div>

{
	const a = document.getElementById("a");
	if(a.querySelector(":scope>div>div")){//#bとかを指定できる
		kansuu();
	}
	function kansuu(){
		console.log("called");
	}
}

Answer 3

例えばこんな感じ

<script>
HTMLElement.prototype.has=function(selector){
  return this.querySelectorAll(selector).length>0?this:null;
}
window.addEventListener('DOMContentLoaded', function(e){
  var node=document.querySelector('#hoge').has('#fuga');
  if(node) console.log("#fuga ok");
  var node=document.querySelector('#hoge').has('#piyo');
  if(node) console.log("#piyo ok");
  var node=document.querySelector('#hoge').has('.piyo');
  if(node) console.log(".piyo ok");
  var node=document.querySelector('#hoge').has('span');
  if(node) console.log("span ok");
});
</script>
<div id="hoge">
<span id="fuga">fuga</span>
<span class="piyo">piyo</span>
<span class="piyo">piyo</span>
<span class="piyo">piyo</span>
</div>

Comments

[think49]

> HTMLElement.prototype.has
これは Element.prototype.matches() と同等でしょうか。

[yambejp]

やっていることはjQueryでいうhasのような処理です
var node=$('#hoge').has('#fuga');
if(node.length>0) console.log("#fuga ok");

jQueryの場合hasがマッチしなくてもオブジェクトが得られるので
$('#hoge').has('#fuga').css("background-Color","red");
のような処理が可能ですが
prototypeで処理してると
document.querySelector('#hoge').has('#fuga').style.backgroundColor="red";
のような処理をすると、#fugaをもっていないときnullに対して
処理をしようとしてエラーに成るので一度変数に受けて
var node=document.querySelector('#hoge').has('#fuga');
if(node) node.style.backgroundColor="red";
のようにしなくてはいけません

[think49]

なるほど、メソッドチェーンの為の拡張なんですね。

Answer 4

要素の子要素を全て取得する

const elements = document.getElementById('list').children;
for (var i = 0; i < elements.length; i++) {
 console.log(elements[i]);
};