DOM操作について学んでいく
DOM操作とは、今まで勉強したJavaScriptを使ってようやっとWebサイトを動的に置き換えていくこと
その前に必要な要素を学ぶ。
・getElementByIdメソッド
指定したidを持つ要素を一つゲットする→getElementById(id)
指定したidを持つ要素がなかったら、nullを返す。nullはオブジェクトが存在しないやつ
実際どんな感じで使われるのか。↓
まずはHTMLに
<body>
...
<p id="sentence">お腹減った</p>
<input id="button" type="button" value="eat!">
<script src="main.js"></script>
</body>
bodyだけ書いたけど、とりあえず２つのidを。Webページ上では、「お腹減った」っていう文章と、「eat!」って言うボタンが表れてる。
次にJavaScript上で
const e = document.getElementById('button'); //定数e＝document(HTML)からbuttonと言うidの要素をゲットする
e.addEventListener('click', () => { //これはゲットしたidの要素（button）をクリックしたら処理が実行されるやつ。event処理ともいう
const sen = document.getElementById('sentence'); //定数sen=document(HTML)からbuttonと言うidの要素をゲットする
console.log(sen.innerText); //innerTextを入れることで、文章のみ表示される。入れなかったら<p>から入ってしまう
}, false);
と言う風に、ボタンを押したらconsole上に、お腹減ったと表示される機能完成。お腹減った。
・getElementsByTagNameメソッド
指定したタグ名を持つ要素をゲットする→document.getElementsByTagName(tageName)
戻り値は、HTML Collection(配列と似た構造のデータ)
指定したname属性が存在しない場合は空のHTMLCollection([])を返す。nullではない。
実際に
...
<body>
<div>要素１-div</div>
<p>要素２-p</p>
<div>要素３-div</div>
<span>要素４-span</span>
<div>要素５-div</div>
<input id="button" type="button" value="get!">
<script src="main.js"></script>
</body>
が、htmlで、Javascriptでは↓
const e = document.getElementById('button'); //定数e＝document(HTML)からbuttonと言うidの要素をゲットする
e.addEventListener('click', () => { //これはゲットしたidの要素（button）をクリックしたら処理が実行されるやつ。event処理ともいう
const elements = document.getElementsByTagName('div'); //定数elements=document(HTML)から「div」がつくタグをゲット
for (let i =0; i < elements.length; i++) { //divがある分だけループ
console.log(elements[i].innerText); //divを一つずつ出力
}
}, false);
なんで急にfor構文が出てきたかというと、elementsの中には複数入る場合がある。
HTML Collectionと言う配列に似た構造のデータが入る。つまり、elementsに[0],[1],[2],[3],[4],[5]と入っている
して、このelementsに入っている要素、つまりdivタグ全てを一件ずつconsoleに出力するため、for構文が使われている。
結果、要素１-div、要素３-div、要素５-divが出力される
・getElementsByNameメソッド
指定したname属性を持つ要素をゲットする→document.getByName(name)
戻り値は、HTML Collection(配列と似た構造のデータ)
指定したname属性が存在しない場合は空のHTMLCollection([])を返す。nullではない。
実際に
<body>
...
<input name="result" type="text">
<input name="button" type="button" value="send!">
<script src="main.js"></script>
</body>
</html>
がHTML。WEB上ではテキストボックスが表示され、その横にsend!のボタンが。
で、JavaScriptでは
const e = document.getElementById('button');
e.addEventListener('click', () => {
const elements = document.getElementsByName('result'); //定数elements=resultの要素ゲット
console.log(elements[0].value);
}, false);
つまり、ボタンをクリックしたら、テキスト内（result）の文をゲットして、最後HTMLMCollectionから[0]を取り出す。[0]は一番目のやつ。今回は一個しかないので,[0]
.valueで文字を取り出す。これで、テキスト内の文章が表示される
・getElementsByClassName
指定したclass属性を持つ要素をゲット→document.getElementsByClassName(className)
戻り値は、HTML Collection(配列と似た構造のデータ)
指定したname属性が存在しない場合は空のHTMLCollection([])を返す。nullではない。
実際に
...
<body>
<ul>
<li class="wbc">要素1</li>
<li class="otani">要素2</li>
<li class="wbc">要素3</li>
<li class="otani">要素4</li>
<li class="wbc">要素5</li>
</ul>
<input id="button" type="button" value="get">
<script src="main.js"></script>
</body>
とWEB上では、リストとボタンが表示
const e = document.getElementById('button');
e.addEventListener('click', () => {
const elements = document.getElementsByClassName(`wbc`);
for(let i=0; i<elements.length; i++){
console.log(elements[i].innerText);
}
}, false);
と言う感じで、wbcクラスの要素１、要素３、要素５が出力される。