JavaScript基础学习:DOM编程与window对象

需积分: 12 0 下载量 109 浏览量 更新于2024-08-23 收藏 1.65MB PPT 举报
"这篇资料主要介绍了JavaScript中的window对象及其常用方法和事件,同时涉及DOM编程的基础知识,包括如何动态改变HTML内容。" 在JavaScript中,`window`对象是全局对象,意味着所有在全局作用域中定义的变量和函数都是`window`对象的属性和方法。以下是一些`window`对象的常用方法和事件: 1. **onLoad事件**:当浏览器完成整个HTML页面的加载,包括图像和其他外部资源时触发。通常用于页面加载后的初始化操作。 2. **alert()**:显示一个简单的对话框,包含一条信息和一个确定按钮,用于向用户显示警告或确认信息。 3. **confirm()**:与`alert()`相似,但包含一个确定和取消按钮,允许用户做出选择。返回一个布尔值,表示用户是否点击了确定。 4. **open()**:创建一个新的浏览器窗口或者打开一个已命名的窗口,并加载指定的URL。例如:`window.open('http://example.com', 'newWindow')`。 5. **close()**:关闭当前窗口或标签页,如果用户没有其他标签页,此操作可能被浏览器阻止。 6. **showModalDialog()**:创建一个模态对话框,用户必须关闭对话框才能与页面的其他部分交互。常用于需要用户输入数据的场景。 7. **setTimeout()**:设置一个定时器,在指定的毫秒数后执行一个函数。例如:`setTimeout(functionToRun, 3000)`将在3秒后执行`functionToRun`。 在DOM编程中,`window`对象的这些方法可以用来操纵网页的动态行为。例如,`setTimeout()`配合Date对象可以实现定时更新,如时钟显示特效。此外,通过`window.open()`可以创建广告窗口特效,实现窗口的动态打开和关闭。 DOM(Document Object Model)是HTML和XML文档的结构化表示,它将文档视为一系列相互关联的对象。在DOM中,HTML元素被视为节点,有属性、方法和事件。例如,`getElementById()`方法用于根据ID获取HTML元素,`innerHTML`属性可以用来获取或设置元素的HTML内容,而`href`属性则用于读写链接地址。 在示例代码中,`changeLink()`函数展示了如何使用DOM来动态改变HTML内容。通过`getElementById('myAnchor')`找到指定ID的`<a>`标签,然后分别修改其`innerHTML`和`href`属性,实现了链接文字和链接地址的动态更新。 了解和掌握这些基本的JavaScript和DOM知识对于前端开发至关重要,它们允许开发者创建交互式和动态的网页应用。在实际工作中,结合CSS和JavaScript,开发者可以实现更复杂的用户界面和交互效果。