【Javascript】DOM操作

要素の取得

指定したIDを持つ要素を取得

document.getElementById( id )

引数idで指定したIDを持つ要素を取得します。
引数は取得したい要素のidを文字列で指定します。戻り値の型はHTMLElementとなります。
このオブジェクトを通してテキストや属性にアクセスすることができます。

<body>
   <h1 id="title">タイトル</h1>
</body>

let title = document.getElementById('title');
console.log(title); // <div id="title">タイトル</div>

IDだけでなく他の条件を指定して要素を取得

document.querySelector( selector )

IDだけでなく他の条件を指定して要素を取得することができます。
引数selectorにはCSSのセレクタ、ID名、クラス名、タグ名、属性値などを指定できるので、様々な状況に対応することができます。

指定したセレクタに該当する要素が複数存在する場合、最初の要素を返します。

<ul id="menu">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>


let menu = document.querySelector('#menu');
let li = document.querySelector('#menu li'); // <li>1</li>を取得
// cssセレクタで指定
let li2 = document.querySelector('#menu li:nth-child(2)'); // <li>2</li>を取得

該当する全ての要素を取得

document.querySelectorAll( selector )

該当する全ての要素を取得します。
引数にはquerySelectorと同様にCSSセレクタを使います。戻り値はNodeListオブジェクトでHTMLElementを複数集めたようなもの。

<ul id="menu">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

// li要素が3つ入ったNodeListオブジェクトを取得
let liList = document.querySelectorAll('#menu li');
liList.forEach(li => {
    console.log(li); 
    // <li>1</li>
    // <li>2</li>
    // <li>3</li>
});

親要素の取得

element.parentNode

親要素を取得するにはparentNodeプロパティを使います。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

//1番めのliを取得
let li1 = document.querySelector('li'); // <li>1</li>
//親要素ulの取得
let parent = li1.parentNode;
console.log(parent) // ul

子要素の取得

element.children

子要素を取得するにはchildrenプロパティを使います。
childrenプロパティはHTMLCollection型で、子要素の複数の情報を持っています。厳密には配列とは違いますが、配列のようなものと考えてください。[]演算子で各要素を、lengthプロパティで子要素の数を取得することができるなど、配列と同じような機能もあります。

<section class="sec01">
   <h1>セクション1</h1>
   <p>テキスト</p>
</section>

//クラスsec01の要素を取得
let sec01 = document.querySelector('.sec01');
//クラスsec01の子要素のリスト（h1とp）を取得
let children = sec01.children;
for (const i in children) {
    console.log(children[i].textContent);
    // セクション1
    // テキスト
}

element.childNodes

childNodesプロパティは、子要素の一覧を表すNodeListにアクセスできます。孫やそれ以降のノードは含まれません。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

// 親要素ulを取得
const ul = document.querySelector('ul');
// 子要素取得
const list = ul.childNodes;
list.forEach(el => {
   console.log(el.textContent) // 1 2 3
});

element.firstElementChild

最初の子要素を取得します。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

// 親要素の取得
const ul = document.querySelector("ul");
console.log(ul.firstElementChild); // <li>1</li>

最後の子要素を取得する場合はelement.lastElementChildを使います。

隣接要素の取得

element.previousElementSibling

前隣の要素はpreviousElementSiblingプロパティを使います。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

//ulの２番めのliを取得
let li2 = document.querySelector('ul li:nth-child(2)');
//li2の前の要素を取得
let li1 = li2.previousElementSibling;
console.log(li1.textContent); // 1

element.nextElementSibling

後隣の要素はnextElementSiblingプロパティを使います。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

//ulの２番めのliを取得
let li2 = document.querySelector('ul li:nth-child(2)');
//li2の後の要素を取得
let li3 = li2.nextElementSibling;
console.log(li3.textContent); // 3

テキストの操作（element.textContent）

要素内のテキストの操作は要素オブジェクトのtextContentプロパティを使います。

テキストの取得

getElementById等で要素オブジェクトを取得し、textContentプロパティを使ってテキストの取得をします。

<p>テキスト</p>

let p = document.querySelector('p');
console.log(p.textContent); // テキスト

インライン要素がある場合

<p>テキスト<span>インライン</span></p>

let p = document.querySelector('p');
console.log(p.textContent); // テキストインライン

テキストの変更

テキストの変更はtextContentに値を代入します。

<p>テキスト</p>

