【DOM操作とは】

DOM操作とは

DOM (Document Object Model)は、HTML⽂書の構造を表現するオブジェクトモデル。簡単に言うと、JavaScriptを 使⽤して、HTML要素を操作すること。ボタンを押したら警告が出るとかそういうやつ。

document.getElementById()

特定のIDを持つ要素を取得する。めっちゃよく使う。下の例だと、textの要素を取得してて、そこにinnerHTMLでHTML形式の'今押しましたよね？''をtextに代入してる。だから、このボタンを押さないでくださいから今押しましたよね？にボタン押すと変わる。

<button onclick="changeText()" class="button2">押さないで</button>
        <p id="text">このボタンを押さないでください</p>
        <script>
            function changeText() {
                document.getElementById('text').innerHTML = '今押しましたよね？';//getElementByIdは、任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッド
            }//innerHTMLはhtml要素の中身を変化させることができる
        </script>

document.getElementsByClassName()

特定のクラス名を持つすべての要素を取得する。

const elements = document.getElementsByClassName('myClass'); 
console.log(elements);

document.getElementsByTagName()

特定のタグ名を持つすべての要素を取得する。

const elements = document.getElementsByTagName('p'); 
console.log(elements);

document.querySelector()

指定されたCSSセレクターに⼀致する最初の要素を取得する。

const elements = document.querySelectorAll('.myClass'); 
console.log(elements);

lement.innerHTML

要素のHTML内容を取得または設定する。

const element = document.getElementById('myElement'); 
element.innerHTML = '新しい内容';

element.innerText

要素のテキスト内容を取得または設定する。

const element = document.getElementById('myElement'); 
element.innerText = '新しいテキスト';

element.setAttribute()

要素に新しい属性を追加するか、既存の属性を変更する。setAttributeを使って、新しく作成されたリストに onclick="deleteText()"の属性を追加してる。
下記の書き方をすれば、追加されたリストは<li id="deketeLi">あいうえお<button class ="button6" onclick="deleteText()" type="submit">削除</button></li>
の部分と同じ属性やクラス名になる。

<h2>【演習問題】</h2>
        <form onsubmit = "Submit(event)" id="form"  name="formReset"> <!--//onsubmit="handleSubmit(event)"は定型文として覚えるeventをほかの名前にしちゃだめ名前にしちゃだめ -->
            <input type="text" name="contents" placeholder="名前を⼊⼒してください">
            <button type="submit" >送信</button>
        </form>
        <p id="message"></p>
        <p>送信内容</p>
        <ul id="nameList">
            <li id="deketeLi">あいうえお<button class ="button6"  onclick="deleteText()" type="submit">削除</button></li>
            <li id="deketeLi">かきくけこ<button class ="button6" onclick="deleteText()" type="submit">削除</button></li><!-- onclickはクリックしたらイベント発生 -->
        </ul>

        <script>
            function Submit(event) {
                event.preventDefault(); // デフォルトのフォーム送信(ページを移行する機能）を防ぐ 
                const newNameList = document.createElement('li');//リストの生成
                newNameList.id = 'deketeLi';
                const newbutton = document.createElement('button');//ボタンの生成
                newbutton.innerText = '削除';
                newbutton.setAttribute('onclick', 'deleteText()');//setAttribute メソッドは指定した属性名の属性値に新しい値を設定する
                newbutton.classList.add('button6');
                let inputForm = document.getElementById('form').contents.value;// 入力フォームの内容を取得
                newNameList.innerHTML = inputForm;//newNameListにinputFormの内容を入れる（HTML形式のまま突っ込む）
                newNameList.appendChild(newbutton); // newNameListの子要素としてボタンを追加
                document.getElementById('nameList').appendChild(newNameList);//newNameListをnameListに追加。appendChildは要素を追加できるメソッド
                document.formReset.reset();
                document.getElementById('message').innerHTML = 'フォームが送信されました！';
            }

            function deleteText() {//クリックされたとき、deketeLiのidを持つ要素が削除される
                let li_element = document.getElementById('deketeLi');
                event.target.parentElement.remove();//event.targetはイベント（今回はクリック動作）の発生源の要素である「このボタンを削除」ボタンを指していて、removeメソッドにより要素自身を削除できる
            }

        </script>  

element.getAttribute()

要素の特定の属性の値を取得する。

const element = document.getElementById('myElement'); 
const classValue = element.getAttribute('class'); 
console.log(classValue);

element.appendChild()

要素に新しい⼦要素を追加できる

const parentElement = document.getElementById('parent'); 
const newChild = document.createElement('div'); 
newChild.innerText = '新しい⼦要素'; 
parentElement.appendChild(newChild)

element.removeChild()

要素から指定した⼦要素を削除する。詳細は別のリストページで説明してる。

const parentElement = document.getElementById('parent'); 
const childElement = document.getElementById('child'); 
parentElement.removeChild(childElement);