HTML ScriptingHTML 脚本编程

---

学习目标

观看本视频后，您将能够：

• 定义 脚本编程。
• 解释 浏览器如何启用脚本功能。
• 识别 DOM 树的访问器。
  

---

脚本编程的定义与应用

脚本编程在网站中的使用

脚本编程通常通过 JavaScript 实现，可以直接嵌入到 HTML 代码中的 <script> 标签内，或通过外部文件进行引用。

• 脚本可以提供更具互动性的用户体验。
• 常见应用场景包括：表单验证、动态更新网站内容、图像操作等。

⚠️ 重要提示：由于脚本可能会被禁用，因此建议使用脚本，但不要完全依赖它。

---

脚本启用条件

脚本功能在浏览器上下文中启用的条件如下：

1. 浏览器支持脚本功能。
2. 用户启用了脚本功能。

---

HTML5 沙盒模式

HTML5 定义了一个 沙盒化的媒体类型，它规定了额外的内容限制，适用于托管不信任内容的情况。沙盒浏览环境可以在页面级别设置，也可以作为嵌入对象的属性进行指定。

沙盒属性的使用

• 如果页面中包含嵌入对象且没有设置沙盒属性，则该嵌入对象将继承与页面相同的权限。
• 这种隐式权限可能允许第三方广告商执行脚本，因此，为了防止无意间授予嵌入对象权限，建议在所有包含嵌入对象的标签上使用 sandbox 属性。

---

HTML 文档与 DOM 访问

每个加载到浏览器页面的 HTML 文档都会成为一个 Document 对象。该对象提供对页面中所有 HTML 元素的访问，并可以通过脚本访问。

DOM 树访问器

HTML 文档 API 提供了对页面上所有 HTML 元素的访问，访问属性前缀为 document。以下是常见的 DOM 树访问方法：

---

常见的 DOM 树方法

1. document.getElementById('id')
   • 该方法需要一个参数：元素的 id。
   • 它返回与指定 id 匹配的元素。
2. document.getElementsByTagName('tag')
   • 该方法需要一个参数：元素的标签名（如 div、p 等）。
   • 它返回一个 NodeList，包含所有匹配该标签名的元素。

示例：使用 document API

以下是一个包含 JavaScript 代码的 HTML 片段，展示了如何使用 document API：

<!DOCTYPE html>
<html>
  <body>
    <input type="text" id="textField1" value="Hello World!">
    <button onclick="textChecker()">Submit</button>

    <script>
      function textChecker() {
        var userInput = document.getElementById('textField1').value;
        if (userInput) {
          alert("You entered: " + userInput);
        } else {
          alert("No input provided.");
        }
      }
    </script>
  </body>
</html>

---

代码输出示例

当用户在输入框中输入“Test”并点击 Submit 时，页面会弹出一个 alert 对话框，显示用户输入的内容。

• 输入：“Test”
• 输出：弹出对话框显示 "You entered: Test"

---

总结

在本视频中，您了解了：

• 脚本编程 用于提供更具互动性的用户体验。
• 由于脚本可能被禁用，因此建议使用脚本，但不要完全依赖它。
• 浏览器启用脚本功能的条件。
• HTML5 沙盒模式帮助您管理 iframe 内容，避免未授权的第三方脚本执行。
• HTML 文档会被加载为 Document 对象，可以通过脚本访问和操作页面中的所有元素。

通过使用 DOM 树访问器 和相关方法，您能够轻松地操作网页中的内容和元素。