JavaScript DOM要素の操作
JavaScript備忘録 Vol.12
目次
- 要素の操作
- 複数の要素を取得
- 要素の取得方法
- addEventListner( )
今回もJavaScriptの記事になっています。
まだオブジェクト編は残っていますが、今回はDOMの操作を見ていきます。
要素の操作
まずは最初の段階のindex.htmlとmain.jsの中身です
index.html
<!DOCTYPE html> <html lang = 'ja'> <head> <meta charset="utf-8"> <title>JavaScript DOMPractice</title> </head> <body> <script src='js/main.js'></script> </body> </html>
js/main.js
'use strict' { }
ではまず、HTMLに要素を追加していきます。
<body> <h1>男子プログラマーになりたいやつ</h1> <p>JavaScript.JavaScript.JavaScript</p> <p>React.React.React</p> <p>JQuery.JQuery.JQuery</p> <script src='js/main.js'></script> </body>
ブラウザに表示するとこんな感じですね。
では、h1要素をいたずらしてみましょう。
'use strict' { document.querySelector('h1').textContent = '男子プログラマーになりかけのやつ'; }
ブラウザをリロードすると表示が変わってますね。
もう少しわかりやすくするために関数にして3秒後に変化する様にしてみましょう。
{ function upDate(){ document.querySelector('h1').textContent = '男子プログラマーになりかけのやつ'; } setTimeout(upDate, 3000); }
upDateという関数にし、その下でsetTimeout( )関数を呼び出しています。
第一引数のupDateは関数の呼び出し、第二引数の3000は3000msを意味しています。
したがって、ブラウザのリロードから3000ms後にupDate関数を呼び出す、という記述ですね。
document.getSelector( )はよくCSSで使われるセレクタも指定できるのですが、
JavaScriptではHTMLの要素にidを記述し、それを指定する方法がよく使われます。
どういうことかというと
<h1 id='target'>男子プログラマーになりたいやつ</h1>
この様に要素にidを振ってあげます。
JavaScriptの方は
document.querySelector('#target').textContent = '男子プログラマーになりかけのやつ';
とすることもできますし、
別の書き方で
document.getElementById('target').textContent = '男子プログラマーになりかけのやつ';
と書くこともできます。
getElementById( )も比較的よく使われる表現です。
複数の要素を取得
ではベースは先ほどのコードのままで、次はp要素も操作していきましょう。
先ほどと同じ様にやってみると
{ function upDate(){ document.querySelector('p').textContent = 'Ruby.Ruby.Ruby.'; } setTimeout(upDate, 3000); }
コードはこうなりますよね。
しかし、結果は...
最初の1行しか変わっていません。
実はquerySelectorを用いてpとしても、最初の一つ目しか取得することができません。
ではどうすれば全てに適用できるでしょうか
手順をみていきます。
まず
{ function upDate(){ document.querySelectorAll('p')[2].textContent = 'Ruby.Ruby.Ruby.'; } setTimeout(upDate, 3000); }
querySelectorAllを使い、('p')を指定することで全てのp要素のDOM情報を取得します。
配列と同じ様に[2]とすることで3番目の要素を取得することができます。
配列と同じ様に扱うことができるので、ここでforEach( )を使うことができます。
p要素のtextContentを全て変えてみましょう。
{ function upDate(){ const texts = document.querySelectorAll('p'); texts.forEach(text =>{ text.textContent = 'Ruby.Ruby.Ruby.' }) } setTimeout(upDate, 3000); }
1.document.getElementById('p')としてp要素を全て取得し、textsという定数に代入します。
2.textsは配列になっているのでここにforEach( )を回していきます。
3.引数をtextと単数にして
4.それぞれのtextContentを変更しています。
結果はこうですね。
さらに、引数をもう一つ追加して
function upDate(){ const texts = document.querySelectorAll('p') texts.forEach((text, index) =>{ text.textContent = `${index}番目のpだよ` }); } setTimeout(upDate, 3000);
それぞれの要素をtext、その順番をindexという引数で渡すことで
こんな感じにもできます。
要素の取得方法
次は色んな取得方法をみていきます。
id属性がついている => getElementById( ) // idで取得 一つの要素を取得する => querySelector( ) // idやセレクタを指定 複数の要素を取得する => querySelectorAll( ) // 指定した全ての要素 その他 => getElementByClassName( ) // クラス名で指定 => getElementByTagName( ) // タグで指定
などがあります。
また、DOMツリーの階層関係から取得する方法もあります。
例えば
<ul> <li>ToDo1</li> <li>ToDo2</li> <li>ToDo3</li> </ul>
こんなHTMLがあったとしましょう。
ulの子Nodeを取得したい場合には
ul.childNodes
としてあげることで子Nodeを全て取得することができます。
ここで一点注意なのですが、子Nodeにはli要素などの要素Nodeの他に、改行や空白を表すテキストNodeも含まれています。
したがって子要素のみを取得した場合には
ul.children
とします。
さらに、最初の子Nodeや最後の子Nodeを指定することもできます。
その場合には
firstChild //最初の子Node lastChild //最後の子Node firstElementChild //最初の子要素Node lastElementChild //最後の子要素Node
としてあげることができます。
また、親Nodeを指定したい場合には
li.parentNode
としてあげることで親Nodeを指定することができます。
兄弟Nodeを取得したい場合には
previousSibling //一つ前の兄弟 nextSibling //一つ後の兄弟
とします。
ここでも要素Nodeだけを取得するのであれば
previousElementSibling //一つ前の兄弟の要素Node nextElementSibling //一つ後の兄弟の要素Node
とします。
addEventListner( )
これは割と実践的ですね。
ベースとなるコードです。
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> <script src='js/main.js'></script> </body> </html>
js/main.js
'use strict' { function upDate(){ document.getElementById('target').textContent = '男子プログラマーになりかけのやつ' } setTimeout(upDate, 3000); }
内容はさっきやったブラウザをリロードしたら3秒後にテキストが変わるというやつですね。
ではこれをちょっといじっていきましょう。
まずはHTMLにボタンを追加します
<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>
button要素を作り、idを振っておきます。
ブラウザで見るとボタンができてますね。
JavaScriptの方を触っていきましょう。
function upDate(){ document.getElementById('target').textContent = 'Chaaaaaaange!!!!' } const btn = document.getElementById('btn'); btn.addEventListener('click', () => { upDate(); })
処理を見ていきましょう。
setTimeoutの3000は消しました。
1.function upDate( )関数の処理はさっきと同じですね。わかりやすい様にボタン押下後に出力される文字を変更しました。
2.まず、idが'btn'の要素を取得してbtnという定数に入れます。
3.addEventListener( )として第一引数にclickというイベントを指定し、第二引数にアロー関数で処理を渡します。
4.今回の場合はupDate( )としてupDate関数を呼び出しています。
JSってこういうのが面白いですよね。
今回はここまで
次回は・・・まだまだJS！
それではまた次回！
