JavaScript APIsJavaScript APIs：节点与窗口对象

---

学习目标

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

• 解释 如何操作节点（Nodes）。
• 描述 如何修改 HTML 元素的内容、内联样式及属性。
• 了解 如何使用窗口对象的方法与事件。
  

---

HTML DOM 常用 API

DOM Level 1 核心 和 Level 1 HTML 规范 涵盖了许多详细内容，这些内容通常被分为多个单元进行讲解。在本单元的后续部分，我们将重点关注以下内容：

• 常用脚本功能与属性：这些功能和属性在处理 HTML 页面时被广泛使用。
• 常见 DOM API：介绍用于访问网页中 HTML DOM 元素的常见 API。

在接下来的部分中，将深入讲解 DOM 元素的访问和操作，包括：

• 如何使用脚本获取 DOM 元素的引用。
• 如何操作这些 DOM 元素的内容、属性与样式。

这些知识将帮助您更高效地与 HTML 页面进行交互，提高网页的动态性和功能性！ 🌟

---

节点操作：访问与创建

1. 获取节点引用
   • document.getElementById(id)
     根据 id 属性返回唯一匹配的 HTML 或 XML 元素。

     let element = document.getElementById("myElement");
     

     
   • document.getElementsByTagName(tagName)
     返回具有指定标签名的元素列表（NodeList）。

     let paragraphs = document.getElementsByTagName("p"); // 获取所有段落
     

     
     
2. 创建节点
   • document.createElement(tagName)
     创建指定标签的新元素。

     let newPara = document.createElement("p");
     newPara.textContent = "Hello World!";
     document.body.appendChild(newPara); // 将段落添加到文档末尾
     

     
3. 插入节点
   • 使用以下方法将新创建的节点插入文档：
     • insertBefore：在指定节点前插入新节点。
     • appendChild：将新节点添加为子节点。
     • replaceChild：用新节点替换现有节点。
       

---

修改节点

1. 修改 HTML 内容
   • element.innerHTML
     获取或设置元素的 HTML 内容。

     document.getElementById("myDiv").innerHTML = "<p>新的内容</p>";
     

     
2. 修改内联样式
   • element.style
     获取或设置元素的内联 CSS 样式。

     let div = document.getElementById("myDiv");
     div.style.color = "blue"; // 修改字体颜色为蓝色
     

     
   • element.setAttribute('style', value)
     覆盖所有内联样式：

     div.setAttribute("style", "color: red; background-color: yellow;");
     

     
3. 修改属性
   • element.setAttribute(attrName, attrValue)
     动态设置元素属性。

     document.getElementById("image").setAttribute("src", "newImage.jpg");
     

   • element.getAttribute(attrName)
     获取指定属性的值。

     let srcValue = document.getElementById("image").getAttribute("src");
     

   • element.removeAttribute(attrName)
     删除指定属性。

     document.getElementById("image").removeAttribute("alt");
     

     

---

窗口对象操作

窗口方法

1. 打开新窗口
   • window.open(url, name, features, replace)
     打开一个新窗口并返回窗口对象的引用。

     let newWindow = window.open("https://example.com", "Example", "width=600,height=400");
     

     
2. 关闭窗口
   • reference.close()
     通过引用关闭打开的窗口。

     newWindow.close();
     

3. 输出信息
   • window.dump(message)
     将字符串写入浏览器控制台（替代 alert 方法）。

     window.dump("调试信息");
     

4. 页面滚动
   • window.scrollTo(x, y)
     滚动到页面的指定坐标。

     window.scrollTo(0, 500); // 滚动到页面的 y=500 位置
     

     

---

窗口事件

1. 页面加载事件
   • window.onload
     在页面加载完成后触发：

     window.onload = function () {
       console.log("页面已加载完成");
     };
     

2. 自动执行函数
   • 匿名函数可在页面加载后立即运行：

     window.onload = function () {
       (function addPara() {
         let para = document.createElement("p");
         para.textContent = "新段落内容";
         document.body.appendChild(para);
       })();
     };
     

     

---

总结

通过掌握这些 JavaScript APIs，您可以高效地操作 HTML 元素与窗口对象，提升网页的动态交互能力！ 🚀