HTML

WEBサイト作成

DOMの基本操作


JavaScriptのwindowオブジェクトとdocumentオブジェクト

JavaScriptのDOMを操作するためのオブジェクトは階層構造で管理されており、その最上位にあるオブジェクトがwindowオブジェクトであり、JavaScriptが起動するタイミングで自動的に生成されます。

JavaScriptのwindowオブジェクトとdocumentオブジェクトの関係ですが、ドキュメントを表示するウィンドウに対応するのがWindowオブジェクトで、HTMLドキュメントに対応するのが documentオブジェクトになります。

例えばダイアログボックスを表示するのはWindowオブジェクトの機能(メソッド)であるwindow.alert("ダイアログメッセージ");で行ないますが、HTMLページ中に文字を出力させるにはdocument.write("テキスト");で行ないます。

DOMにより生成されるエレメントオブジェクト

サーバーから送られるHTMLをブラウザが描画(rendering)してWEBサイトが見られるわけですが、ブラウザがHTMLのタグに対応するオブジェクトを生成する機能がDOM(Document Object Model)であり、ブラウザのDOMはJavaScriptに操作してもらうために存在するとも言えます。

<html>
  <head>
    <title>Launch IT at JKT</title>
  </head>

  <body>
    <div>ブロック1</div>
    <div>ブロック2</div>
  </body>
</html>

<html>~</html>がdocumentオブジェクトであり、そのプロパティとして<body>~</body>がありdocument.bodyでアクセスします。

そしてbody内のタグにはDOMの機能によって対応するエレメントオブジェクトが生成されます。

エレメントの参照

DOMはNodeインターフェイスというツリー構造のインターフェイスを装備しており、JavaScriptはNodeを通じてDOMにアクセスします。Nodeインターフェイスの最上位がhtml要素から生成されるdocumentオブジェクトです。

HTMLタグはDOMによりオブジェクト化されていますがこれらをエレメントと呼び、getElementByIdやgetElementsByName(引数のnameのDOMオブジェクトを配列を返す)のようにid属性やname属性を指定することでエレメントのオブジェクトにアクセスします。

<html>
  <head>
    <script type="text/javascript">
      function show(){
        var txt = document.getElementById("txt1");
        txt.innerHTML = "やま";
      }

      function doKlik(){
        var txt2 = document.getElementById("txt2");
        var rd = document.getElementsByName("rad");
        for(i=0; i<rd.length; i++){
          var rd_array=rd[i];
          if(rd_array.checked){
            alert(txt2+rd_array.value);
          }
        }
        alert(txt2);
      }
    </script>
  </head>

  <body onload="show();">
    <div id="txt1"></div>

    <form onsubmit="return false;">
      <input type="text" id="txt2">
      <input type="radio" id="rd1" name="rad" value="male">
      <input type="radio" id="rd2" name="rad" value="female">
      <input type="button" onClick="doKlik();" value="Click">
    </form>

  </body>
</html>

エレメントの更新

HTMLタグの場合、style属性を定義することで表示を変化させますが、エレメントオブジェクトのstyleプロパティを変更することで、関数からこれを実行することができます。

getElementByIdメソッドで該当エレメントへの参照を取得し、styleプロパティを変更します。ちなみにプロパティは資産とか土地とか所有物という意味でオブジェクトの所有物を表します。

<html>
  <head>
    <script type="text/javascript">
      function doklik(){
        var txt=document.getElementById("back");
        txt.style.background="#999";
        
      }
    </script>
  </head>
  <body>
    <div id="back">Backgoround</div>
    <input type="button" onClick="doklik();" value="OK">

  </body>
</html>

エレメントの追加

createElementメソッドで空のdivエレメントオブジェクトを作成して、innerHTMLメソッドで空のdivエレメントに表示する数字を設定して、appendChildメソッドで作成したエレメントをHTML中のid属性countの場所に表示します。

