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

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

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

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

解決済

elementとnodeの使い分け

cuencho
cuencho

総合スコア5

JavaScript

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

2回答

0評価

0クリップ

351閲覧

投稿2022/01/05 00:24

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

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

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

js

// parentNodeの場合 const questions = document.querySelectorAll(".accordion__question"); questions.forEach((el) => { el.addEventListener("click", function () { el.parentNode.classList.toggle("open"); questions.forEach((el2) => { if (el !== el2) { el2.parentNode.classList.remove("open"); } }); }); }); // parentElementの場合 // const questions = document.querySelectorAll(".accordion__question"); // questions.forEach((el) => { // el.addEventListener("click", function () { // el.parentElement.classList.toggle("open"); // questions.forEach((el2) => { // if (el !== el2) { // el2.parentElement.classList.remove("open"); // } // }); // }); // });

html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <article class="accordion"> <h1 class="accordion__title">FAQ</h1> <section class="accordion__wrapper"> <div class="accordion__question"> <h2 class="questionTitle">Q. 質問です</h2> <div class="question__icon"><span></span><span></span></div> </div> <div class="answer__wrapper"> <p class="answer__body"> A. 回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。 </p> </div> </section> <section class="accordion__wrapper"> <div class="accordion__question"> <h2 class="questionTitle">Q. 質問です</h2> <div class="question__icon"><span></span><span></span></div> </div> <div class="answer__wrapper"> <p class="answer__body"> A. 回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。 </p> </div> </section> <section class="accordion__wrapper"> <div class="accordion__question"> <h2 class="questionTitle">Q. 質問です</h2> <div class="question__icon"><span></span><span></span></div> </div> <div class="answer__wrapper"> <p class="answer__body"> A. 回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。回答です。 </p> </div> </section> </article> <script src="main.js"></script> </body> </html>

css

:root { font-size: 62.5%; } * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } h1, h2, p { font-size: 1.5rem; font-weight: normal; } .accordion { padding: 15px; } .answer__wrapper { padding-bottom: 10px; } .accordion__title::after { content: ""; display: block; height: 1px; margin-top: 2px; background-color: black; } .accordion__question { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .questionTitle { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .question__icon { position: relative; width: 8px; height: 8px; -webkit-transition: all 0.2s; transition: all 0.2s; } .accordion__wrapper.open .question__icon { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .question__icon span { display: block; width: 100%; height: 1px; background-color: black; } .question__icon span:nth-child(1) { position: absolute; top: 50%; left: 0; } .question__icon span:nth-child(2) { -webkit-transform: rotate(90deg); transform: rotate(90deg); position: absolute; top: 50%; left: 0%; } .answer__wrapper { display: none; } .accordion__wrapper.open .answer__wrapper { display: block; } .answer__body { -webkit-animation-name: view; animation-name: view; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .accordion__wrapper.open .answer__wrapper { display: block; } @-webkit-keyframes view { from { -webkit-transform: translateY(-20px); transform: translateY(-20px); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes view { from { -webkit-transform: translateY(-20px); transform: translateY(-20px); opacity: 0; } to { -webkit-transform: none; transform: none; opacity: 1; } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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