Javascript HTML DOM Document querySelectorAll() Method

description : Javascript HTML DOM Document querySelectorAll() Method
author : 오션
email : shlim@repia.com
lastupdate : 2021-05-26

The source of the article

HTML DOM Document querySelectorAll() Method

Example

문서에서 class="example"를 가진 모든 요소를 가져옵니다.

<body>
 
  <h2 class="example">A heading with class="example"</h2> <!-- red 배경색 적용됨 -->
  <p class="example">A paragraph with class="example"</p> <!-- red 배경색 적용됨 -->
 
  <p>
    Click the button to add a background color to all elements with class="example".
  </p>
 
  <button onclick="myFunction()">Try it</button>
 
  <p><strong>Note:</strong> The querySelectorAll() method is not supported 
  in Internet Explorer 8 and earlier versions.</p>
 
  <script>
    function myFunction() {
      var x, i;
      x = document.querySelectorAll(".example");
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
      }
    }
  </script>
 
</body>

Definition and Usage

querySelectorAll() 메서드는 지정된 CSS 선택자와 일치하는 문서의 모든 요소를
정적(static) NodeList 객체로 반환합니다.

NodeList 객체는 노드 컬렉션을 나타냅니다.
노드는 인덱스 번호로 액세스 할 수 있습니다. 인덱스는 0에서 시작합니다.

Tip: NodeList 객체의 길이 속성을 사용하여 지정된 선택자와 일치하는 요소의 수를
확인한 다음 모든 요소를 반복하고 원하는 정보를 추출할 수 있습니다.

CSS 선택자에 대한 자세한 내용은, CSS Selectors Tutorial 및
CSS Selectors Reference를 참조하십시오.

Browser Support

Note: Internet Explorer 8은 CSS2 선택자를 지원합니다. IE9 및 이후 버전은 CSS3도 지원합니다.

Syntax

document.querySelectorAll(CSS selectors)

Parameter Values

Parameter	Type	Description
CSS selectors	String	필수입니다. 요소와 일치시킬 하나 이상의 CSS 선택자를 지정합니다. 이들은 ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 선택하는 데 사용됩니다. 선택자가 여러 개인 경우, 각 선택자를 쉼표로 구분합니다. Tip: 모든 CSS 선택자 목록은 CSS Selectors Reference를 참조하십시오.

Technical Details

DOM Version	Selectors Level 1 Document Object
Return Value	지정된 CSS 선택자와 일치하는 문서의 모든 요소를 나타내는 NodeList 객체입니다. NodeList는 정적(static) 컬렉션이므로 DOM의 변경 사항이 컬렉션에 영향을 미치지 않습니다. 선택자가 유효하지 않은 경우 SYNTAX_ERR 예외가 발생합니다.

More Examples

Example

문서의 모든 <p> 요소를 가져오고, 첫 번째 <p> 요소(index 0)의 배경색을 설정합니다.

<body>
 
  <p>This is a p element.</p> <!-- red 배경색 적용됨 -->
 
  <p>This is also a p element.</p>
 
  <p>
    Click the button to add a background color
    to the first p element (index 0) in the document.
  </p>
 
  <button onclick="myFunction()">Try it</button>
 
  <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet 8 and eralier versions.</p>
 
  <script>
    function myFunction() {
      var x = document.querySelectorAll("p"); 
      // Get all <p> elements in the document.
      x[0].style.backgroundColor = "red";
      // Set the background color of the first <p> element
    }
  </script>
 
</body>

Example

문서에서 class="example"인 모든 <p> 요소를 가져오고, 첫 번째 <p> 요소의 배경을 설정합니다.

<body>
 
  <h2 class="example">A heading with class="example"</h2>
  <p class="example">A paragraph with class="example"</p>
  <p class="example">Another paragraph with class="example".</p> <!-- yellow 배경색 적용됨 -->
 
  <p>
    Click the button to add a background color to the first p element (index 0) in the document with class="example".
  </p>
 
  <button onclick="myFunction()">Try it</button>
 
  <p><strong>Note:</strong> The querySelctorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
 
  <script>
    function myFunction() {
      var x = document.querySelectorAll("p.example");
      // Get all <p> elements in the document with class="example"
      x[1].style.backgroundColor = "yellow";
      // Set the background color of the second <p> element with class="example" (index 1)
    }
  </script>
 
</body>

Example

문서에 class="example"를 가진 요소의 개수를 확인합니다(NodeList 객체의 length 속성 사용).

<body>
 
  <div class="example">
    A div element with class="example"
  </div>
 
  <div class="example">
    Another div element with class="example"
  </div>
 
  <p class="example">A p element with class="example"</p>
 
  <p>
    Click the button to find out how manu elements with class "example" there are in this document.
  </p>
 
  <button onclick="myFunction()">Try it</button>
 
  <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
 
  <p id="demo"></p>
 
  <script>
    function myFunction() {
      var x = document.querySelectorAll(".example");
      document.getElementById("demo").innerHTML = x.length;  // 3
      console.log(x); // NodeList(3) [div.example, div.example, p.example]
    }
  </script>
 
</body>

Example

class="example"을 사용하여 문서에 있는 모든 요소의 배경색을 설정합니다.

