parents( )をpurejsで実現するには

javascript
1$('#hoge').parents('.hogehoge').find('.hoge')

上記を直感的に下記のように書き換えて見たものの、動作しませんでした

javascript
1document.querySelector('#hoge').parentNode('.hogehoge').querySelector('.hoge')

jqueryのparentsのように祖先要素まで参照し、さらにその中に含まれる特定のクラスを抽出するにはどのような記述になるのでしょうか？

m.ts10806

2019/06/16 04:07

一気にすべて実行するのではなく、ひとつひとつ段階的に確かめてみましたか？

退会済みユーザー

2019/06/16 04:44 編集

parentNodeまでは取得できたのですが、そこからクラスを取得するにはどうすればよいですか？

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

回答2件

jQuery()

JavaScript
1$('#hoge').parents('.hogehoge').find('.hoge')

回りくどい処理をされていますね…。

HTML
1<style>
2div,p {
3  margin: 1em;
4  border: solid 1px black;
5}
6</style>
7</head>
8<body>
9<div class="hogehoge">
10  .hogehoge
11  <div class="hoge">
12    .hoge
13    <div class="hoge">
14      .hoge
15      <div id="hoge" class="hoge">
16        #hoge.hoge
17        <p class="hoge">.hoge</p>
18      </div>
19    </div>
20  </div>
21</div>
22<script>
23'use strict';
24const hoge1 = jQuery('#hoge').parents('.hogehoge').find('.hoge');
25const hoge2 = jQuery('.hogehoge:has( #hoge) .hoge');
26
27console.log([...hoge1]);
28console.log([...hoge2]);
29</script>

querySelectorAll()

残念ながら、querySelectorAll() で :has() の実装が整うのは先なので、:has() を含まないセレクタで検索後に #hoge を含むノードを抽出する事になります。

#hoge を子孫に持つノード
自身が #hoge のノード
#hoge を祖先に持つノード

NodeList.prototype.forEach()で繰り返し処理を実行すれば良いでしょう。

初歩的なミス

上記を直感的に下記のように書き換えて見たものの、動作しませんでした
JavaScript
1document.querySelector('#hoge').parentNode('.hogehoge').querySelector('.hoge')

parentNode はプロパティであり、メソッドではありません。
基本的な部分で躓いているようですので、「オブジェクト」「DOM」など、基礎に立ち返って学習し直す事をお勧めします。

Re: realmccoy さん

投稿2019/06/16 05:08

think49

総合スコア18164

厳密にはparentsではないのですが親をさかのぼっていく場合
closestが実装されているのでつかえるかも
(以下例だと#hogeが.fugaを兼ねている場合は遡らないので注意)

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  console.log(document.querySelector('#hoge').closest('.fuga').querySelectorAll('.piyo'));
4});
5</script>
6
7<div class="fuga">fuga
8<div>dummy
9<div class="piyo">piyo1</div>
10<div>dummy</div>
11<div id="hoge">hoge</div>
12</div>
13<div class="piyo">piyo2</div>
14<div class="piyo">piyo3</div>
15</div>