Webページを操作

HTMLを書き換えるとページが変わる


f:id:web-0220:20171217233603p:plain

<body>
<h1>メッセージとボタンのあるページの例</h1>
<p>はじめてのJavaScript</p>
<button onclick="btnclick()">押してください</button>
</body>


  • 「検証」で、「p要素」の中身を書き換えて見る

f:id:web-0220:20171217235846p:plain

JavaScriptで操作してみる

DOMツリーを操作する
  • 開発者ツール(検証)の「Elements」タブで表示されている内容からもわかるように、HTMLはツリー構造になっていて、階層化されています
  • これを「DOM(Document Object Model)ツリー」といいます

f:id:web-0220:20171218004025p:plain

head要素

document.head

body要素

document.body
children[番号]
  • その下の要素は「children[番号]」と記述します
  • 「.children」は、DOM標準化仕様の対象外です
  • 標準化仕様では「.childNodes」という表記をします
  • 「.childNodes」は、空白や改行の有無で「何番目なのか」がずれるため、そうした影響を受けない「.children」を利用します
要素の中身を示す innerHTMLを書き換える
  • 要素の中身は、「. innerHTML」と記述すると指し示すことができます
document.body.children[1].innerHTML


は、「はじめてのJavaScript」という文字列を指します。
この値を変更すれば、HTMLで表示されている文字を変更できます。

代入(だいにゅう)

<body>
<h1>メッセージとボタンのあるページの例</h1>
<p>はじめてのJavaScript</p>
<button onclick="btnclick()">押してください</button>
</body>


以下のように変更すると、ボタンが押されたときに、p要素の値にクリックイベントの値が代入されて表示されます。

<button onclick="document.body.children[1].innerHTML='押されました'">押してください</button>
idで要素を特定する
  • DOMツリーを使って「document.body」から「children」などを通じて要素をたどり、そのinnerHTMLを読み書きすることで、コンテンツを取得したり変更したりできます
  • しかし、煩雑でわかりにくい
  • そこで、要素に「id属性」を付与し、そこに値を代入します
<p id="msg">はじめてのJavaScript</p>
<button onclick="document.getElementById('msg').innerHTML='押されました'">押してください</button>