elementとnodeの使い分け

アコーディオンを作っており、親要素のプロパティを取得しようと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}