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

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

JavaScript DOM編 vol.3

<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

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

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

まずは完成版

'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 の前に挿入したいと思います。

手順は

  1. li 0をコピー
  2. コピーした 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!

それではまた次回!