質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

652閲覧

elementとnodeの使い分け

cuencho

総合スコア5

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/01/05 00:24

アコーディオンを作っており、親要素のプロパティを取得しようとconsole.dirで検索したところ
parentNodeとparentElementが見つかりました。

試にどちらでも動きを確認すると同じでした。

どのようなシチュエーションの時にNodeとElementを使い分けるのでしょうか?

js

1// parentNodeの場合 2 3const questions = document.querySelectorAll(".accordion__question"); 4 5questions.forEach((el) => { 6 el.addEventListener("click", function () { 7 el.parentNode.classList.toggle("open"); 8 9 questions.forEach((el2) => { 10 if (el !== el2) { 11 el2.parentNode.classList.remove("open"); 12 } 13 }); 14 }); 15}); 16 17// parentElementの場合 18// const questions = document.querySelectorAll(".accordion__question"); 19 20// questions.forEach((el) => { 21// el.addEventListener("click", function () { 22// el.parentElement.classList.toggle("open"); 23 24// questions.forEach((el2) => { 25// if (el !== el2) { 26// el2.parentElement.classList.remove("open"); 27// } 28// }); 29// }); 30// }); 31

html

1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <link rel="stylesheet" href="style.css" /> 9 </head> 10 <body> 11 <article class="accordion"> 12 <h1 class="accordion__title">FAQ</h1> 13 <section class="accordion__wrapper"> 14 <div class="accordion__question"> 15 <h2 class="questionTitle">Q. 質問です</h2> 16 <div class="question__icon"><span></span><span></span></div> 17 </div> 18 <div class="answer__wrapper"> 19 <p class="answer__body"> 20 A. 21 回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。 22 </p> 23 </div> 24 </section> 25 <section class="accordion__wrapper"> 26 <div class="accordion__question"> 27 <h2 class="questionTitle">Q. 質問です</h2> 28 <div class="question__icon"><span></span><span></span></div> 29 </div> 30 <div class="answer__wrapper"> 31 <p class="answer__body"> 32 A. 33 回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。 34 </p> 35 </div> 36 </section> 37 <section class="accordion__wrapper"> 38 <div class="accordion__question"> 39 <h2 class="questionTitle">Q. 質問です</h2> 40 <div class="question__icon"><span></span><span></span></div> 41 </div> 42 <div class="answer__wrapper"> 43 <p class="answer__body"> 44 A. 45 回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。 46 </p> 47 </div> 48 </section> 49 </article> 50 <script src="main.js"></script> 51 </body> 52</html>

css

1:root { 2 font-size: 62.5%; 3} 4 5* { 6 -webkit-box-sizing: border-box; 7 box-sizing: border-box; 8 margin: 0; 9 padding: 0; 10} 11 12h1, 13h2, 14p { 15 font-size: 1.5rem; 16 font-weight: normal; 17} 18 19.accordion { 20 padding: 15px; 21} 22 23.answer__wrapper { 24 padding-bottom: 10px; 25} 26 27.accordion__title::after { 28 content: ""; 29 display: block; 30 height: 1px; 31 margin-top: 2px; 32 background-color: black; 33} 34 35.accordion__question { 36 display: -webkit-box; 37 display: -ms-flexbox; 38 display: flex; 39 -webkit-box-pack: justify; 40 -ms-flex-pack: justify; 41 justify-content: space-between; 42 -webkit-box-align: center; 43 -ms-flex-align: center; 44 align-items: center; 45 cursor: pointer; 46} 47 48.questionTitle { 49 -webkit-user-select: none; 50 -moz-user-select: none; 51 -ms-user-select: none; 52 user-select: none; 53} 54 55.question__icon { 56 position: relative; 57 width: 8px; 58 height: 8px; 59 -webkit-transition: all 0.2s; 60 transition: all 0.2s; 61} 62 63.accordion__wrapper.open .question__icon { 64 -webkit-transform: rotate(45deg); 65 transform: rotate(45deg); 66} 67 68.question__icon span { 69 display: block; 70 width: 100%; 71 height: 1px; 72 background-color: black; 73} 74 75.question__icon span:nth-child(1) { 76 position: absolute; 77 top: 50%; 78 left: 0; 79} 80 81.question__icon span:nth-child(2) { 82 -webkit-transform: rotate(90deg); 83 transform: rotate(90deg); 84 position: absolute; 85 top: 50%; 86 left: 0%; 87} 88 89.answer__wrapper { 90 display: none; 91} 92 93.accordion__wrapper.open .answer__wrapper { 94 display: block; 95} 96 97.answer__body { 98 -webkit-animation-name: view; 99 animation-name: view; 100 -webkit-animation-duration: 0.5s; 101 animation-duration: 0.5s; 102 -webkit-animation-fill-mode: forwards; 103 animation-fill-mode: forwards; 104} 105 106.accordion__wrapper.open .answer__wrapper { 107 display: block; 108} 109 110@-webkit-keyframes view { 111 from { 112 -webkit-transform: translateY(-20px); 113 transform: translateY(-20px); 114 opacity: 0; 115 } 116 to { 117 -webkit-transform: none; 118 transform: none; 119 opacity: 1; 120 } 121} 122 123@keyframes view { 124 from { 125 -webkit-transform: translateY(-20px); 126 transform: translateY(-20px); 127 opacity: 0; 128 } 129 to { 130 -webkit-transform: none; 131 transform: none; 132 opacity: 1; 133 } 134}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ほとんどの場合で、parentNodeparentElement は同じものを返すので、どちらでも良いです。コード可読性の観点から parentElement を使うほうが少しだけ良いです。

parentNodeparentElement の挙動が違うのは親ノードがElementではない場合だけで、

  • 親ノードが Document (<html>などのルート要素の場合)
  • 親ノードが DocumentFragmentShadowRoot の場合

だけが該当します。

投稿2022/01/05 00:34

int32_t

総合スコア20672

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cuencho

2022/01/05 01:24

ありがとうございます。 助かりました。
guest

0

Element は Node の子クラスです。ですので、Element は全て Node です。
parentNode は親が Node でも Element でも返しますが、parentElement は親が Element であるときだけ返します。

つまり、Element ではない親ノードを取得したくない時に parentElement を使うのがいいかと思います。

とはいえ、Element ではない親ノードは、document など限られたものしかないと思いますので、それほど気にしなくてもいいのではないかな、と思います。

投稿2022/01/05 00:38

Lhankor_Mhy

総合スコア35871

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cuencho

2022/01/05 01:24

ありがとうございます。 助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問