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

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM Document querySelector()======
<WRAP left notice 80%>
  * description : Javascript HTML DOM Document querySelector() 
  * 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_queryselector.asp|HTML DOM Document querySelector() Method]]\\

====Example====
<code javascript>
  <script>
    function myFunction() {
      document.querySelector(".example").style.backgroundColor = "red";
    }
  </script>
</code>

=====Definition and Usage=====
%%querySelector()%% 메서드는 문서에서 지정된 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.\\
\\
**Note:** %%querySelector()%% 메서드는 지정된 선택자와 일치하는 첫 번째 요소만 반환합니다.\\ 
모든 일치 항목을 반환하려면 대신 querySelectorAll () 메서드를 사용합니다.\\
\\
선택자가 여러 번 사용되는 문서의 %%ID%%와 일치하는 경우 (%%"id"%%는 페이지 내에서 고유해야 하며\\ 
두 번 이상 사용되지 않아야 함) 첫 번째 일치 요소를 반환합니다.\\
\\
CSS 선택자에 대한 자세한 내용은 [[https://www.w3schools.com/css/css_syntax.asp|CSS Selector Tutorial]] 및 [[https://www.w3schools.com/cssref/css_selectors.asp|CSS Selectors Reference]]를 참조하십시오.\\

=====Syntax=====
<code javascript>
document.querySelector(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         ^ Selector Level1 Document Object                                                                                                    ^
| Return Value(반환 값)  | 지정된 CSS 선택자와 일치하는 첫 번째 요소를 나타내는 %%NodeList%% 객체입니다. 일치하는 항목이 없으면, %%null%%이 반환됩니다. 지정된 선택자가 유효하지 않은 경우, %%SYNTAX_ERR%% 예외가 발생합니다.  |

\\
=====More Examples=====
문서의 첫 번째 %%<p>%% 요소를 가져옵니다.\\

====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

사용자 도구

사이트 도구

문서 도구
