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

사용자 도구

사이트 도구

현재 위치: start » wiki » javascript » javascript_note » queryselectorall
wiki:javascript:javascript_note:queryselectorall

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판 		이전 판
wiki:javascript:javascript_note:queryselectorall [2021/05/26 11:50]
emblim98 만듦 		wiki:javascript:javascript_note:queryselectorall [2023/01/13 18:44] (현재)
줄 137: 줄 137:
 문서에 %%class="example"%%를 가진 요소의 개수를 확인합니다(%%NodeList%% 객체의 length 속성 사용).\\ 문서에 %%class="example"%%를 가진 요소의 개수를 확인합니다(%%NodeList%% 객체의 length 속성 사용).\\
 <code javascript> <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> </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>
  
  
/volume1/web/dokuwiki/data/attic/wiki/javascript/javascript_note/queryselectorall.1621997440.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki