JavaScript 선택기의 다양한 유형과 용도를 자세히 살펴보세요
소개:
JavaScript는 웹 개발에 널리 사용되는 강력한 스크립트 언어입니다. 개발 과정에서 선택기를 통해 HTML 요소를 얻거나 조작해야 하는 경우가 많습니다. JavaScript는 다양한 요구 사항을 충족하기 위해 다양한 유형의 선택기를 제공합니다. 이 기사에서는 JavaScript 선택기의 다양한 유형과 용도를 심층적으로 살펴보고 구체적인 코드 예제를 제공합니다.
1. getElementById 선택기
getElementById는 요소의 ID 속성을 통해 해당 HTML 요소를 가져옵니다. 가장 기본적인 선택자입니다.
샘플 코드: getElementById를 통해 요소를 가져오고 해당 콘텐츠를 수정합니다.
<!DOCTYPE html> <html> <head> <script> function changeContent() { var element = document.getElementById("myElement"); element.innerHTML = "Hello, World!"; } </script> </head> <body> <div id="myElement">原内容</div> <button onclick="changeContent()">点击修改内容</button> </body> </html>
2. getElementsByClassName 선택기
getElementsByClassName은 요소의 클래스 이름을 통해 HTML 요소 세트를 가져옵니다. 페이지에 동일한 클래스 이름을 가진 요소가 있는 경우 해당 요소를 일괄적으로 작동할 수 있습니다.
샘플 코드: getElementsByClassName을 통해 요소 세트를 가져오고 해당 스타일을 수정합니다.
<!DOCTYPE html> <html> <head> <style> .highlight { background-color: yellow; } </style> <script> function addHighlight() { var elements = document.getElementsByClassName("myElement"); for (var i = 0; i < elements.length; i++) { elements[i].classList.add("highlight"); } } </script> </head> <body> <div class="myElement">元素1</div> <div class="myElement">元素2</div> <div class="myElement">元素3</div> <button onclick="addHighlight()">点击添加样式</button> </body> </html>
3. getElementsByTagName 선택기
getElementsByTagName은 요소의 태그 이름을 통해 HTML 요소 세트를 가져옵니다. 특정 태그 이름을 지정하여 요소를 선택할 수 있습니다.
샘플 코드: getElementsByTagName을 통해 p 태그를 가져오고 해당 콘텐츠를 수정합니다.
<!DOCTYPE html> <html> <head> <script> function changeContent() { var elements = document.getElementsByTagName("p"); for (var i = 0; i < elements.length; i++) { elements[i].innerHTML = "这是第" + (i+1) + "个段落"; } } </script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <button onclick="changeContent()">点击修改内容</button> </body> </html>
4. querySelector
querySelector는 CSS 선택기의 구문을 통해 HTML 요소를 선택합니다. 요소의 ID, 클래스 이름, 태그 이름 및 기타 선택 방법을 기반으로 요소를 얻을 수 있습니다.
샘플 코드: querySelector를 통해 첫 번째로 일치하는 요소를 가져오고 스타일을 수정합니다.
<!DOCTYPE html> <html> <head> <style> .highlight { background-color: yellow; } </style> <script> function addHighlight() { var element = document.querySelector(".myElement"); element.classList.add("highlight"); } </script> </head> <body> <div class="myElement">元素1</div> <div class="myElement">元素2</div> <div class="myElement">元素3</div> <button onclick="addHighlight()">点击添加样式</button> </body> </html>
요약:
이 문서에서는 JavaScript 선택기의 다양한 유형과 용도를 심층적으로 살펴보고 구체적인 코드 예제를 제공합니다. getElementById, getElementsByClassName, getElementsByTagName, querySelector 등의 선택자를 통해 HTML 요소를 쉽게 얻고 조작할 수 있습니다. 선택기를 유연하게 사용하면 JavaScript 애플리케이션을 보다 효율적으로 개발하는 데 도움이 될 수 있습니다.
위 내용은 JavaScript 선택기의 유형과 용도에 대한 심층적인 살펴보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!