１．要素の取得

従来からのメソッド

メソッド 返り値など
getElementById(id) DOM要素オブジェクトを返す（一致する要素がなければ null）
getElementsByTagName(tagname) HTMLCollectionを返す
getElementsByClassName(classname) HTMLCollectionを返す 
//.getElementById(id)
const elm = document.getElementById('par1');
console.log(elm);

//.getElementsByTagName(tagname)
const allParTags = document.getElementsByTagName('p');
console.log(allParTags);
console.log(allParTags[0]);

//.getElementsByClassName(classname)
const allParClasses = document.getElementsByClassName('paragraph');
console.log(allParClasses);
console.log(allParClasses[0]);

モダンなメソッド

メソッド 返り値など
querySelector(selectors) 「最初に一致する」DOM要素オブジェクトを返す（一致する要素がなければ null）
querySelectorAll(selectors) NodeListを返す 
//.querySelector(selectors)
const elm = document.querySelector('#par1')
console.log(elm);

//.querySelectorAll(selectors)
const allElms = document.querySelectorAll('.paragraph');
console.log(allElms);
console.log(allElms[0]);

２．要素の操作

メソッド｜プロパティ 返り値など
createElement(tagname) 指定された HTML 要素を生成
[**classList
classList.add(classname)
classList.remove(classname)
classList.replace(classname)
classList.toggle(classname)
classList.contains(classname)**](https://developer.mozilla.org/ja/docs/Web/API/Element/classList) 要素のclass属性を返す
class属性の追加
class属性の除去
class属性の置き換え
class属性の追加⇔除去
指定classを含むか検査
getAttribute(attributeName) attributeNameで指定された属性の値を返す（属性が存在しない場合はnull）
**setAttribute(name, value)
⇔ removeAttribute(attributename)** 指定された要素の属性の値を設定（属性が既に存在する場合は値を更新）
**appendChild(aChild)
⇔ removeChild(child)** 指定された親ノードの子ノードリストの末尾にノードを追加
＊append()より互換性が高い
**append(param1, param2,…)
⇔ remove()** Nodeオブジェクトまたは文字列をElementの最後の子の後に挿入
＊appendChild()より便利
prepend() Nodeオブジェクトまたは文字列をElementの最初の子の前に挿入
parentElement 親要素を返す（親ノードが無い時はnull）
children 呼び出された要素の子要素をすべて返す（HTMLCollectionを返す）
nextSibling 指定されたノードの親のchildNodesの中で、そのすぐ次のノードを返す（指定されたノードが親要素の最後の子要素である場合はnullを返す）
previousSibling 指定されたノードの親のchildNodesの内で、直前にあるノードを返す（指定されたノードがリストの先頭にあった倍はnullを返す）
value <input>要素の現在の値を文字列で表す
innerText
innerHTML
textContent
style 
//.classList
const div = document.createElement('div');
div.classList = 'testdiv';
div.textContent = 'ここは段落です';
console.log(div.outerHTML);

div.classList.add('testdiv2');
console.log(div.outerHTML);

div.classList.remove('testdiv2');
console.log(div.outerHTML);

div.classList.replace('testdiv', 'testdiv1');
console.log(div.outerHTML);

div.classList.toggle('testdiv2');
console.log(div.outerHTML);

div.classList.toggle('testdiv2');
console.log(div.outerHTML);

let judg = div.classList.contains('testdiv1')
console.log(judg);
//--------------------------------//

//.getAttribute(attributename)
const div = document.querySelector('div');
let cls = div.getAttribute('class');
console.log(cls);

cls = div.getAttribute('href');
console.log(cls);

//.setAttribute(name, value)
div.setAttribute('id', 'test');
console.log(div.outerHTML);

//.removeAttribute(attributename)
div.removeAttribute('id');
console.log(div.outerHTML);
//--------------------------------//

//.appendChild(achild)
const div = document.querySelector('div');
console.log(div.outerHTML);

const p = document.createElement('p');
div.appendChild(p);
console.log(div.outerHTML);

//.removeChild(child)
div.removeChild(p);
console.log(div.outerHTML);
//--------------------------------//

//.append(param)
const div = document.querySelector('div');
console.log(div.outerHTML);

const p = document.createElement('p');
div.append(p);
console.log(div.outerHTML);

//.remove()
p.remove();
console.log(div.outerHTML);
//--------------------------------//

//.parentElement
const h1 = document.querySelector('h1');
if(h1.parentElement) {
    console.log(h1.parentElement);
}
//--------------------------------//

//.children
const div = document.querySelector('div');
if(div.children) {
    console.log(div.children);
}
//--------------------------------//

//.nextSibling
let h1 = document.querySelector('h1').nextSibling;
while (h1) {
    console.log(h1);
    h1 = h1.nextSibling;
}
//--------------------------------//

３．イベントリスナー

メソッド メモ
[**addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)**](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener) ・イベントリファレンス
・click
・dblclick
・mouseenter ⇔ mouseleave
・input
・submit
[**removeEventListener(type, listener)
removeEventListener(type, listener, options)
removeEventListener(type, listener, useCapture)**](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener) 
//.addEventListener
let h1 = document.querySelector('h1');
let h1Color = h1.style.color;

h1.addEventListener('click', () => {
    h1.style.color = 'red';
})
//--------------------------------//

<aside> 💡

addEventListener() を実装する時に removeEventListener() は必須ではありません。

イベントリスナーが必要な間は常に機能し続けるべき場合、または要素が存在する限りイベントを処理し続けたい場合は、removeEventListener() を実装する必要はありません。

例えば、以下のようなケースでは removeEventListener() は不要です：

ただし、以下のような状況では removeEventListener() の実装を検討すべきです：

  1. メモリリークを防ぐ場合（特に大量の要素や動的に生成・削除される要素）
  2. イベントを一時的にだけ監視したい場合
  3. 特定の条件が満たされた後はイベントを処理しない場合
  4. パフォーマンスの最適化が必要な場合

結論としては、addEventListener() を使う際に removeEventListener() は常に必須ではありませんが、適切な状況で使うことでより効率的で安全なコードになります。

</aside>

－ ©2025 maccolin