JavaScriptのDOM（Document Object Model）とは、HTMLやXML文書をオブジェクトとして表現し、
JavaScriptなどのスクリプト言語からアクセス・操作できるようにする仕組みです。
DOMは、ウェブページのコンテンツの構造をツリー構造で表し、JavaScriptからこのツリーにアクセスすることで、
ページの要素を動的に変更したり、イベントを登録したりすることができます。
要素の取得
要素の生成・追加・削除
要素の属性の設定
指定されたidが一致する要素を返すDocument.getElementById(id)
【html】
<div id="divid"></div>
【javascript】
const divid = document.getElementById("divid");
console.log(divid);
【 実行結果】
<div id="divid"></div>
指定されたクラス名に一致するすべての要素を返すDocument.getElementsByClassName(name)
【html】
<p class="test">test1</p>
<div class="test">test2</div>
【javascript】
const test = document.getElementsByClassName("test");
console.log(test);
【 実行結果】
HTMLCollection(2) [p.test, div.test]
HTMLCollectionに複数の要素が格納された状態で取得できるので
test[0]、test[1]で取得する
指定されたタグ名に一致するすべての要素を返すDocument.getElementsByTagName(name)
【html】
<p>test1</p>
<p>test2</p>
【javascript】
const test = document.getElementsByTagName("p");
console.log(test);
【 実行結果】HTMLCollection(2) [p, p]
HTMLCollectionに複数の要素が格納された状態で取得できるので
test[0]、test[1]で取得する。
指定されたセレクターに一致する最初の要素を返すDocument.querySelector(selector)
【html】
<div id="id1" class="class1"></div>
<p id="id1" class="class1"></p>
【javascript】
const div = document.querySelector("div");
const id = document.querySelector("#id1");
const class = document.querySelector(".class");
console.log(div);
console.log(id);
console.log(class1);
【 実行結果】※一致した最初の要素を返す
<div id="id1" class="class1"></div>
<div id="id1" class="class1"></div>
<div id="id1" class="class1"></div>
指定されたセレクターに一致するすべての要素を返すDocument.querySelectorAll()
【html】
<div id="id1" class="class1"></div>
<p id="id1" class="class1"></p>
【javascript】
const div = document.querySelectorAll("div");
const id = document.querySelectorAll("#id1");
const class1 = document.querySelectorAll(".class1");
console.log(div);
console.log(id);
console.log(class1);
【 実行結果】
HTMLCollectionに複数の要素が格納された状態で取得できるので要素の添え字で指定する。
例）div[0]、id[1]、claas1[1]
引数で指定した要素を作成する
【html】
なし
【javascript】
const div2 = document.createElement("div");
div2.textContent = "div add" ;
console.log(div2);
【 実行結果】
<div>div add</div>
指定した親ノードに対して、子ノードの末尾に要素を追加する要素の追加 Node.appendChild()
【html】
なし
【javascript】
const ul = document.createElement("ul");
const li = document.createElement("li");
li.textContent = "test";
ul.appendChild(li);
console.log(ul);
document.body.appendChild(ul);
【 実行結果】
<ul><li>test</l最後i></ul>
指定した要素を削除するelement.remove()
【html】
<div id="remove1">
<p id="remove2">test</p>
</div>
【javascript】
const remove1 = document.getElementById("remove1");
const remove2 = document.getElementById("remove2");
remove2.remove();
console.log(remove1);
【 実行結果】
<div id="remove1"></div>
指定した親要素の子要素を削除するelement.removeChild(element)
【html】
<div id="remove1">
<p id="remove2">test</p>
</div>
【javascript】
const remove1 = document.getElementById("remove1");
const remove2 = document.getElementById("remove2");
remove1.removeChild(remove2);
console.log(remove1);
【 実行結果】
<div id="remove1"></div>
HTMLコンテンツの取得と書き込みinnerHTML
【html】
<p>text<p>
【javascript】
const divid = document.getElementById("divid");
divid.innerHTML = "<h1>Hello!!</h1>" ; //HTMLの書込み
console.log(divid.innerHTML); //HTMLの取得
【 実行結果】
<h1>Hello!!</h1>
要素のテキスト設定textContent
【html】
<p>text</p>
【javascript】
const pid = document.createElement("p");
pid.textContent = "text";
要素の属性設定id,class,type,name,valueなど
【html】
<input type="checkbox" name="r1" checked>
【javascript】
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "r1";
checkbox.checked = true; //trueまたはfalseの場合
要素のstyle属性設定style
【html】
<p style="font-size:14pt;color:#000000;background-color:#ffffff">text</p>
【javascript】
const pid = document.createElement("p");
pid.textContent = "text";
pid.style.fontSize = "14pt";
pid.style.color = "#000000";
pid.style.backgroundColor = "#ffffff";
※スタイルはJavaScriptのプロパティとして設定します。 要素のイベント属性設定
【html】
<input type="button" value="開始" onclick="go()">
【javascript】
const inputid = document.createElement("input");
inputid.type = "button" ;
inputid.value = "開始" ;
inputid.onclick = function() { go() ; } ;
※通常はイベントリスナーを設定することが推奨されます。 |