문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM Document querySelectorAll() Method======
<WRAP left notice 80%>
  * description : Javascript HTML DOM Document querySelectorAll() Method 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-05-26
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article==== 
[[https://www.w3schools.com/jsref/met_document_queryselectorall.asp|HTML DOM Document querySelectorAll() Method]]\\

====Example====
문서에서 %%class="example"%%를 가진 모든 요소를 가져옵니다.\\
<code javascript>
<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>
</code>
\\
=====Definition and Usage=====
%%querySelectorAll()%% 메서드는 지정된 CSS 선택자와 일치하는 문서의 모든 요소를\\ 
정적(static) %%NodeList%% 객체로 반환합니다.\\

%%NodeList%% 객체는 노드 컬렉션을 나타냅니다.\\ 
노드는 인덱스 번호로 액세스 할 수 있습니다. 인덱스는 0에서 시작합니다.\\
\\
**Tip:** %%NodeList%% 객체의 길이 속성을 사용하여 지정된 선택자와 일치하는 요소의 수를\\ 
확인한 다음 모든 요소를 반복하고 원하는 정보를 추출할 수 있습니다.\\
\\
CSS 선택자에 대한 자세한 내용은, [[https://www.w3schools.com/css/css_syntax.asp|CSS Selectors Tutorial]] 및\\ 
[[https://www.w3schools.com/cssref/css_selectors.asp|CSS Selectors Reference]]를 참조하십시오.\\

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

=====Syntax=====
<code javascript>
document.querySelectorAll(CSS selectors)
</code>

=====Parameter Values=====
^ Parameter      ^ Type    ^ Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    ^
| CSS selectors  | String  | 필수입니다. 요소와 일치시킬 하나 이상의 CSS 선택자를 지정합니다. 이들은 %%ID%%, 클래스, 유형, 속성, 속성 값 등을 기반으로 %%HTML%% 요소를 선택하는 데 사용됩니다.\\                                                                                                                                                                        선택자가 여러 개인 경우, 각 선택자를 쉼표로 구분합니다.\\                                                                                                                                                                        \\ **Tip:** 모든 CSS 선택자 목록은 [[https://www.w3schools.com/cssref/css_selectors.asp|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)의 배경색을 설정합니다.\\
<code javascript>
<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>
</code>

\\
====Example====

문서에서 %%class="example"%%인 모든 %%<p>%% 요소를 가져오고, 첫 번째 %%<p>%% 요소의 배경을 설정합니다.\\
<code javascript>
<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>
</code>
\\
====Example====
문서에 %%class="example"%%를 가진 요소의 개수를 확인합니다(%%NodeList%% 객체의 length 속성 사용).\\
<code javascript>
<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>
</code>

\\
====Example====
%%class="example"%%을 사용하여 문서에 있는 모든 요소의 배경색을 설정합니다.\\
<code javascript>
<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>
</code>


\\
====Example====
문서의 모든 %%<p>%% 요소의 배경색을 설정합니다.\\
<code javascript>
<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>
</code>

\\
====Example====
문서에서 %%"target"%%속성을 가진 모든 %%<a>%% 요소의 테두리를 설정합니다.\\
<code javascript>
<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>
</code>

\\
====Example====
부모가 %%<div>%% 요소인 모든 %%<p>%% 요소의 배경색을 설정합니다.\\
<code javascript>
<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>
</code>

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

<code javascript>
<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>
</code>































{{tag>오션, Javascript HTML DOM Document querySelectorAll() Method}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
