Webページ上でのDOM操作に関する諸技術（おさらいを兼ねて）

0. 開発ツールを使う（おさらい）

• 第８回にも述べたが、F12で開発ツールを表示し（ブラウザ画面の下半分または切り離して別窓として）、

  IE	firefox	chrome

  • 図のようにコンソールを表示させ、
  • JavaScriptの式を入力することができる。
    （第10回でもその基本的なことを実演した）
• コンソールには、開発ツールを開いたページの状態が反映されている。
  • すでにそのページで動作しているスクリプトからのエラーメッセージ等が表示されていることもある。
  • document.bodyに、そのページのDOMがデータとして設定されている。
  • その他、スクリプトによっていくつかの変数が設定されていることもある。

• この資料集のページでは、jQuery（の互換であるZeptoであることもある）が読み込まれているので、以下のような変数が設定されており、 jQueryの式や関数呼出もコンソールで入力し評価したり実行したりできる。

    jQuery
    // => function (a,b){return new r.fn.init(a,b)}
    $
    // => function (a,b){return new r.fn.init(a,b)}
  

  * 上の２つは同じものを指している。 * Zeptoを使ってるページでは 変数jQueryは使われておらず、 ｀$` は上と同じ動作をする（表記は違うが）関数を返す。

• 変数名（など） の後ろに ピリオド . を入れてから、Ctrl+Space を叩くと、その変数が指すオブジェクトに関する、様々なメンバ名 （つまりここに入力して意味がある名標の一覧）がプルダウンメニュー に表示される。
• ここに表示されるものは、定数か属性かメソッドのいずれかと考えていい。
• 属性は、値を表示（参照）したり、代入（新しい値を設定）したりできる。

• メソッドは、関数を属性の値として持つもの。たとえば、

    document.getElementById
    // => function getElementById() { [native code] }
  

  のように表示される。

  • ここで native という用語が表示されるが、この用語は、 ライブラリ<=>ネイティブ関数 という区分とほぼ同じだが、 微妙に違い、「JavaScript言語で書かれた関数ではなく 他の言語（C++など）で書かれて機械語にコンパイルされた 関数」であることを意味している。

  • 関数（を値として持つメンバ参照や変数）を表記しただけでは 関数はプログラムとして動作しない。後ろに括弧 () をつけたり その括弧に中に引数を与えたりすることで関数呼出が行われる。

    document.getElementById('#section')
    // => DOM要素が（該当するものがあれば）返される
    

1. 原始的な方法（非可逆）

• document.write で、現在開いているページのコンテンツを 総取っ替え式に置き換えることができる。
  • 古いJavaScriptの例題によく見られた方法だが、
  • 現実のWebアプリケーションではあまり有効ではない。
• イベント（ユーザの操作など）に応答させる方法として、 ここでは タグの onXxxxx属性 を与えていることも見ておくこと。

doctype html
meta charset="utf-8"
p 最初に一行入れておく
button onclick="x()" 実行！
/      ~~~~~~~ イベント処理の指示はここで行っている    
javascript:
  function x(){
    document.write("すべて上書き")
  }

=> ソース

• 他に、document.locationプロパティを書き換えて （プログラムから）強引にジャンプさせるというテクニックもある。

    document.location="http://wwww.google.co.jp"
  

  • これまでと同様、開発ツール(F12 -> コンソール)で試してみて下さい。

2. HTMLの断片から要素（群）を作らせる

• 要素のinnerHTML属性に文字列を設定する方法は 以前に学んだ。
  • textContent属性など、同じ使い方ができる 属性がいくつかある（がクロスブラウザ対応の問題はある）

• innerHTMLについては、設定した文字列の中に HTMLタグとして認識できるものがあれば、 そこにHTML要素を作成する （ブラウザがHTMLを読み込むときと同じ動作）。

    doctype html
    meta charset="utf-8"
    p innerHTML
    button onclick="x()" 実行！
    #target ここが変化します
    javascript:
      function x(){
        var e=document.getElementById('target')
        e.innerHTML='<h1>新しい要素</h1><p>さらに新しい要素</p><ul><li>リスト</li></ul>'
      }
  

  => ソース

• 一方、textContent属性にHTMLを代入すると、 すべて文字列として扱われる

    document.querySelector('p').textContent="<h1>タグに囲まれた文字</h1>"
  

  • やはり開発ツール(F12 -> コンソール)で試してみて下さい。

3. ネイティブ関数で丁寧に作る

• ここでは、以下のように、ネイティブ関数で丁寧に要素を作っている。 *（コーディングはかなり面倒だが、緻密な処理が可能になる）

1. 要素を作る（createElement関数)
2. 内容を与える（textContent属性）

3. DOM上の適切な場所に配置する（insertBeforeなど種々のメソッドがある）

    doctype html
    meta charset="utf-8"
    p createElement
    button onclick="x()" 実行！
    #target この前に要素を挿入しよう
    javascript:
      function x(){
        var e=document.getElementById('target')
        var ne=document.createElement('p')
        ne.textContent=new Date().toLocaleTimeString()
        document.body.insertBefore(ne,e)
        // 前からある要素 e の前に、今作った要素 ne を挿入
      }
   

=> ソース

4. ネイティブ関数で複数要素の操作（とイベント処理）

• 複数の要素を選択するget系ネイティブ関数を使った場合の例
• 現在、一部のブラウザに不都合があり、繰り返しの方法が やや技巧的な方法になっている。
  • (専門的な話になるが補足しておくと) 要素の集まりを扱うデータとして HTMLCollection, NodeList という２種類のデータ型があり、
  • NodeListは forEach()が使え、規格上は getElementsByClassNameなどの複数要素を得る関数は これを返すことになっているのだが、
  • forEach が使えない HTMLCollectionを返すブラウザがある。
• また、ここでは、アロー関数を使った書き方を示した。

• これまでの方法に対して、プログラムからイベント処理を 与える方法もここで示す（addEventListenr）

    doctype html
    meta charset="utf-8"
    p 複数Element と eventListener
    .tgt style="top:20%"
    .tgt style="top:70%"
    css:
      div {
        width:300px;height:100px;
        position:absolute;background-color:yellow
      }
    javascript:
      var es=document.getElementsByClassName('tgt')
      function x(msg){
        [].forEach.call(es,e=>e.textContent=msg)
        //should be...    es.foreach(e=>...)
      }
      document.addEventListener('click',ev=>x(`${ev.clientX},${ev.clientY}`),false)
  

  => ソース