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

打印页面