wiki:javascript:javascript_note:queryselectorall

차이

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

차이 보기로 링크

--- wiki:javascript:javascript_note:queryselectorall [2021/05/26 13:34]
emblim98
+++ wiki:javascript:javascript_note:queryselectorall [2023/01/13 18:44] (현재)
@@ 줄 315: / 줄 315: @@
 </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.1622003691.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)