プログラミング javascript

Javascript DOM操作

HTMLデータを取得しよう（idで取得編）

document.getElementById

例：div id など。

document.getElementByIdは、documentの中から指定したIDがついてるHTMLオブジェクトを探して取得してくれます。
この場合はid="service-title"がついたHTMLオブジェクトを取得します。
alertはポップアップ表示、outreHTMLは取得したオブジェクトのHTML全文を表示します。

配列で返ってくる点に注意しましょう！

＜case1 ＞下記のコードの場合の考え方

<div id="js-for-web">
  <h2 id="service-title">プログラミング学習</h2>
  <p class="lead">１８０日でプログラマーになろう！</p>
  <p class="lead">JavaScript勉強中</p>
  <a href="https://careertimes.jp/" id="register" class="btn btn-register">登録</a>
<!-- <button id="button" class="btn">クリック</button> -->
</div>

h2 idで取得なら

alert( document.getElementById('service-title').outerHTML )

div id で取得なら

alert( document.getElementById('js-for-web').outerHTML )

HTMLデータを取得しよう（classで取得編）

document.getElementsByClassName

例：div class p class等

document.getElementsByTagNameは、documentの中から指定したタグがついてるHTMLオブジェクトを取得してくれます。
idとは違い、配列で返ってくる点に注意する。

＜case1 ＞のコードでは・・・・

<div id="js-for-web">
  <h2 id="service-title">プログラミング学習</h2>
  <p class="lead">１８０日でプログラマーになろう！</p>
  <p class="lead">JavaScript勉強中</p>
  <a href="https://careertimes.jp/" id="register" class="btn btn-register">登録</a>
<!-- <button id="button" class="btn">クリック</button> -->
</div>

alert( document.getElementsByClassName('lead')[0].outerHTML )
alert( document.getElementsByClassName('lead')[1].outerHTML )

HTMLデータを取得しよう（タグで取得編）

document.getElementsByTagName

例：aタグなど

documentの中から指定したタグがついてるHTMLオブジェクトを探して取得してくれます。
idとは違い、配列で返ってくる点に注意する。

下記のHTMLコードでいくと…

<div id="js-for-web">
  <h2 id="service-title">プログラミング学習</h2>
  <p class="lead">１８０日でプログラマーになろう！</p>
  <p class="lead">JavaScript勉強中</p>
  <a href="https://careertimes.jp/" id="register" class="btn btn-register">登録</a>
<!-- <button id="button" class="btn">クリック</button> -->
</div>

alert( document.getElementsByTagName('a')[0].outerHTML )

HTML要素の変更

document.getElementById('service-title').innerText = 'スケトラ'

h2タグを別の文字に変更する。

<div id="js-for-web">
  <h2 id="service-title">プログラミング学習</h2>
  <p class="lead">１８０日でプログラマーになろう！</p>
  <p class="lead">JavaScript勉強中</p>
  <a href="https://careertimes.jp/" id="register" class="btn btn-register">登録</a>
<!-- <button id="button" class="btn">クリック</button> -->
</div>

document.getElementById('service-title').innerText = 'スケトラ'

HTML要素の追加

<div id="js-for-web">
  <h2 id="service-title">プログラミング学習</h2>
  <p class="lead">１８０日でプログラマーになろう！</p>
  <p class="lead">JavaScript勉強中</p>
  <a href="https://careertimes.jp/" id="register" class="btn btn-register">登録</a>
<!-- <button id="button" class="btn">クリック</button> -->
</div>

login_btn.setAttribute('class','btn')　//class="btn"を追加
login_btn.setAttribute('href','https://careertimes.jp')　//href="https://careertimes.jp"を追加
document.getElementById('js-for-web').appendChild(login_btn)

ボタンの操作

login_btn.setAttribute('class','btn')　//class="btn"を追加
login_btn.setAttribute('href','https://careertimes.jp')　//href="https://careertimes.jp"を追加
document.getElementById('js-for-web').appendChild(login_btn)

ボタンから操作

JavaScriptからクリック操作してみよう
document.getElementById("register").click()

イベント監視

window.onload = function() {
document.getElementById('service-title').innerText = 'スケトラ'

イベント処理

<div id="js-for-web">
  <h2 id="service-title">30DAYSトライアル</h2>
  <p class="lead">1日1題30日でプログラマーになろう！</p>
  <p class="lead">JavaScript学習中</p>
  <a href="https://careertimes.jp/" id="register" class="btn btn-register">登録</a>
<button id="button" class="btn">クリック</button> 
</div>

document.getElementById("button").addEventListener('click', function() {
document.getElementById('service-title').innerText = 'スケトラ'
})

-プログラミング, javascript