CSSセレクタラベルの選択

9962 ワード
TIL JavaScript テキストリンク

document.querySelector()


querySelector(「cssセレクタを文字列として渡す」)
idを選択した場合は#、classを選択した場合はYES.該当する選択者確認フラグとして使用できます.

cssセレクタとしてタグを選択

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>querySelector</title>
    <link rel="stylesheet" href="index04.css" />
  </head>
  <body>
    <div>
      <div class="box"></div>
      <div id="input"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <script src="index04.js"></script>
  </body>
</html>
const tag = document.querySelector('.box');
//그런데 box class는 1개만 있는 게 아니라 여러개가 있다. 그러면 어떻게 가져올 수 있을까?
console.log(tag); //<div class="box"></div>

//querySelectorAll()로 동일한 class 또는 id를 갖고 있는 태그들을 다 가져올 수 있다.
const boxTags = document.querySelectorAll('.box');
console.log(boxTags);

const inputTags = document.querySelectorAll('#input');
console.log(inputTags);

//querySelectorAll()을 통해 출력되는 값을 살펴보면, NodeList[]가 출력된다.
//이와 비슷했던 것이 HTMLCollection[]이다. 
const boxs = document.getElementsByClassName('box');
console.log(boxs);
上のコードを撮って、各値がどのように出力されているかを理解しやすくします.




querySelector()は、1つの方法で値を柔軟に処理できるため、使用率が高い.
JSP response request中国語文字化けし
[LoadRunner]UTF 8文字フォーマット