ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で getElementById を使用する方法
JavaScript で getElementById を使用する方法
- 不言オリジナル
- 2018-12-24 10:30:1225103ブラウズ
getElementById は、指定された ID 値を持つ要素を Element オブジェクトとして返すメソッドです。getElementById を使用すると、HTML タグから指定された ID を取得して、特定のコンテンツを処理できます。
getElementById の使用方法
getElementById を使用して要素を取得する方法は次のとおりです。
document.getElementById(id)
欲しいid HTMLで取得したid要素。 HTML では同じ ID を複数回使用できないため、一意の ID 値である必要があります。
HTML に複数の ID がある場合、最初に一致した ID 要素のみが返されます。指定されたIDが存在しない場合はnullが返されます。
具体的な例を見てみましょう
表示文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<p id="text"></p>
<script>
document.getElementById("text").innerHTML = "你好，php中文网！";
</script>
</body>
</html>実行結果は次のとおりです
接続テキストの表示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<p id="text2"></p>
<script>
document.getElementById("text2").innerHTML = "a" + "b";
</script>
</body>
</html>実行結果は次のとおりです次のように
計算結果の表示#<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<p id="text3"></p>
<script>
document.getElementById("text3").innerHTML = 3 + 5;
</script>
</body>
</html>
#実行結果は次のとおりです
##最後に、DOM (Document Object Model) では getElementById を使用することが多くあるため、できるだけ使いこなす必要があります。 
以上がJavaScript で getElementById を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。