特定の子要素を持つ親要素を取得したい

Question

質問させてください。
例えば下記ような html があったとしまして、<ul>要素を子に持つ全ての<li>要素を取得したいと思っております。

<ul>
    <li><a href="">メニュー1</a>
        <ul>
            <li><a href="">メニュー1-1</a>
                <ul>
                    <li><a href="">メニュー1-1-1</a></li>
                    <li><a href="">メニュー1-1-2</a></li>
                </ul>
            </li>
            <li><a href="">メニュー1-2</a></li>
        </ul>
    </li>
    <li><a href="">メニュー2</a></li>
    <li><a href="">メニュー3</a>
        <ul>
            <li><a href="">メニュー3-1</a></li>
            <li><a href="">メニュー3-2</a></li>
        </ul>
    </li>
</ul>

jQuery では .has()メソッドがあるのですが、JavaScript では同じような機能が見つからず、下記のようにして何とか想定した要素を取得することができました。

// <li> 直下の子要素の <ul> を取得
const children = document.querySelectorAll('li > ul');

for (const child of children) {
    // <ul> の親要素の <li> を取得
    const parent = child.parentNode;
    parent.style.backgroundColor = '#fcc';
}

ただこれだとなんとなく冗長で、.has() メソッドのように1～2行ぐらいでもう少しシンプルに書けないかなと思っております。
どなたかもし詳しい方がいらっしゃいましたらご教授いただけると助かります。

よろしくお願いいたします。

Answer 1

こんにちは。
単に短くということでしたら、forEach()を使ってこうですかね。

document.querySelectorAll('li > ul').forEach((element) => {
  element.parentNode.style.backgroundColor = '#ccf';
});

Comments

[takopo]

ご回答ありがとうございます。
forEach を使った方法も良さそうですね。参考にさせていただきます。

Answer 2

関数化して引数で渡すしかないのではないでしょうか。

    function aHasBChangeColor(a,b,color){
        const children = document.querySelectorAll(a+ '>' +b);
        
        for (const child of children) {
            // <ul> の親要素の <li> を取得
            const parent = child.parentNode;
            parent.style.backgroundColor = color;
        }
    }

    aHasBChangeColor('li','ul','#fcc');

Comments

[takopo]

ご回答ありがとうございます。
関数化ですね、参考にさせていただきます。