NEW ARTICLE
PyCharm 最近の変更を一覧表示するショートカットキー
  1. HOME
  2. javascript
  3. javascript document.getElementByIdの省略して記述する

javascript document.getElementByIdの省略して記述する

javascript document.getElementByIdの省略して記述する

javascriptで、document.getElementByIdの省略して記述する方法を掲載してます。

目次

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 103.0.5060.114
Javascript サンプル集はこちら

document.getElementByIdの省略

「id」が指定されていれば、「document.getElementById」は省略して「id名」のみで記述することが可能です。

<p id="hoge"></p>

<script>

hoge.textContent = "test";
// document.getElementById("hoge").textContent = "test";　と同じ

</script>

実行結果

「’use strict’;」を使用しても、エラーにはなりません。

use strictについて
<p id="hoge"></p>

<script>

'use strict';
hoge.textContent = "test";

</script>

これは、「id属性」があるhtmlタグは「window」オブジェクトの同名のプロパティとして利用することができ、「window」オブジェクトは記述を省略することができるためです。
正確に記述すると以下のようになります。

window.hoge.textContent = "test";

また、「document.getElementById」と比較してみると「true」が返ります。

<p id="hoge"></p>

<script>

console.log( document.getElementById("hoge") === hoge )
// true

</script>

注意

ただし、「id名」に数値や予約語、演算子は、利用できないので注意が必要です。

<p id="123"></p>
123.textContent = "test"; // エラー Uncaught SyntaxError: Invalid or unexpected token

<p id="var"></p>
var.textContent = "test"; // エラー Uncaught SyntaxError: Unexpected token '.'

<p id="hoge-hoge"></p>
hoge-hoge.textContent = "test"; // エラー Uncaught SyntaxError: Invalid left-hand side in assignment

「document.getElementById」を使用すれば利用することは可能です。

<p id="123"></p>
<p id="var"></p>
<p id="hoge-hoge"></p>

<script>

document.getElementById("123").textContent = "test";
document.getElementById("var").textContent = "test";
document.getElementById("hoge-hoge").textContent = "test";

</script>

また、既に利用されている場合も正常に動作しないので注意が必要です。
※エラーにはなりませんが動作はしません。この当たりが、正常に動作をしなくなる要因となりそうなので、利用時は注意が必要です。

<p id="hoge"></p>

<script>

let hoge = "test"

hoge.textContent = "test";

</script>

存在チェック

存在チェックは、以下のように「typeof」を使用することで可能です。

<p id="hoge"></p>

<script>

if( typeof hoge !== 'undefined' )　hoge.textContent = "test";

</script>