<html>
  <head>
    <script type="text/javascript">
      var cnt=1;
      function doKlik(){
        //divエレメントオブジェクトの作成
        var obj=document.createElement("div");

        //表示する数字を設定
        obj.innerHTML=cnt;
        cnt++;
        
        //作成したdivエレメントにappendChildにてobjオブジェクトを組み込むことで表示される。
        var num=document.getElementById("count");
        num.appendChild("obj");
        
      }
    </script>
  </head>

  <body>
    <div id="count"></div>
    <input type="button" onclick="doKlik();" value="OK">

  </body>

</html>

エレメントの削除

getElementIdで該当idエレメントへの参照を取得し、lastChildプロパティで最後の子要素を取得し、removeChildメソッドで該当エレメントを削除します。

<html>
  <head>
    <script type="text/javascript">
      function doRemove(){        
        //親要素countへの参照を取得
        var num=document.getElementById("count");

        //lastChildプロパティで最後の子要素を取得
        var obj=num.lastChild("obj");
        if(obj){
            //子要素が存在する場合、該当要素を文章から削除
            removeChild(obj);
        }
      }
    </script>
  </head>
 
  <body>
    <div id="count"></div>
    <input type="button" onclick="doRemove();" value="Remove">
 
  </body>
 
</html>





おすすめ記事一覧

大統領選挙で考えたギャップにハマるということ 1

ギャップにキュンとするというのは人間の本能みたいなもので、ジョコウィの私利私欲のない素朴なおじさん像と、その実強力なリーダーシップを発揮する実務派という内面が、一見普通の人だが実はスゴイというギャップ好きのインドネシア人に大ウケして、大衆は一種の集団催眠状態にあるようです。

情報の質のレベル 2

見える化された結果を共有化することで問題点が共通認識されますが、共有化が進むことで情報の持つ希少価値が薄れて困る人間がいる場合、有益な情報を独占することでポジションを高めようという政治力が働きます。

インドネシアのスタバの店員にありがたい人生の教訓を教わった件 3

いつものスタバでいつものアイスコーヒーを注文していると、だいたいなじみの店員が「今日は珍しい時間に来たねー」とか「今日もいつものアイスでいいのかなー」とか馴れ馴れしくフレンドリーに話しかけてきます。

宗教によって異なる「死んだらどうなる」の考え方 4

キリスト教もイスラム教もともにユダヤ教から派生した宗教であり、それぞれイエス・キリスト(本人が神)またはアッラーという唯一無二の神を信じます。

株価操作なんてインドネシア株では当たり前 5

株価は売り注文と買い注文により変動し、大量の売り注文を買う注文がたくさん入れば、他の投資家達は「俺も俺も」と続くことで株価が上がります。

心臓に毛が生えたインドネシア人のずうずうしい転職活動を応援してみた 6

インドネシア人は秘密の話は誰かに暴露しないと精神の安定を保てない人が多いため、内緒の話に情報の希少性は少なく信憑性も低いことが多いので、「ここだけの話」という枕詞付きで聞かされる話は話半分に聞いておいたほうがいいかもしれません。

日系企業のインドネシアでの存在意義 7

今のまま日本の人口減が続けば、内需は縮小の一途をたどるわけで、そうなると日本国内市場だけで生き残るのは難しいと判断する国内企業が、海外市場に活路を見出そうとするのは必然です。

チャンスはあるが勝てる分野を見つけるのが難しい 8

実際にインドネシアに住んでみて、自分で動いて人と話しをして、現地の事情を少しずつ理解していくにつれて、インドネシアで起業することが意外と手強いことに気づき、その難しさの原因は、高い送料と関税であったりローカル企業との競争であったり、就労ビザ(IMTA)や外国人技能開発基金(DPKK)などのランニングコストの高さであったりします。

インドネシアのシステムインテグレーション業界 9

先日JETRO(日本貿易振興機構)さんと、インドネシアの中小企業のIT投資について意見交換させていただく機会をいただいたのですが、そこで「システム投資のコストメリットはどのように説明できるのか」という、システムインテグレーターの存在価値にも関わる重要な問題提起がありました。

肉体と精神と心と魂 10

「Body and Soul」といえば、昨日の内閣改造に伴う人事で内閣府政務官に内定した自民党の今井絵理子参議院員がメンバーだったSPEEDのデビュー曲であり、インドネシアの老舗女性ファッションブランド名でもあります。

