JavaScriptのDOMを簡単に操作する方法
こんにちは！
今回はJQueryと同じようにHTML要素を簡単に検出して取得できるメソッドについて学習をしていきましょう！
DOM要素の取得にはgetElement系(getElementById( ),getElementByClassName( ) など)を使用することが多いと思いますが、今回はさらに簡単に要素を取得できるquerySelector() とquerySelectorAll()を学習していきましょう！
querySelector( )
DOMで指定した要素を１つ取得できます。
querySelectorAll( )
querySelectorは一つの要素しか取得できませんが、querySelectorAllがつくと全ての要素を配列で取得してくれます。
querySelector( ) /querySelectorAll( )を使うとid属性値・class属性値などを意識せずにJQuery感覚でHTML要素を簡単に検出して取得することができます。
引数に渡す属性値の書き方のですがサンプルコードで説明します。
<body>
<div id ="sample-app">
<input type ="text" name ="name" class ="name" >
<input type ="email" name ="email" class ="email" >
<textarea rows ="3" name ="message" class="message"></textarea>
<button class ="btn">送信</button>
</div>
<script>
// クラスの属性値の前に .をたす。
var btn = document.querySelector(".btn");
// Classの属性値をquerySelector( )で取得する場合は最初のclassだけ取得できます。
// また
var btn = document.querySelector("button.btn");
//クラス名の前にタグ名を足せばこの風に特定の属性値を取得でき、querySelectorのもうひとくの特徴です。
// idの属性値の前に #をたす。
var formId = document.querySelector("#sample-app");
// idは一つしかつかないのでタグなどをたす必要はないです。
// attribute属性の場合は属性名と属性値を[]に囲む必要があります。
let inputElement = document.querySelector("[name=name]");
</script>
</body>
