DOMとは

JavaScriptからHTMLを操作する仕組み。

DOMツリーとは

HTMLの内容をツリー上に表現したもの。
DOMツリー内の各要素のことをノードと呼ぶ。
https://zenn.dev/miumi/articles/2924832e3b3f940f8

WebページのHTMLの情報や要素を確認する

要素の取得

特定のID名を持つノードを指定する

<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>

const target = document.getElementById('main');
console.log(target);
//こんにちは
//さようなら

※documentとは
window.documentというWebブラウザーが標準で用意しているオブジェクトwindowの一部。HTMLを操作するためのもの。windowは省略できる。

HTMLタグ名でノードを取得する

<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>

const target = document.getElementsByTagName('h1');
console.log(target);
//挨拶

※ID指定ではないのでElements部分が複数指定になっている。
getElementsByClassNameも同様。

親ノードと子ノード

<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>

const target = document.getElementById('main');
const fitst = target.firstElementChild;
const last = target.lastElementChild;

console.log(first);
//こんにちは
console.log(last)
//さようなら

formの要素の取得

<body>
    <h1>フォーム要素の取得</h1>

    <form id="form1">
        <input type="text" name="text" placeholder="text">
        <inp0ut type="submit" name="formSubmit" value="submit">
    </form>

<form id="form2">
        <input type="text" name="text" placeholder="text">
        <inp0ut type="submit" name="formSubmit" value="submit">
    </form>

const forms = document.forms;
console.log(forms[0]);
console.log(forms[1]);

セレクターAPI

const targets = document.querySelectorAll('#main > p');
//id = mainの要素の直下のpタグの要素全部取得
const target = document.querySelector('#main > p')
//id = mainの要素の直下のpタグの要素を一個だけ取得

セレクターAPIはdocument.getElementById()に比べて処理が重く、結果が遅くなる傾向。
できるだけdocument.getElementById()を利用する。

DOMの操作

文字列を変える

<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>

//pタグの「こんにちは」を「こんばんは」に変えたい場合

const target = document.getElementById('main').firstChild;
console.log(target.textContent);
//こんにちは
target.textContent = 'こんばんは';
console.log(target.textContent);
//こんばんは

CSSのプロパティを変更する

<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>

const target = document.getElementById('main'),firstElementChild;

target.style.fondSize = '.5em';
target.style.border = '1px solid';

要素の削除、追加

削除

<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>

const target = document.getElementById('main').firstElementChid;
target.parentNode.removeChild(target);
//ターゲットを指定。ターゲットの親要素がremoveChildしている扱いにする。

やっていること:
「削除したい要素」の「親要素」の「子の中」の「削除したい要素」を削除する。

回りくどいがjavaScriptの仕様なので仕方ない。

要素の追加

//要素の作成
const element = document.createElement('p');
element.textContent = 'これは追加された要素です';

//要素の追加
const target = documen.getElementById('main')
target.appendChild(element);

イベント処理

イベントとは
「何かしらのきっかけ　= イベント」
・ユーザーがあるボタンを押した時にダイアログを表示する
・あるテキストフォームにフォーカスしたタイミングで動かしたい処理があるとする

<body>
    <h1>挨拶</h1>
    <div id="main">
        <p>こんにちは</p>
        <p>さようなら</p>
    </div>
</body>

const target = document.getElementById('main').firstElementChild;
target.addEventListener('click', () => {
    target.textcontent = 'クリックされました';
});

addEventListenerは第一引数にイベント、第二引数にイベントによって実行される処理を書いた関数を指定する

イベントの伝播

イベントを伝播させたくない場合、

addEventListenerの第二引数に指定する関数を引数に取り、仮にその引数をe(イベントの頭文字)とするならば

e.stopPropagation()

という処理を行うことで伝播をストップさせることができる。