Javascriptで要素を取得する方法
Javascriptで要素を取得する代表的な関数は以下が存在します。
- 単一の要素を取得して返す関数
-
- document.getElementById("属性idの値");
- document.querySelector("CSSセレクタ指定");
- 複数の要素を取得して要素を配列で返す関数
-
- document.getElementsByClassName("クラス名");
- document.getElementsByTagName("タグ名");
- document.getElementsByName("属性nameの値");
- document.querySelectorAll("CSSセレクタ指定");
太字で記述されている
document.getElementById("属性idの値")
document.querySelector("CSSセレクタ指定")
document.querySelectorAll("CSSセレクタ指定")
についてのみ解説していきます。
document.getElementById("属性idの値")
指定した属性IDの値の要素を取得するメソッドです。
id=first のDIVタグ
id=second のDIVタグ
<div id="first" style="margin:2px;background:#CCF;"> id=first のDIVタグ </div> <div id="second" style="margin:2px;background:#CFC;"> id=second のDIVタグ </div> <input type="button" onclick="test1()" value="IDから要素を取得"> <script> function test1(){ //id=firstの要素を取得 let elm=document.getElementById("first"); //取得した要素の内部HTMLを表示する alert(elm.innerHTML); } </script>
document.querySelector("CSSセレクタ指定")
指定したCSSセレクタの要素を取得するメソッドです。該当する要素が複数あっても最初の1つだけを返してきます。
例えば
id="aaa" の要素を取得したい場合
document.querySelector("#aaa")
class="aaa" の要素を取得したい場合
document.querySelector(".aaa")
CSSセレクタの詳細については https://mam-mam.net/javascript/css_selector.html をご参考ください。
class=test2 の1つ目のDIVタグ
class=test2 の2つ目のDIVタグ
<div class="test2" style="margin:2px;background:#CFC;"> class=test2 の2つ目のDIVタグ </div> <input type="button" onclick="test2()" value="CSSのセレクタ指定で最初の要素を1つ取得"> <script> function test2(){ //class=test2の最初の要素を取得 let elm=document.querySelector(".test2"); //取得した要素の内部HTMLを表示する alert(elm.innerHTML); } </script>
document.querySelectorAll("CSSセレクタ指定")
document.querySelectorと同じく指定したCSSセレクタの要素を取得するメソッドですが、該当する要素が1つでも複数でも配列で返してきます。
class=test3 の1つ目のDIVタグ
class=test3 の2つ目のDIVタグ
class=test3 のPタグ
<div class="test3" style="margin:2px;background:#CCF;"> class=test3 の1つ目のDIVタグ </div> <div class="test3" style="margin:2px;background:#CFC;"> class=test3 の2つ目のDIVタグ </div> <p class="test3" style="margin:2px;background:#FCC;"> class=test3 のPタグ </p> <input type="button" onclick="test3()" value="CSSのセレクタ指定で要素を全て取得して境界線を変更する"> <script> function test3(){ //divタグでclass=test3の要素を配列で取得 let elms=document.querySelectorAll("div.test3"); for(let i=0;i<elms.length;i++){ if(elms[i].style.borderWidth=="2px"){ elms[i].style.border="none"; }else{ elms[i].style.border="2px solid #00F"; } } } </script>