jQuery で ID で要素を取得
JavaScript では、メソッド document.getElementById() を使用して、ID で要素を取得できます。jQuery では、$('#contents') を使用して ID で要素を取得できます。
このチュートリアルでは、両方の方法を使用して ID で要素を取得する方法を示します。
JavaScript で ID で要素を取得
document.getElementById() は、ID で要素を取得するために使用される最も一般的なメソッドです。このメソッドは主に、要素の値を変更したり、その要素を取得したりするために Web デザインで使用されます。
このメソッドの構文は次のとおりです。
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");
jQuery の例を試してみましょう。これは、ID を介して要素を取得することにより、要素の背景を変更します。
<!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