JavaScript:querySeletor,querySeletorAll #JavaScript

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';

その結果は一つタグを表示された。

```

修正後

この状況を会ったら、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に指定したものは配列になる、それでは配列のインデックスで内容を操作できる、ちなみに、配列は長くなればループを使わればはもっと便利になる。