let p = document.querySelector('p');
console.log(p.textContent); // テキスト
p.textContent = 'てきすと';
console.log(p.textContent); // てきすと

テキストの追記

※追記でのtextContentプロパティへの代入は既存のテキストを上書きする事になります。

<p>テキスト</p>

let p = document.querySelector('p');
p.textContent += '：てきすと';　//テキストを追記
console.log(p.textContent); // テキスト：てきすと

テキストの削除

textContentに空文字を代入することでテキストを削除することができます。

<p>テキスト</p>

let p = document.querySelector('p');
console.log(p.textContent); // テキスト
p.textContent = '';
console.log(p.textContent); //

属性の操作

属性の取得

element.getAttribute(attr)

属性を取得するには、getAttributeメソッドを使います。
引数attrには取得したい属性名を指定します。戻り値は属性の値（文字列）になります。

<img src="image/a.jpg" />
<a href="a.html">リンク</a>

// img要素を取得---
let img = document.querySelector('img');
//img要素のsrc属性の値を取得
let url = img.getAttribute('src');
console.log(url); // image/a.jpg
// a要素を取得---
let a = document.querySelector('a');
//a要素のhref属性の値を取得
let url2 = a.getAttribute('href');
console.log(url2); // a.html

element.id

idを取得します

<div id="sec" class="sec01"></div>

// 要素の取得
let sec01 = document.querySelector('.sec01');
console.log(sec01.id) // sec

クラスを取得する場合はelement.classNameを使います。

属性の変更（追加）

element.setAttribute(attr, value)

属性の変更、追加はsetAttributeメソッドを使います。
属性が付与されていない場合は追加となります。

<a href="a.html">リンク</a>
<img src="image/a.jpg" />

//img要素を取得------
let img = document.querySelector('img');

//img要素のsrc属性を変更
img.setAttribute('src', 'image/b.jpg');

//img要素のwidth属性を追加
img.setAttribute('width', '100');

console.log(img.getAttribute('src')); // image/b.jpg
console.log(img.getAttribute('width')); // 100



//a要素を取得-----
let a = document.querySelector('a');

//a要素のhref属性を変更
a.setAttribute('href', 'c.html');

//a要素のtarget属性を追加
a.setAttribute('target', '_blank');

console.log(a.getAttribute('href')); // c.html
console.log(a.getAttribute('target')); // _blank

element.id = idstr

要素にIDを追加します。

<div>テキスト</div>

// 要素取得
const div = document.querySelector('div');
// IDを追加
div.id = 'sec01';
console.log(div); // <div id="sec01">テキスト</div>

クラスを追加する場合は、element.classNameを使います。

属性の削除

element.removeAttribute(attr)

属性を削除するにはremoveAttributeメソッドを使います。
引数attrは削除する属性名を指定します。

<a href="a.html">リンク</a>
<img src="image/a.jpg" />

//img要素を取得------
let img = document.querySelector('img');

//img要素のsrc属性を削除
img.removeAttribute('src');

console.log(img.getAttribute('src')); // null



//a要素を取得------
let a = document.querySelector('a');

//a要素のhref属性を削除
a.removeAttribute('href');

console.log(a.getAttribute('href')); // null

カスタムデータ属性の取得・更新

element.detaset.カスタムデータ属性

カスタムデータ属性を取得、更新するにはdatasetプロパティを使います。

<div class="sec01" data-number="01"></div>

// 親要素の取得
const sec = document.querySelector(".sec01");

// カスタムデータ属性の取得
let data = sec.dataset.number
console.log(data); // 01

// カスタムデータ属性の更新
data = sec.dataset.number = "02";
console.log(data); // 02

クラスの操作（classList）

要素のクラス属性を操作をする専用のclassListプロパティがあります。
クラス属性は、属性を操作するgetAttribute、setAttribute等での操作も可能ですが、クラス属性は複数になる場合もあるためclassListプロパティを使うようにします。

クラスの追加

element.classList.add(class)

クラスの追加はaddメソッドを使います。

<section class="sec01">セクション1</section>

//sectionの要素を取得
let sec = document.querySelector('section');

//クラスsecを追加
sec.classList.add('sec');

console.log(sec.getAttribute('class')); // sec01 sec

クラスの削除

element.classList.remove(class)

クラスの削除はremoveメソッドを使います。

<section class="sec01 sec">セクション1</section>

//sectionの要素を取得
let sec = document.querySelector('section');

