JavaScript 선택기의 유형과 용도에 대한 심층적인 살펴보기
- 王林원래의
- 2023-12-26 12:38:511369검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!