JavascriptでWebアプリ的な物を作成するときに、「JavascriptでHTMLの操作をする」ということがあります。
このブログの記事では、下記の投稿で作成した「ロト6＆ロト7買目選択ボタン（乱数発生ボタン）」、「日時表示の時計」もHTMLの操作を行っています。
HTML操作をする時の基本について備忘録として記事を投稿しておきます。
今回の記事は、「操作する対象のHTMLの要素の取得の仕方」についてです。
javascriptで下記のHTMLの要素を取得することをしていきます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ゆるごけさんの To Do List</title>
</head>
<body>
<h1>ゆるごけさんの To Do List</h1>
<div id="main" class="main2">
<p>今日はブログを頑張りました。</p>
<p>明日はWebデザインを頑張ります。</p>
</div>
</body>
</html>IDの取得 ・・・ document.getElementById(‘ID名’)
id属性のついている要素を取得する時は、「document.getElementById(‘ID名’)」を使用します。
下記の場合は、「main」というIDのついたdiv要素を取得して、「main」という名前の変数に代入しています。
<script>
window.onload = function(){
var main = document.getElementById('main');
console.log(main);
}
</script>console.log(main)で、そのdiv要素をコンソールに表示しています。
コンソールを見てみると・・・
<div id="main" class="main2">
<p>今日はブログを頑張りました。</p>
<p>明日はWebデザインを頑張ります。</p>
</div>と表示されます。
Classの取得 ・・・ document.getElementsByClassName(‘Class名’)
Class属性のついている要素を取得する時は、「document.getElementsByClassName(‘class名’)」を使用します。
getElementsByClassName・・・ｓ を忘れないように（※idと異なり、同一class名のclassは、同一webページ上に複数おけるので。）
下記の場合は、「main2」というClass名のついたdiv要素を取得して、「main2」という名前の変数に代入しています。
<script>
window.onload = function(){
var main2 = document.getElementsByClassName('main2');
console.log(main2);
}
</script>コンソールには
HTMLCollection [div#main.main2, main: div#main.main2]と「配列」の形で表示されます。
配列になっているので・・・
<script>
window.onload = function(){
var main2 = document.getElementsByClassName('main2');
console.log(main2[0]);
}
</script>上記のようにconsole.log(main2) に配列番号[0]を入れて、console.log(main2[0]) とすると・・・
<div id="main" class="main2">
<p>今日はブログを頑張りました。</p>
<p>明日はWebデザインを頑張ります。</p>
</div>と、 getElementById() の時と同じようにdiv要素がコンソールに表示されます。
タグ（要素）の取得 ・・・ document.getElementsByTagName(‘タグ名’)
特定のタグ要素を取得する時は、「document.getElementsByTagName(‘タグ名’)」を使用します。
getElementsByTagName・・・ｓ を忘れないように（同一タグも、同一webページ上に複数おけるので。）
下記の場合は、div要素を取得して、「div」という名前の変数に代入しています。
<script>
window.onload = function(){
var div = document.getElementsByTagName('div');
console.log(div);
}
</script>コンソールには、getElementsByClassNameの時と同じように
HTMLCollection [div#main.main2, main: div#main.main2]と「配列」の形で表示されます。
配列になっているので、
<script>
window.onload = function(){
var div = document.getElementsByTagName('div');
console.log(div[0]);
}
</script>上記のようにconsole.log(div) に配列番号[0]を入れて、console.log(div[0]) とすると・・・
<div id="main" class="main2">
<p>今日はブログを頑張りました。</p>
<p>明日はWebデザインを頑張ります。</p>
</div>と、 div要素がコンソールに表示されます。
親要素を取得・・・parentElement
親要素を取得するには「parentElement」を使用します。
変数「parent」に変数「main」（div id=”main”）の親要素（body）を取得して代入します。
<script>
window.onload = function(){
var main = document.getElementById('main');
var parent = main.parentElement;
console.log(parent);
}
</script>コンソールには
<body>
<h1>ゆるごけさんの To Do List</h1>
<div id="main" class="main2">
<p>今日はブログを頑張りました。</p>
<p>明日はWebデザインを頑張ります。</p>
</div>
</body>と表示されます。
一番最初の子要素を取得・・・firstElementChild
一番最後の子要素を取得・・・lastElementChild
一番最初の子要素を取得するには「firstElementChild」、 一番最後の子要素を取得するには「lastElementChild」 を使用します。
変数「first」に変数「main」（div id=”main”）の 一番最初の子要素 （<p>今日はブログを頑張りました。</p>）を取得して代入します。
変数「last」に変数「main」（div id=”main”）の 一番最後の子要素 （<p>明日はWebデザインを頑張ります。</p>）を取得して代入します。
<script>
window.onload = function(){
var main = document.getElementById('main');
var first = main.firstElementChild;
console.log(first);
var last = main.lastElementChild;
console.log(last);
}
</script>コンソール「console.log(first)」には下記のように表示されます。
<p>今日はブログを頑張りました。</p>コンソール「console.log(last)」には下記のように表示されます。
<p>明日はWebデザインを頑張ります。</p>兄弟要素の次の要素を取得・・・nextElementSibling
兄弟要素の前の要素を取得・・・previousElementSibling
兄弟要素（同じ階層にある要素）の次の要素を取得するには「nextElementSibling」、兄弟要素（同じ階層にある要素）の前の要素を取得するには「previousElementSibling」を使用します。
変数「first」に変数「main」（div id=”main”）の 一番最初の子要素 （<p>今日はブログを頑張りました。</p>）を取得して代入します。 変数「next」に変数「first」の次の要素（ <p>明日はWebデザインを頑張ります。</p> ）を取得して代入します。
変数「last」に変数「main」（div id=”main”）の 一番最後の子要素 （<p>明日はWebデザインを頑張ります。</p>）を取得して代入します。変数「prev」に変数「last」の前の要素（ <p>今日はブログを頑張りました。</p> ）を取得して代入します。
<script>
window.onload = function(){
var main = document.getElementById('main');
var first = main.firstElementChild;
var next = first.nextElementSibling;
console.log(next);
var last = main.lastElementChild;
var prev = last.previousElementSibling;
console.log(prev);
}
</script>
コンソール「console.log(next)」には下記のように表示されます。
<p>明日はWebデザインを頑張ります。</p>コンソール「console.log(prev)」には下記のように表示されます。
<p>今日はブログを頑張りました。</p>以上、基本的な要素の取得方法について、基本的なところとなります。
取得した要素の操作についてはまた別記事で投稿します。
