ccc
こんにちわ！東京都内でサラリーマンをしているAI・育児ブロガーのCCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。
JavaScriptからDOMを使う方法を教えてください。
ccc
JavaScriptはクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。
ccc
今回はJavaScriptの使い方として、JavaScriptからDOMを使う方法をサンプルを用いて解説します。
DOMとは
DOMは”Document Object Model”の略で、JavaScriptを使ってHTMLやXMLを取り扱うための仕組みです。Webページに含まれる要素をオブジェクトとして扱い、テキストや要素のプロパティ値を変更したり、ユーザアクションに応じた処理を追加したりすることができます。DOMではドキュメントを構成する要素オブジェクトを要素ノードと呼びます。
ID属性から要素ノードを取得
getElementById()は引数にID属性の値を指定して、要素ノードを取得するメソッドです。戻り値は要素オブジェクトで、要素が見つからないときはNullを返します。
次の例ではtemp要素ノードをgetElementByIdメソッドで取得し、textContentプロパティに新しい値を代入することで、temp要素のテキストを変更しています。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementById("temp");
e.textContent="クリックされました";
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<p id="temp">Hello World from JavaScript</p>
</body>
</html>class属性から要素ノードを取得
getElementsByClassName()は引数にclass属性の値を指定して、要素ノードを取得するメソッドです。戻り値はHTMLCollectionオブジェクトです。HTMLCollectionオブジェクトは複数の要素ノードで構成された配列です。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementsByClassName("temp");
e[0].textContent="クリックされました1";
e[1].textContent="クリックされました2";
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<p class="temp">test1</p>
<p class="temp">test2</p>
</body>
</html>タグ名から要素ノードの子孫ノードを取得
getElementsByTagName()は要素ノードの子孫ノードを取得するメソッドです。引数には取得したい子孫ノードのタグ名を指定します。戻り値はHTMLCollectionオブジェクトです。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementById("temp");
let e2=e.getElementsByTagName("p");
e2[0].textContent="クリックされました1";
e2[1].textContent="クリックされました2";
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<div id="temp">
<p>test1</p>
<p>test2</p>
</div>
</body>
</html>
class属性から要素ノードの子孫ノードを取得
getElementsByClassName()は要素ノードの子孫ノードを取得するメソッドです。引数には取得したい子孫ノードのclass属性の値を指定します。戻り値はHTMLCollectionオブジェクトです。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementById("temp");
let e2=e.getElementsByClassName("temp2");
e2[0].textContent="クリックされました1";
e2[1].textContent="クリックされました2";
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<div id="temp">
<p class="temp2">test1</p>
<p class="temp2">test2</p>
</div>
</body>
</html>取得した要素ノードの数を取得
lengthプロパティで取得した要素ノードの数を取得できます。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementById("temp");
let e2=e.getElementsByClassName("temp2");
for(let i=0; i < e2.length; i++){
e2[i].textContent=e2[i].textContent+"is checked";
}
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<div id="temp">
<p class="temp2">test1</p>
<p class="temp2">test2</p>
</div>
</body>
</html>ラジオボタンの選択状態の有無を取得
checkedプロパティでラジオボタンの選択状態の有無をtrueまたはfalseで取得できます。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementById("temp");
let e2=e.getElementsByClassName("temp2");
let e3=document.getElementById("temp3");
if(e2[0].checked)e3.textContent=e2[0].value+" is checked";
if(e2[1].checked)e3.textContent=e2[1].value+" is checked";
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<form id="temp">
<input type="radio" name="radio" class="temp2" value="test1">test1
<input type="radio" name="radio" class="temp2" value="test2" checked>test2
<p id="temp3">Hello World from JavaScript</p>
</form>
</body>
</html>要素ノードの属性情報を変更
要素の属性の値を変更するには、”要素ノード.属性名”の形式で新しい値を代入します。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementById("temp");
e.href="https://google.co.jp/";
e.textContent="google.co.jp";
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<a id="temp" href="https://google.com/">google.com</a>
</body>
</html>要素内のHTMLを取得する
outerHTML(またはinnerHTML)プロパティから要素内のHTMLを取得できます。outerHTMLプロパティは親ノードのHTMLを含めて子孫ノードのHTMLを取得します。innerHTMLは親ノードのHTMLを含めません。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementById("temp");
console.log(e.outerHTML);
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<div id="temp">
<p>test1</p>
<p>test2</p>
</div>
</body>
</html>コンソールの出力結果は次のようになります。
<div id="temp">
<p>test1</p>
<p>test2</p>
</div>要素内のHTMLを書き換える
outerHTML(またはinnerHTML)プロパティに新しいHTMLを代入すると、要素内のHTMLを書き換えることができます。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
let e=document.getElementById("temp");
e.outerHTML="<div id=\"temp\"><p>test3</p></div>";
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test();">
<div id="temp">
<p>test1</p>
<p>test2</p>
</div>
</body>
</html>