DOMとは
Document Object Modelの略。
htmlを読み込んだ後にDOMと呼ばれるTree構造のデータが作られ、その内容に応じてWebページが描画される。
DOMをjavascriptで操作することで、さまざまな機能を実装することができる。
htmlの見た目の操作はCSS、動きの操作はjavascriptというように使い分けをする。
ドキュメント要素を取得する方法
①属性や要素から取得
| 項目 | 説明 |
|---|---|
| getElementById | id属性から要素を取得 |
| querySlector | 1つの要素を取得 |
| querySlectorAll | 複数の要素を取得 |
使用例
<!-- html -->
<body>
<h1 id="target">あいさつ</h1>
<p>こんにちは</p>
<p>こんにちは</p>
<p>こんにちは</p>
<script src="js/main.js"></script>
</body>
//javascript
//id属性で取得
const target = document.getElementById("target");
//複数の要素を取得
const target = document.querySelectorAll("p")[1]; //p要素の２番目の要素を取得
②階層関係から要素を取得
| 項目 | 説明 |
|---|---|
| childNodes | 子ノード全てを取得 |
| children | 子ノードのテキストノード以外を取得 |
| firstChild | 最初の子ノードを取得 |
| lastChild | 最後の子ノードを取得 |
| firstElementChild | 最初の要素ノードだけ取得 |
| lastElementChild | 最後の要素ノードだけ取得 |
| parentNode | 親ノードを取得 |
| previousSibiling | １つ前の兄弟ノードを取得 |
| nextSibiling | 1つ後の兄弟ノードを取得 |
使用例
<!-- html -->
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
//javascript
//ulの子ノード全て取得
ul.childNodes
要素を操作する方法
| 項目 | 説明 |
|---|---|
| createElement | 要素を作成する |
| appendChild | 要素を追加する |
| cloneNode(true) | 要素をコピーする |
| insertBefore(a, b) | aをbの前に挿入する |
| 親Node.removeChild(削除するNode) | 要素を削除する |
使用例
<!-- html -->
<body>
<ul>
<li>item 0</li>
<li>item 1</li>
</ul>
<script src="js/main.js"></script>
</body>
//javascript
document.querySelector("button").addEventListener("click",()=>{
//要素を追加する
const item2 = document.createElement("li"); //要素を作成
item2.textContent = "item2"; //要素の中身を記述
const ul = document.querySelector("ul"); //ul要素を取得
ul.appendChild(item2); //ul要素の後にitem2の要素を追加
//要素をコピーして挿入する
const item0 = document.querySelectorAll("li")[0]; //li要素の1番目を取得
const copy = item0.cloneNode(true); //item0をコピーする
const ul = document.querySelector("ul"); //ul要素を全て取得する
const item2 = document.querySelectorAll("li")[1]; //li要素の2番目を取得
ul.insertBefore(copy, item2); //copyをitem2の前に挿入する
//要素を削除する
const item1 = document.querySelectorAll("li")[1];
document.querySelector("ul").removeChild(item1); //item要素を削除する
});
イベントで操作する方法
| 項目 | 説明 |
|---|---|
| addEventListener | イベントを取得して操作 |
使用例
<!-- html -->
<body>
<button>Run</button>
<h1 id="target" class = "my-border">あいさつ</h1>
<p>こんにちは</p>
<script src="js/main.js"></script>
</body>
//javascript
//buttonがクリックされたら、target要素のtext内容を変更
document.querySelector("button").addEventListener("click",()=>{
document.getElementById("target").textContent = "Changed!";
});
イベントの種類
| 項目 | 説明 |
|---|---|
| click | clickした時にイベント発生 |
| dblclick | double clickした時にイベント発生 |
| mousemove | マウスを動かした時にイベント発生 |
| keydown | キーを打った時にイベント発生 |
| forcus | formなどにフォーカスを当てた時にイベント発生 |
| blur | formなどからフォーカスを外した時にイベント発生 |
| input | formなどに文字が入力された時にイベント発生 |
| chnage | formなどで更新が確定された時にイベント発生 |
| submit | buttonを押した時にイベント発生 |
使用例
//javascript
//buttonをダブルクリックした時にconcoleに"Double Clicked!"と表示
document.querySelector('button').addEventListener('dblclick', () => {
console.log('Double Clicked!');
});
//左上を基準にマウスのx,y位置をconsoleに表示
document.addEventListener('mousemove', e => {
console.log(e.clientX,e.clientY);
});
//打ったキー名をconsoleに表示
document.addEventListener("keydown",e => {
console.log(e.key);
});
クラスで操作する方法
| 項目 | 説明 |
|---|---|
| classList.add | クラスを追加で設定する |
| classList.remove | クラスの設定を削除する |
| classList.contain | クラスを含まれているか判定する |
| classList.toggle | クラス設定のon/offを切り替える |
使用例
<!-- html -->
<head>
<!-- 省略 -->
<style>
li{
cursor: pointer;
}
li.done{
text-decoration: line-through;
}
</style>
</head>
<body>
<ul>
<li>Todo</li>
<li>Todo</li>
<li>Todo</li>
</ul>
<body>
//javascript
//li要素をクリックをすることで、取り消し線が入ったり外れたりする
document.querySelector("li").addEventListener("click",e=>{
if(e.target.nodeName ==="LI"){
e.target.classList.toggle("done");
}
});