=====The source of the article==== HTML DOM Document querySelector() Method
<script> function myFunction() { document.querySelector(".example").style.backgroundColor = "red"; } </script>
querySelector() 메서드는 문서에서 지정된 CSS 선택자와 일치하는 첫 번째 요소를 반환합니다.
Note: querySelector() 메서드는 지정된 선택자와 일치하는 첫 번째 요소만 반환합니다.
모든 일치 항목을 반환하려면 대신 querySelectorAll () 메서드를 사용합니다.
선택자가 여러 번 사용되는 문서의 ID와 일치하는 경우 ("id"는 페이지 내에서 고유해야 하며
두 번 이상 사용되지 않아야 함) 첫 번째 일치 요소를 반환합니다.
CSS 선택자에 대한 자세한 내용은 CSS Selector Tutorial 및 CSS Selectors Reference를 참조하십시오.
document.querySelector(CSS selectors)
| Parameter | Type | Description |
|---|---|---|
| CSS Selectors | String | 필수입니다. 요소와 일치시킬 하나 이상의 CSS 선택기를 지정합니다. 이들은 ID, 클래스, 유형, 속성, 속성 값 등을 기반으로 HTML 요소를 선택하는 데 사용됩니다. 선택자가 여러 개인 경우, 각 선택자를 쉼표로 구분합니다. 반환되는 요소는 문서에서 처음 발견된 요소에 따라 다릅니다 ( “추가 예제”참조). Tip: 모든 CSS 선택자 목록은 CSS Selectors Reference를 참조하십시오.. |
| DOM Version | Selector Level1 Document Object |
|---|---|
| Return Value(반환 값) | 지정된 CSS 선택자와 일치하는 첫 번째 요소를 나타내는 NodeList 객체입니다. 일치하는 항목이 없으면, null이 반환됩니다. 지정된 선택자가 유효하지 않은 경우, SYNTAX_ERR 예외가 발생합니다. |
문서의 첫 번째 <p> 요소를 가져옵니다.
<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>
문서에서 class="example"가 있는 첫 번째 <p> 요소를 가져옵니다.
<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>
id="demo"가 있는 요소의 텍스트 변경합니다:
<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>
<div> 요소가 부모 요소인 문서에서 첫 번째 <p> 요소를 가져옵니다.
<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>
문서에서 "target"속성을 가진 첫 번째 <a> 요소를 가져옵니다.
<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>
다음 예제는 여러 선택자가 작동하는 방식을 보여줍니다.
두 개의 요소, 즉 <h2> 및 <h3> 요소가 있다고 가정합니다.
다음 코드는 문서의 첫 번째 <h2> 요소에 배경색을 추가합니다.
<body> <h2>A h2 element</h2> <!-- red background color 적용됨 --> <h3>A h3 element</h3> <script> document.querySelector("h2, h3").style.backgroundColor = "red"; </script> </body>
그러나 <h3> 요소가 문서에서 <h2> 요소 앞에 배치된 경우,
<h3> 요소가 빨간색 배경색을 가지게 되는 요소입니다.
<body> <h3>A h3 element</h3> <!-- red background color 적용됨 --> <h2>A h2 element</h2> <script> document.querySelector("h2, h3").style.backgroundColor = "red"; </script> </body>