차이

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

--- wiki:javascript:javascript_note:queryselector [2021/05/26 08:58]
emblim98
+++ wiki:javascript:javascript_note:queryselector [2023/01/13 18:44] (현재)
@@ 줄 50: / 줄 50: @@
 ====Example====
 <code javascript>
+<body>
+  <p>This is a p element.</p> // dodgerblue backgroundColor 적용
+  <p>This is also a p element.</p>
+  <p>Click the button to add a background color to the first p element in the document.</p>
+  <button onclick="myFunction()">Try it</button>
+  <script>
+    function myFunction() {
+      document.querySelector("p").style.backgroundColor = "dodgerblue";
+    }
+  </script>
+</body>
 </code>
+====Example====
+문서에서 %%class="example"%%가 있는 첫 번째 %%<p>%% 요소를 가져옵니다.\\
+<code javascript>
+<body>
+  <h2 class="example">A heading with class="example"</h2>
+  <p class="example">A paragraph with class="example"</p>
+  <!-- crimson backgroundColor 적용 -->
+  <p>
+    Click the button to add a background color to the first p element
+    in the document with class="example".
+  </p>
+  <button onclick="myFunction()">Try it</button>
+  <script>
+    function myFunction() {
+      document.querySelector("p.example").style.backgroundColor = "crimson";
+    }
+  </script>
+</body>
+</code>
+====Example====
+%%id="demo"%%가 있는 요소의 텍스트 변경합니다:\\
+<code javascript>
+<body>
+  <p id="demo">This is a p element with id="demo"</p>
+  <!-- Hello World!로 텍스트가 변경됩니다. -->
+  <p>Click the button to change the text of the p element.</p>
+  <button onclick="myFunction()">Try it</button>
+  <script>
+    function myFunction() {
+      document.querySelector("#demo").innerHTML = "Hello World!";
+    }
+  </script>
+</body>
+</code>
+====Example====
+%%<div>%% 요소가 부모 요소인 문서에서 첫 번째 %%<p>%% 요소를 가져옵니다.\\
+<code javascript>
+<head>
+  <style>
+    div {
+      border: 1px solid #000;
+    }
+  </style>
+</head>
+<body>
+  <div>
+    <h3>H3 element</h3>
+    <p>I am a p element, my parent is a div element.</p>
+    // green background color가 적용됩니다.
+  </div>
+  <div>
+    <h3>H3 element</h3>
+    <p>I am a p element, my parent is also a div element.</p>
+  </div>
+  <p>
+    Click the button to change the bacgkround color of the first p element
+    in the document where the parent is a div element.
+  </p>
+  <button onclick="myFunction()">Try it</button>
+  <script>
+    function myFunction() {
+      var x = document.querySelector("div > p");
+      x.style.backgroundColor = "green";
+    }
+  </script>
+</body>
+</code>
+====Example====
+문서에서 %%"target"%%속성을 가진 첫 번째 %%<a>%% 요소를 가져옵니다.\\
+<code javascript>
+<head>
+  <style>
+    a[target] {
+      background-color: yellow;
+    }
+  </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> <!-- red border -->
+  <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
+  <p>
+    Click the button to add a red border to the first link that has a target attribute.
+  </p>
+  <button onclick="myFunction()">Try it</button>
+  <script>
+    function myFunction() {
+      document.querySelector("a[target]").style.border = "10px solid red";
+    }
+  </script>
+</body>
+</code>
+====Example====
+다음 예제는 여러 선택자가 작동하는 방식을 보여줍니다.\\
+\\
+두 개의 요소, 즉 %%<h2>%% 및 %%<h3>%% 요소가 있다고 가정합니다.\\
+\\
+다음 코드는 문서의 첫 번째 %%<h2>%% 요소에 배경색을 추가합니다.\\
+\\
+<code javascript>
+<body>
+  <h2>A h2 element</h2> <!-- red background color 적용됨 -->
+  <h3>A h3 element</h3>
+  <script>
+    document.querySelector("h2, h3").style.backgroundColor = "red";
+  </script>
+</body>
+</code>
+\\
+그러나 %%<h3>%% 요소가 문서에서 %%<h2>%% 요소 앞에 배치된 경우,\\
+%%<h3>%% 요소가 빨간색 배경색을 가지게 되는 요소입니다.\\
+\\
+<code javascript>
+<body>
+  <h3>A h3 element</h3> <!-- red background color 적용됨 -->
+  <h2>A h2 element</h2>
+  <script>
+    document.querySelector("h2, h3").style.backgroundColor = "red";
+  </script>
+</body>
+</code>
 {{tag>오션, Javascript HTML DOM Document querySelector()}}

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

사용자 도구

사이트 도구

차이

문서 도구