本资源是关于HTML文档的树状结构与JavaScript基础学习的第一章内容。章节主要介绍HTML文档的构成以及如何通过JavaScript实现动态内容更改。HTML文档可以看作是一个树状结构,其中根节点是最顶层元素,如`<html>`标签,其下有子节点,如`<head>`和`<body>`等。这些子节点又可以包含更多的元素,形成层次关系。
核心知识点包括:
1. **HTML文档树状结构**:
- 根节点(如`<html>`)是整个文档的起点,所有的其他节点都在其下。
- 子节点(如`<head>`和`<body>`)是根节点的直接组成部分,分别存放文档的元数据和可见内容。
- 相邻节点指的是在同一层级上的节点,它们可能在布局上紧密相连,但不是父子关系。
2. **动态内容更改**:
- 通过JavaScript的Document Object Model (DOM)来操作HTML内容。DOM提供了一种接口,允许开发者通过代码来读取、修改和创建HTML元素。
- 演示示例3展示了如何使用`document.getElementById()`获取元素并动态改变其`innerHTML`和`href`属性,如将链接文本和URL设置为“搜狐”。
3. **DOM编程与window对象**:
- JavaScript中的脚本执行原理是基于事件驱动的,当用户交互或定时器触发时,脚本会被执行。
- 控制语句如条件语句(if...else)、循环(for...while)等用于程序流程控制。
- 有参函数的创建和调用是面向对象编程的基础,如定义函数`changeLink`并通过`onclick`事件触发。
4. **window对象**:
- `window`对象是JavaScript全局对象,代表浏览器的窗口或框架。它包含了常用的属性如location(用于访问当前URL)、history(历史记录)等。
- `window.open()`方法用于创建新窗口或弹出窗口,常用于广告窗口特效的制作。
5. **实例演示**:
- 演示示例1和2分别涉及广告窗口特效(可能通过open()方法实现)和时钟显示特效(可能利用Date对象和setTimeout()方法定时更新显示时间)。
- 操作任务要求学员掌握使用DOM查找特定元素、制作广告窗口样式和使用setTimeout()方法与Date对象创建日期显示效果。
通过学习这一章,学生将能够深入理解HTML文档结构与JavaScript在动态内容调整方面的应用,为进一步的JavaScript编程打下坚实基础。