HTML - DOM 文件 scripts 屬性

HTML DOM 文件的 scripts 集合是一個只讀屬性，用於將 HTML 文件中所有 <script> 元素作為集合返回。

語法

document.scripts;

屬性

屬性	描述
length	它返回 HTML 文件中存在的 <script> 元素的數量。

方法

下表顯示了 DOM scripts 集合提供的方法列表。

方法	描述
[索引]	從給定索引處的集合中返回 <script> 元素。索引從 0 開始，如果索引超出範圍則返回 null。
item(索引)	從給定索引處的集合中返回 <script> 元素。索引從 0 開始，如果索引超出範圍則返回 null。它類似於第一個方法。
namedItem(id)	從給定 id 的集合中返回 <script> 元素。如果 id 不存在則返回 null。

返回值

它返回一個 HTMLCollection，其中列出了文件中存在的所有 <script> 元素。集合中存在的元素已排序，並按其在 HTML 文件中出現的順序顯示。

HTML DOM 文件“scripts”屬性示例

以下示例說明了 scripts 屬性和方法的使用。

獲取 <script> 元素的數量

在以下示例中，length 屬性用於返回文件中 <script> 元素的數量。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document scripts Property
    </title>
</head>
<body>
    <p>
        Click to get the number of <script> element.
    </p>
    <button onclick="fun()">Click me</button>
    <p id="scripts"></p>
    <script></script>
    <script></script>
    <script></script>
    <script>
        function fun() {
            let x = document.scripts.length;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

獲取第一個指令碼元素的內容

在此示例中，我們將使用 scripts [索引] 方法獲取第一個 <script> 的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document scripts Property
    </title>
</head>
<body>
    <script>
        document.getElementById("s1").innerHTML = 
                            "This is first Script."
    </script>
    <script>
        document.getElementById("s2").innerHTML = 
                            "This is second Script."
    </script>
    <script>
        document.getElementById("s3").innerHTML = 
                            "This is third Script."
    </script>
    <p>
        Click to get content of first script element.
    </p>
    <button onclick="fun()">Click me</button>
    <p id="s1"></p>
    <p id="s2"></p>
    <p id="s3"></p>
    <p id="scripts"></p>
    <script>
        function fun() {
            let x = document.scripts[0].text;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

獲取第二個指令碼元素的內容

在此示例中，我們將使用 scripts item(索引) 方法獲取第二個 <script> 的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document scripts Property
    </title>
</head>
<body>
    <script>
        document.getElementById("s1").innerHTML = 
            "This is first Script."
    </script>
    <script>
        document.getElementById("s2").innerHTML = 
            "This is second Script."
    </script>
    <script>
        document.getElementById("s3").innerHTML = 
            "This is third Script."
    </script>
    <p>Click to get content of second script element.</p>
    <button onclick="fun()">Click me</button>
    <p id="s1"></p>
    <p id="s2"></p>
    <p id="s3"></p>
    <p id="scripts"></p>
    <script>
        function fun() {
            let x = document.scripts.item(1).text;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

獲取具有指定 ID 的指令碼元素的內容。

在以下示例中，我們將使用 scripts namedItem(id) 方法獲取具有指定 ID 的 <script> 的內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML DOM document scripts Property</title>
</head>
<body>
    <script>
        document.getElementById("s1").innerHTML = 
                "This is first Script."
    </script>
    <script>
        document.getElementById("s2").innerHTML = 
                "This is second Script."
    </script>
    <script id="last">
        document.getElementById("s3").innerHTML = 
                "This is third Script."
    </script>
    <p>
        Click to get content of script element with id= 's3'.
    </p>
    <button onclick="fun()">Click me</button>
    <p id="s1"></p>
    <p id="s2"></p>
    <p id="s3"></p>
    <p id="scripts"></p>
    <script>
        function fun() {
            let x = document.scripts.namedItem("last").text;
            document.getElementById("scripts").innerHTML = x;
        }
    </script>
</body>
</html>

支援的瀏覽器

屬性
scripts	是 1	是 12	是 9	是 3	是 12.1

html_dom_document_reference.htm

列印頁面