jQuery에서 ID로 요소 가져오기
JavaScript에서는 document.getElementById() 메소드를 사용하여 ID로 요소를 가져올 수 있습니다. jQuery에서 $('#contents')를 사용하여 ID로 요소를 가져올 수 있습니다.
이 자습서에서는 두 가지 방법을 모두 사용하여 ID별로 요소를 가져오는 방법을 보여줍니다.
JavaScript에서 ID로 요소 가져오기
document.getElementById()는 ID로 요소를 가져오는 데 가장 많이 사용되는 방법입니다. 이 방법은 주로 웹 디자인에서 요소의 값을 변경하거나 해당 요소를 가져오는 데 사용됩니다.
이 메서드의 구문은 다음과 같습니다.
document.getElementById('id')
이 방법을 사용하여 ID로 요소를 가져오는 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>
Select element by ID in javascript
</title>
</head>
<body style="border: 4px solid blue; min-height: 300px; text-align: center;">
<h1 style="color:blue;" id="delftstack">
DELFTSTACK
</h1>
<script>
setTimeout(function() {
document.getElementById('delftstack').style.color = "green"
}, 3000);
</script>
</body>
</html>
위의 코드는 h1 요소 ID를 가져오고 시간 초과 시 색상을 변경합니다. 출력 참조:
jQuery에서 ID로 요소 가져오기
jQuery에는 ID로 요소를 선택하는 더 쉬운 방법이 있습니다. jQuery에는 고유한 ID를 가진 요소를 선택할 수 있는 ID 선택기가 있습니다.
이 메서드의 구문은 다음과 같습니다.
$("#idname");
ID를 통해 요소의 배경을 변경하는 jQuery의 예를 시도해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>
Select element by ID in JQuery
</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body style="border: 4px solid blue; min-height: 300px; text-align: center;">
<h1 style="color:blue;" id="delftstack">
DELFTSTACK
</h1>
<script>
setTimeout(function () {
$('#delftstack').css("background-color", "yellow");;
}, 3000);
</script>
</body>
</html>
이 코드의 출력을 참조하십시오.
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook