querySeletorメソッド説明
DOMはHTMLの構造、その中のタグからJavaScriptで一つ選べるメソッドはquerySeletorがある。HTML
以下の例はclassとid両方がある。querySeletor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<h1 class="titleClass"><em>apple</em></h1> <!-- el !-->
<h1 id="titleId"><em>orange</em></h1> <!-- el2 !-->
<script src="js/all.js"></script>
</body>
</html>
JavaScript
まず、documentはHTMLの内容そしてquerySelectorを引き続いで目標のタグを指定される、便利になる為に、変数代入することは必要である。queryse.js
var el = document.querySelector('.titleClass em');
el.textContent ='yellow';
var el2 = document.querySelector('#titleId');
el2.textContent='red';
それでは、変数保存した内容メソッドはtextContentを引き継いで、変更したいの内容を代入できます。ちなみに、classの指定符号は『.classname tagname』、idは『#idname』を使われる。
querySeletorAllとは
querySeletorは便利けれども、二つ以上の条件はできません。not_effect_query.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<h1 class="titleClass"><em></em></h1>
<h1 class="titleClass"><em></em></h1>
<script src="js/all.js"></script>
</body>
</html>
以上は同じタグを選びたい、一応querySeletorを試す。
not_effect_query.js
var el = document.querySelector('.titleClass em');
el.textContent ='yellow';
その結果は一つタグを表示された。
<h3>修正後</h3>
この状況を会ったら、querySelectorAllはなおしてみると、複数クラス指定できた。
```querySelectorAll.js
var el = document.querySelectorAll('.titleClass em');
el[0].textContent = '123';
el[1].textContent = '123';
var elLen = el.length;
for(var i = 0;i<elLen;i++){
el[i].textContent = i+'123';
}
実際はquerySelectorAllに指定したものは配列になる、それでは配列のインデックスで内容を操作できる、ちなみに、配列は長くなればループを使わればはもっと便利になる。