首頁 > 文章 > web前端 > JavaScript中getElementById怎麼使用

JavaScript中getElementById怎麼使用

不言原創: 2018-12-24 10:30:1224944瀏覽

getElementById是將具有指定的id值的要素作為Element物件傳回的方法，可以使用getElementById從HTML標籤取得指定的ID來處理某些內容，下面我們就來具體看看getElementById的使用方法。

JavaScript中getElementById怎麼使用中getElementById怎麼使用中getElementById怎麼使用

getElementById的用法

使用getElementById取得元素的方式如下

document.getElementById(id)

在id中設定你希望在HTML中取得的id元素。由於在HTML中不能多次使用相同的id，因此它必須是唯一的id值。

如果HTML中有多個id，則只傳回第一個符合的id元素。如果指定的id不存在，則傳回null。

我們來看具體的範例

顯示字元

##顯示字元

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="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怎麼使用

<!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（文檔物件模型）中使用getElementById的情況很多，所以我們需要盡可能的掌握它。 ###

以上是JavaScript中getElementById怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html NULL 对象 dom

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用JavaScript的replace替換字串下一篇：如何使用JavaScript的replace替換字串

看更多