HTML DOM の scripts コレクションとは？構文・プロパティ・使い方を実例付きで解説
HTML DOM の scripts コレクションは、HTML ドキュメント内に存在するすべての <script> 要素をまとめて取得できるオブジェクトです。ページ上のスクリプト要素を一覧として扱いたい場合や、動的にスクリプト情報を参照したい場合に便利です。
基本構文
scripts コレクションへのアクセスは、以下の構文で行います。
document.scripts
scripts コレクションのプロパティ
| プロパティ | 説明 |
|---|---|
| length | HTML ドキュメント内のコレクションに含まれる <script> 要素の数を返します。 |
scripts コレクションのメソッド
| メソッド | 説明 |
|---|---|
| [index] | コレクションから、指定したインデックス番号の <script> 要素を返します。 |
| item(index) | コレクションから、指定したインデックス番号の <script> 要素を返します。 |
| namedItem(id) | コレクションから、指定した id 属性を持つ <script> 要素を返します。 |
サンプルコード
ここでは、scripts コレクションを使ってページ内の <script> 要素の数を取得し、画面に表示する例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
ul{
list-style-type: none;
padding:0;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:50%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
font-weight:bold;
}
</style>
</head>
<body>
<script>
console.log("script one");
</script>
<h1>DOM scripts Collection Demo</h1>
<p>Hi, There are two script elements on this page:</p>
<script>
console.log("script two");
</script>
<button onclick="show()" class="btn">Show No. Of Script</button>
<div class='show'></div>
<script>
function show() {
var scriptList = document.scripts;
document.querySelector(".show").innerHTML=scriptList.length;
}
</script>
</body>
</html>
実行結果
このコードを実行すると、次のような画面が表示されます。
「Show No. Of Script」ボタンをクリックすると、ボタンの下にページ内の <script> 要素の総数が表示されます。
このように、document.scripts.length を参照するだけで、ドキュメント内のスクリプト要素の数を簡単に取得できます。インデックスや id を指定して特定の <script> 要素へアクセスすることも可能なので、用途に応じて活用してみてください。
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注