現在処理を実行しているscript要素を取得(currentScript)

広告

Document オブジェクトの currentScript プロパティを参照すると現在実行している <script> 要素を取得します。 currentScript プロパティで取得した要素に対して insertAdjacentHTML メソッドを実行することで、 Document.write の代わりとして使用することもできます。ここでは Document.currentScript プロパティの使い方について解説します。

currentScriptプロパティの使い方

Document オブジェクトの currentScript プロパティを参照すると現在実行している <script> 要素を取得します。書式は次のとおりです。

document.currentScript

次のサンプルをみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<script>
let element = document.currentScript;
console.log(element);
</script>

</body>
</html>

この HTML ページをブラウザで表示するとコンソールには次のように出力されます。

>> <script>
>> let element = document.currentScript;
>> console.log(element);
>> </script>

このように document.currentScript プロパティを参照すると、現在実行している <script> 要素を取得することができます。

取得した <script> 要素に対して Element オブジェクトの insertAdjacentHTML メソッドと実行することで、現在実行している <script> 要素の前や後ろにノードを追加することができます。

<script>
let element = document.currentScript;
element.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
</script>

※ insertAdjacentHTML メソッドの詳しい使い方については「HTMLを表す文字列からノードを作成し指定の位置に追加(insertAdjacentHTML)」を参照されてください。

現在利用が推奨されていない Document.write の代わりにドキュメントに対してテキストを書き込むための方法のひとつとして Document.currentScript プロパティが利用できます。

サンプルコード

次のサンプルを見てください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>

<script>
document.currentScript.insertAdjacentHTML('beforebegin', '<p>Hello</p>');
</script>

<script>
document.currentScript.insertAdjacentHTML('beforebegin', '<p>Bye</p>');
</script>

</body>
</html>

この HTML ページをブラウザで表示すると、 HTML ページに含まれている 2 つの <script> 要素の前に p タグの要素をそれぞれ追加して表示します。

currentScriptプロパティの使い方(1)

実際に確認してみると <script> 要素の前に p タグの要素が追加されていることが確認できます。

currentScriptプロパティの使い方(2)

-- --

Document.currentScript プロパティの使い方について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。