//クラスsecを削除
sec.classList.remove('sec');

console.log(sec.getAttribute('class')); // sec01

クラスの存在確認

element.classList.contains(class)

あるクラスがその要素に存在するかを確認するにはcontainsメソッドを使います。
引数classには存在確認するクラス名を指定します。戻り値はboolean型になります。存在すればtrue、しなければfalseが返ります。

<section class="sec">セクション</section>

//sectionの要素を取得
let sec = document.querySelector('section');

//クラスsecの有無を確認
let bl1 = sec.classList.contains('sec'); // true

//クラスcateの有無を確認
let bl2 = sec.classList.contains('cate'); // false

console.log(`bl1: ${bl1}  bl2: ${bl2}`); // bl1: true  bl2: false

クラスのトグル

element.classList.toggle(class)

クラスのトグルは、toggleメソッドを使います。
クラスの存在/非存在を切り替えます。
引数classにはトグルするクラス名を指定します。引数に指定したクラスが存在すれば削除、存在しなければ追加します。

<section class="sec">セクション</section>

//sectionの要素を取得
let sec = document.querySelector('section');

// クラスsecは存在するので、削除する
sec.classList.toggle('sec');
console.log(sec.getAttribute('class')); // null

//今度は存在しないので、追加する
sec.classList.toggle('sec');
console.log(sec.getAttribute('class')); // sec

新たな要素の生成、追加

新たな要素を生成して、DOM構造自体に変化を与える操作をします。

要素の生成

document.createElement(tag_name)

新たな要素を生成するにはdocument.createElement関数を使います。
引数tag_nameには生成したい要素名（タグ名）を指定します。戻り値は生成された要素オブジェクト（HTMLElement）になります。

//新たにdiv要素を生成
let div = document.createElement('div');

//テキストを設定
div.textContent = 'テキスト';

console.log(div); // <div>テキスト</div>

document.createText(data)

テキストノードを生成します。
引数dataには追加するテキスト（文字列）を指定します。

<div id="sec01">テキスト</div>

// 要素取得
const sec01 = document.getElementById('sec01');

// テキストノードの生成
let newtext = document.createTextNode(':テキスト2');

// 追加
sec01.appendChild(newtext);

console.log(sec01.textContent); // テキスト:テキスト2

生成した要素をDOM構造に追加

上記で生成した要素はDOM構造に追加する必要があります。

element.insertAdjacentElement(position, element)

要素の追加にはinsertAdjacentElement関数を使います。
引数positionには挿入する位置を、elementには挿入する要素を指定します。
引数positionには、以下のものが指定できます。

beforebegin：対象要素の直前に挿入
afterbegin：対象要素の内部の最初に挿入（子要素）
beforeend：対象要素の内部の最後に挿入（子要素）
afterend：対象要素の直後に挿入

●beforebegin（対象要素の直前に挿入）

<div class="sec01"></div>

// 追加する要素の生成
let img = document.createElement('img');
img.setAttribute('src', 'image/1.jpg');

// 要素の取得
const sec = document.querySelector(".sec01");

// sec要素の前に追加
sec.insertAdjacentElement('beforebegin', img);

追加後のhtml

<img src="image/1.jpg">
<div class="sec01"></div>

●afterbegin（対象要素の内部の最初に挿入）

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

// 追加する要素の生成
let li = document.createElement('li');
li.textContent = '0';

// 要素の取得
const sec = document.querySelector("ul");

// ul要素の最初の子要素として追加
sec.insertAdjacentElement('afterbegin',　li);

追加後のhtml

<ul>
   <li>0</li>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

beforeend、afterendも同じような感じです。

element.insertAdjacentHTML(position, text)

insertAdjacentElementと同様のメソッドなので、引数positionは同じで、引数textには追加要素ではなく追加するhtmlを記述します。

element.insertAdjacentHTML('afterbegin', '<p>テキスト</p>');

element.appendChild(target)

ある要素の最後の子要素に追加するにはappendChild関数を使います。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

//li要素を生成
let li = document.createElement('li');

//テキストを設定
li.textContent = '4';

//ulを取得
let ul = document.querySelector('ul');

//ulの最後の子要素として追加
ul.appendChild(li);

// li要素が入ったNodeListオブジェクトを取得
let liList = document.querySelectorAll('li');

liList.forEach(li => {
    console.log(li); 
    // <li>1</li>
    // <li>2</li>
    // <li>3</li>
    // <li>4</li>
});