<head>
  <style>
    .example {
      border: 1px solid #000;
      margin: 5px;
    }
  </style>
</head>
 
<body>
 
  <div class="example">
    A div with class="example"
    <!-- red 배경색 적용 -->
  </div>
 
  <div class="example">
    Another div with class-"example"
    <!-- red 배경색 적용 -->
  </div>
 
  <p class="example">This is a p element with class="example"</p> <!-- red 배경색 적용 -->
 
  <p>This is a <span class="example">span</span> element with class="example" inside another p element.</p> <!-- span에 red 배경색 적용 -->
 
  <p>Click the button to change the background color of all elements with class="example".</p>
 
  <button class="example" onclick="myFunction()">Try it</button> <!-- red 배경색 적용 -->
 
  <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
 
  <script>
    function myFunction() {
      var x = document.querySelectorAll(".example");
      var i;
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
      }
      console.log(x);
      /* NodeList(5)[div.example, div.example, p.example, span.example, button.example] */
    }
  </script>
 
</body>

Example

문서의 모든 <p> 요소의 배경색을 설정합니다.

<head>
  <style>
    .example {
      border: 1px solid #000;
      margin: 5px;
    }
  </style>
</head>
 
<body>
 
  <h1>A h1 element</h1>
 
  <div>A div element</div>
 
  <p>A p element</p> <!-- red 배경색 적용 -->
 
  <p>Another p element</p> <!-- red 배경색 적용 -->
 
  <div class="example">
    <p>A p element inside a div element.</p> <!-- red 배경색 적용 -->
  </div>
 
  <p>
    Click the button to change the background color of all p elements in the document.
    <!-- red 배경색 적용 -->
  </p>
 
  <button onclick="myFunction()">Try it</button>
 
  <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p> <!-- red 배경색 적용 -->
 
  <script>
    function myFunction() {
      var x = document.querySelectorAll("p");
      var i;
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
      }
      console.log(x); /* NodeList(5) [p, p, p, p, p] */
    }
    /* console.log(x); */
    /* Uncaught ReferenceError: x is not defined */
  </script>
 
</body>

Example

문서에서 "target"속성을 가진 모든 <a> 요소의 테두리를 설정합니다.

<head>
  <style>
    a[target] {
      background-color: yellowgreen;
    }
  </style>
</head>
 
<body>
  <p>
    The CSS selector a[target] makes sure that all links with a target attribute gets a yellow background:
  </p>
 
  <a href="https://www.w3schools.com">w3schools.com</a>
  <a href="http://www.disney.com" target="_blank">disney.com</a> <!-- 10px solid red border 적용됨 -->
  <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a> <!-- 10px solid red border 적용됨 -->
 
  <p>
    Click the button to add a red border to all links in the document with a target attribute.
  </p>
 
  <button onclick="myFunction()">Try it</button>
 
  <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
 
  <script>
    function myFunction() {
      var x = document.querySelectorAll("a[target");
      var i;
      for (i = 0; i < x.length; i++) {
        x[i].style.border = "10px solid red";
      }
    }
  </script>
 
</body>

Example

부모가 <div> 요소인 모든 <p> 요소의 배경색을 설정합니다.

<head>
  <style>
    div {
      border: 1px solid #000;
      margin-bottom: 10px;
    }
  </style>
</head>
 
<body>
 
  <div>
    <h3>H3 element</h3>
    <p>
      I am a p element, my parent is a div element. <!-- teal 배경색 적용됨 -->
    </p>
  </div>
 
  <div>
    <h3>H3 element</h3>
    <p>
      I am a p element, my parent is also a div element. <!-- teal 배경색 적용됨 -->
    </p>
  </div>
 
  <p>
    Click the button to change the background color of every p element where the parent is a div element.
  </p>
 
  <button onclick="myFuncion()">Try it</button>
 
  <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
 
  <script>
    function myFuncion() {
      var x = document.querySelectorAll("div > p");
      var i;
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "teal";
      }
    }
  </script>
 
</body>

Example

문서에 있는 모든 <h2>, <div> 및 <span> 요소의 배경색을 설정합니다.

<body>
 
  <h1>A H1 element</h1>
 
  <h2>A H2 element</h2> <!-- red 배경색 적용됨 -->
 
  <div>A DIV element</div> <!-- red 배경색 적용됨 -->
 
  <p>A p element</p>
 
  <p>A p element with a <span style="color:brown;">span</span> element inside.</p>
  <!-- span에 red 배경색 적용됨 -->
  <p>
    Click the button to set the background color of all h2, div and span elements.
  </p>
 
  <button onclick="myFunction()">Try it</button>
 
  <p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
 
  <script>
    function myFunction() {
      var x = document.querySelectorAll("h2, div, span");
      var i;
      for (i = 0; i < x.length; i++) {
        x[i].style.backgroundColor = "red";
      }
      console.log(x); /* NodeList(3) [h2, div, span] */
    }
  </script>
 
</body>

오션,, Javascript, HTML, DOM, Document, querySelectorAll(), Method

목차

Javascript HTML DOM Document querySelectorAll() Method

The source of the article

Example

Definition and Usage

Browser Support

Syntax

Parameter Values

Technical Details

More Examples

Example

Example

Example

Example

Example

Example

Example

Example