JavaScript カスタムデータ属性、要素の追加・複製挿入・削除

<a class="keyword" href="http://d.hatena.ne.jp/keyword/JavaScript">JavaScript</a> DOM編 vol.3 f:id:TomozQ:20201116221020j:plain

JavaScript備忘録 Vol.14

今回もJavaScriptの記事になっています。

カスタムデータ属性

まずは最初の段階のindex.htmlとmain.jsの中身です

index.html

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <h1 id='target'>プログラマー</h1>
    <p>JavaScript.JavaScript.JavaScript.</p>
    <p>React.React.React.</p>
    <p>JQuery.JQuery.JQuery.</p>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

js/main.js

'use strict'

{
  function upDate(){
    const target = document.getElementById('target');
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

f:id:TomozQ:20201116220127p:plain

ではまず、h1の値を英語で出力してみます

function upDate(){
  const target = document.getElementById('target');
  target.textContent = 'Programer';
}

f:id:TomozQ:20201116220042g:plain target.textContentとしてProgramerを出力してあげる処理ですね。

ここで

この英訳するという処理ですが、こんな書き方もできます。

HTMLでは、'data-'から始めることで独自の属性をつけることができます。

今回の場合だと...

<h1 id='target' data-transration='Programer'>プログラマー</h1>

と書きます。

これをJavaScriptで操作するには...

target.textContent = target.dataset.translation;

この様に書いてあげればOKです。

target.textContent = target.data-translation;

とは書かないことに注意しましょう。

f:id:TomozQ:20201116220042g:plain

要素の追加

次は要素を追加する方法をみていきましょう。

最初はこんな感じ

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <ul>
      <li>li 0</li>
      <li>li 1</li>
    </ul>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

f:id:TomozQ:20201116220113p:plain

新たにli要素を作る
li要素の中身のテキストを作る
親要素に対し、子要素の末尾に追加する

この手順でやっていきます。

まずは完成版

'use strict'

{
  function upDate(){
    const li2 = document.createElement('li');
    li2.textContent = 'li 2';
    const ul = document.querySelector('ul');
    ul.appendChild(li2);
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

細かく見ていきましょう

1.li要素を作る

const li2 = document.createElement('li');

createElement('li')とすることでli要素を作り、li2という定数に入れます。

2.li要素の中身のテキストを作る

li2.textContent = 'li 2';

textContentとして中身のテキストをli 2とします。

3.親要素に対し、子要素の末尾に追加する

最後に親要素に追加するのですが、いくつか手順を踏みます。

const ul = document.querySelector('ul');

document.querySelector('ul')として、ul要素を取得し、ulという定数に代入します。

ul.appendChild(li2);

ul.appendChild(li2)とすることで親要素のulの子要素末尾にli2を追加することができます。
f:id:TomozQ:20201116220021g:plain

要素の複製・挿入

次は要素を複製して任意の場所に挿入する方法を見ていきましょう。

HTMLには li 2 を追加し

<!DOCTYPE html>
<html lang = 'ja'>
  <head>
    <meta charset="utf-8">
    <title>JavaScript DOMPractice</title>
  </head>
  <body>
    <ul>
      <li>li 0</li>
      <li>li 1</li>
      <li>li 2</li>
    </ul>
    <button id='btn'>Button</button>
    <script src='js/main.js'></script>
  </body>
</html>

JavaScriptはこんな状態

'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

現在の画面はこんな感じですね。 f:id:TomozQ:20201116220102p:plain

今回は li 0 をコピーして li 2 の前に挿入したいと思います。

手順は

li 0をコピー
コピーした li 0 を li 2 の前に追加

完成版

'use strict'

{
  function upDate(){
    const li0 = document.querySelectorAll('li')[0];
    const copy = li0.cloneNode(true);

    const ul = document.querySelector('ul');
    const li2 = document.querySelectorAll('li')[2];

    ul.insertBefore(copy, li2);
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

見ていきましょう。

1.li 0をコピー

const li0 = document.querySelectorAll('li')[0];

querySelectorAll('li')でli要素を全て取得し[0]として0番目を指定し、li0という定数に代入します。

const copy = li0.cloneNode(true);

cloneNode(true)とすることでli.0をコピーし、copyという定数に代入します。
ちなみにcloneNode(false)とすると空のli要素が作られます。

2.コピーした li 0 を li 2 の前に追加

const ul = document.querySelector('ul');
const li2 = document.querySelectorAll('li')[2];

まずは今までと同じ様に、ul要素とli要素の2番目を取得します。

ul.insertBefore(copy, li2);

f:id:TomozQ:20201116220003g:plain
insertBefore(何を,どこに)とすることで挿入することができます。

今回の場合は

ul要素のli2の直前にcopyを挿入するといった処理ですね。

要素の削除

次は要素を削除する方法を見ていきましょう。

HTMLはそのまま、JavaScriptは元に戻します。

'use strict'

{
  function upDate(){
    
  }

  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => {
    upDate();
  })
}

削除は簡単

今回は li 1 を消してみます。

function upDate(){
  const li1 = document.querySelectorAll('li')[1];
  li1.remove();
}

定数li1として要素を取得し、remove( )としてあげるだけです。 f:id:TomozQ:20201116215949g:plain

また

一部のブラウザではこの方法が使えない場合もあるので

function upDate(){
  const li1 = document.querySelectorAll('li')[1];
  const ul = document.querySelector('ul');

  ul.removeChild(li1);
}

親Node.removeChild(削除するNode)とする書き方もあります。

どちらも覚えておくといいかもしれませんね。

今回はここまで

次回は・・・まだまだJS！

それではまた次回！

男子プログラマーになりたいやつ

未経験から一端のエンジニア目指し日々勉強中です。