Jump to the content

DOMを再入門して理解を深める 【操作編】

JavaScript

    どうも、イソップです。

    DOMについての連載第6回目です。

    今回はDOMの作成や取得後の操作方法について紹介します。

    ノードの作成

    ノードを新規に作成する場合、Documentオブジェクトの createElement メソッドを使用します。
    また、テキストを設定するには、createTextNode メソッドで、テキストノードを作成して、要素ノードに追加します。
    他にも、createComment メソッドでコメントノードも作成できます。

    var div = document.createElement('div');
    var text = document.createTextNode('foo');
    var comment = document.createComment('== div ==');
    

    ノードの追加

    作成したノードをHTMLに追加するには、appendChild メソッド、insertBefore メソッドを使用します。

    appendChild メソッドは、そのノードの直下末尾に、引数で指定したノードを追加します。
    beforeChild メソッドは、そのノードの直下先頭に、引数で指定したノードを追加します。

    どちらも、ノードの中に挿入される、という点が重要です。

    var div = document.createElement('div');
    var text = document.createTextNode('foo');
    document.body.appendChild(div);
    div.appendChild(text)
    
    var comment = document.createComment('== div ==');
    div.insertBefore(comment);
    

    上記の例では、次のような操作をしています。

    1. div要素を作成
    2. テキスト「foo」を作成
    3. body直下にdivを追加
    4. divにテキストを追加
    5. コメントを作成
    6. divの先頭にコメントを追加

    ノードを追加すると、すぐにHTMLに反映されます。

    ノードの属性、内容を変更

    ノードの属性を変更するには、ノードのプロパティの値を書き換えます。

    var div = document.createElement('div');
    
    div.id = 'myDiv';
    div.className = 'active';
    div.style.display = 'inline-block';
    

    idやクラスの指定、スタイルなどの指定が可能です。

    innerHTML

    createElementappendChild って、なんか回りくどくて面倒ですよね。
    そんな時は innerHTML プロパティを使うと、簡潔に内容を書き換えることが出来ます。

    innerHTMLプロパティに設定された文字列は解析され、得られるノードをその要素の子要素として設定します。

    var myDiv = document.getElementById('myDiv');
    myDiv.innerHTML = '<p>Hello World!</p>';
    

    設定する文字列にはタグを含めることが出来ます。これがそのまま子要素になるイメージです。

    innerHTML はプロパティなので、内容の取得も可能です。

    var content = myDiv.innerHTML;
    

    textContent

    textContent プロパティはinnerHTMLとは違い、子要素まで含めてテキスト部分だけを取得・設定することが出来ます。 注意すべきは、文字列を設定すると、子要素は全て削除されて、テキストに置き換わります。

    var myDiv = document.getElementById('myDiv');
    myDiv.textContent = '<p>Hello World!</p>'; // タグはそのまま文字列で出力される
    

    ノードの置換

    ノードを置換するには、replaceChild メソッドを使用します。

    var div = document.createElement('div');
    var oldDiv = document.getElementsByTagName('div')[0];
    var parent = oldDiv.parentNode;
    
    parent.replaceChild(div, oldDiv);
    

    第1引数には新しく置き換えるノードを、第2引数には元のノードを指定します。

    ノードの削除

    ノードを削除するには、replaceChild メソッドを使用します。

    var div = document.getElementsByTagName('div')[0];
    div.parentNode.removeChild(div);
    

    次回に続きます。

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×