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">180日でプログラマーになろう!</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">180日でプログラマーになろう!</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">180日でプログラマーになろう!</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">180日でプログラマーになろう!</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">180日でプログラマーになろう!</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 = 'スケトラ'
})