document.insertBefore(target, tag_name)

ある要素の直前に追加するにはinsertBefore関数を使います。（子要素）

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

//li要素を生成
let li = document.createElement('li');

//テキストを設定
li.textContent = '0';

//ul要素を取得
let ul = document.querySelector('ul');

//<li>1</li>要素を取得
let li1 = ul.children[0];

//<li>1</li>要素の直前に生成したliを追加
// ※insertBeforeはappendChildと同様に親要素（ul）から呼出すします。
// ※li1から呼出さないように！
ul.insertBefore(li, li1);

// 全てのli要素を取得
let liList = document.querySelectorAll('li')

liList.forEach(li => {
    console.log(li); 
    // <li>0</li>
    // <li>1</li>
    // <li>2</li>
    // <li>3</li>
});

要素の生成と追加を同時に行う

DOM要素を作るにはcreateElement以外にも方法があります。

element.innerHTML = html_string

innerHTMLというプロパティを使うと要素の生成とDOMへの追加が一度にできます。
html_stringはHTMLのタグ記法の文字列が使えます。属性もHTMLの感覚で書けます。
※innerHTMLで文字列を代入すると既存のDOM要素はすべて消えてしまうので注意が必要です。

<div class="sec01"></div>

//親要素を取得
let sec01 = document.querySelector(".sec01"); //DOM構造を直接生成
sec01.innerHTML = `
<ul id="menu">
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>
`;
//'<ul id="menu">' + "<li>1</li>" + "<li>2</li>" + "<li>3</li>" + "</ul>";

console.log(document.querySelector(".sec01"));
// <div class="sec01"> 
//    <ul id="menu"> 
//       <li>1</li> 
//       <li>2</li> 
//       <li>3</li> 
//    </ul> 
// </div>;

他の要素が存在する状態で末尾に追加したい場合は、innerHTMLに代入するのではなく追記するようにします。

<div class="sec01">
   <h1>タイトル</h1>
</div>

//親要素を取得
let sec01 = document.querySelector(".sec01");

//追加
sec01.innerHTML += "<p>テキスト</p>";

console.log(document.querySelector(".sec01"));
// <div class="sec01">
//   <h1>タイトル</h1>
//   <p>テキスト</p>
// </div>

要素の削除

子要素の削除

element.removeChild(target)

ある要素の子要素を削除するにはremoveChild関数を使います。
引数targetは削除対象の要素で、elementの子要素である必要があります。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

//親要素を取得
let ul =  document.querySelector('ul');

//削除する1番めのli要素を取得
let li1 = ul.children[0];

//li2を削除
ul.removeChild(li1);

console.log(ul);
// <ul>
//     <li>2</li>
//     <li>3</li>
// </ul>

//削除対象のli1を取得
let li1 =  document.querySelector('ul li:nth-child(1)');

//自分自身を削除
li1.parentNode.removeChild(li1);

let ul = document.querySelector('ul')
console.log(ul);
// <ul>
//     <li>2</li>
//     <li>3</li>
// </ul>

子要素をまとめて削除

全ての子要素を削除したい場合はinnerHTMLを使って子要素を空にします。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

// 親要素ulを取得
let ul = document.querySelector('ul');

// ulの子要素全てを削除
ul.innerHTML = '';

console.log(ul); // <ul></ul>

ノードの置換

子ノードの置換

document.replaceChild(newElement, oldElement)

要素の子ノードを別のノードに置き換えます。
引数newChild : 置き換える新しいノード（既存のノードは先に取り除かれます）
引数oldChild ：置き換えられる既存ノード

<div class="sec01">
   <p>テキスト</p>
</div>

// 親要素の取得
let sec01 = document.querySelector('.sec01');

//新たにp要素を生成
let newP = document.createElement('p');
newP.textContent = 'テキスト2';

// 現行の子要素と新たな生成した要素を置換
sec01.replaceChild(newP, sec01.children[0]);

console.log(sec01);
// <div class="sec01">
//     <p>テキスト2</p>
// </div>

その他

配列に変換する

HTMLCollectionは配列に変換することで.forEachを使用できます。

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

// 要素の取得
let sec01 = document.querySelector('ul');

// 子要素の取得
let child = sec01.children;

// 配列に変換
let childAry = Array.from(child);

childAry.forEach(el => {
    console.log(el.textContent) // 1 2 3
});