JavaScript で getElementById を使用する方法-jsチュートリアル-php.cn

JavaScript で getElementById を使用する方法

不言

リリース： 2018-12-24 10:30:12

オリジナル

25033 人が閲覧しました

getElementById は、指定された ID 値を持つ要素を Element オブジェクトとして返すメソッドです。getElementById を使用すると、HTML タグから指定された ID を取得して、特定のコンテンツを処理できます。

JavaScript で getElementById を使用する方法で getElementById を使用する方法で getElementById を使用する方法

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>

ログイン後にコピー

実行結果は次のとおりです

JavaScript で getElementById を使用する方法で getElementById を使用する方法で getElementById を使用する方法

接続テキストの表示

<!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>

ログイン後にコピー

実行結果は次のとおりです次のように

JavaScript で getElementById を使用する方法で getElementById を使用する方法で getElementById を使用する方法

計算結果の表示#

<!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 サイトの他の関連記事を参照してください。