ジャカルタのラーメン市場 11

僕がインドネシアに初めて来たのが1997年10月、インドネシア語は分からないし、仕事は辛いし、周囲の人間は理不尽だし、一時期日本に帰りたくて仕方がない時期がありましたが、当時自分をかろうじてインドネシアに繋ぎ止める心の支えとなっていたのが、協栄プリンスビル(今のWisma Keiai)の日本食レストラン「五右衛門」であり、ここでキムチラーメンを食べることが唯一の楽しみと言っても過言ではありませんでした。

ブランド力、技術力、資金力の3要素 12

1998年のジャカルタ暴動後、ルピアが暴落し海外からのドル建て債務を抱えた国内企業が利子の支払いに苦しんでいた頃、僕は外貨が獲得できるインドネシアでの新しいビジネスを探していました。

日本とインドネシアの間でのタイムマシン経営が通じなくなっている件 13

先進国と後進国との間にある流行のタイムラグを利用して、先進国での成功例を後進国で実践するビジネスモデルをタイムマシン経営といいますが、インターネットの普及に伴い情報がフラット化してしまい、モノと情報のタイムラグが限りなく小さくなった今、先駆者である中小零細同業他社が乱立し市場が出来上がったところに、後発の大手が参入し先発零細を駆逐していく、という典型的な負けパターンにはまります。

サリナデパートとマクドナルド 14

本日5月10日を最後にインドネシアのマクドナルド第1号店であるサリナデパート店(Sarinah)が閉店になりますが、ジャカルタのショッピングモールが新しいコンセプトでモダンにリニューアルされ続ける中で、僕がインドネシアに来たばかりの20数年前には、若者の待ち合わせ場所の定番でもあったサリナデパートやブロックMのパサラヤ(Pasaraya)などは完全に時代に取り残されてしまいました。

不景気の歴史 15

僕がインドネシアに来てからこれまで何度か経済不況を見てきましたが、今回の新型コロナウィルスの感染拡大により、間違いなく景気後退しますので、数年後にはこれがコロナショックとかコロナ不況とか呼ばれるようになるのかもしれません。

日本のバブル経済崩壊後とインドネシアの通貨危機後 16

自分が大学に入学したのがバブル経済末期の1991年、土地も株価もMAX爆上げして、三菱地所がアメリカの象徴であるロックフェラーセンタービルを買収し、ジュリアナ東京でワンレンボディコン(登美丘高校ダンス部のバブリーダンスみたいなやつ)のお姉さん達が扇子振って踊っている時期でした。

内需と外需の自国経済に及ぼす影響 17

公共事業投資を行っても、お金が企業内や個人の貯蓄に滞留してしまい国内消費が増えないのが日本の状況であり、国内消費は増えても消費材の輸入品比率が高く、国内資産が海外に流出しているのがインドネシアの状況です。

2019年の総選挙を前にインドネシア政治史のおさらい 18

来年の大統領選挙(Pemilu Pilpres Pileg Indonesia 2019)に向けての選挙運動(Kampanye)を解禁するにあたり、投票用紙に印字される順番はジョコウィ現職大統領・マフル副大統領候補組が1番、プラボウォ大統領候補・サンディアガウノ副大統領候補組が2番と決まりました。

コーヒーをもっと楽しくもっと美味しく 19

インドネシアは北回帰線と南回帰線をはさむコーヒーベルトに位置するコーヒー栽培に適した国で、1602年の東インド会社の進出を契機にオランダの植民地支配が300年以上続き、その間アラビカ種のコーヒーが持ち込まれ、気候のいい高原地帯で栽培が開始されました。

インドネシア人の悪魔祓い 20

人間誰しも自分の中に悪魔が潜んでおり、それが何らかのきっかけで表面に出て来るという考え方自体には、背景に宗教が有るか無いかの違いだけで、基本的に理解できる話であり、それを信じるか信じないかは別として、そういう考えがあることを認めることは大切なことだと思います。

-WEBサイト作成

© 2020 バテラハイシステム Powered by STINGER