DOM编程:深入理解window对象与浏览器结构

版权申诉
0 下载量 151 浏览量 更新于2024-07-05 收藏 1.6MB PPT 举报
本讲内容主要围绕DOM编程中的核心概念——浏览器对象及其窗口对象(Window)。DOM全称为Document Object Model,是一种编程接口,用于处理和操作网页文档。第12讲的重点在于理解Window对象在DOM编程中的作用和用法。 首先,任务一是介绍浏览器对象的分层结构。在DOM中,浏览器对象层次清晰,包括顶层的Window对象,其下是Document对象,代表浏览器窗口中的HTML文档。此外,还有Location对象,负责存储当前URL的相关信息,以及History对象,记录用户的浏览历史。这些对象构成了浏览器环境的基础,开发者可以通过它们获取和修改页面状态。 任务二深入讲解了Window对象的属性和常用方法。例如,Document对象是Window对象的子集,可以通过`window.document`访问。Window对象的属性如`document`、`history`、`location`、`name`、`status`等提供了丰富的功能。`location`属性允许程序员获取或改变当前URL,`history`则可用于回退和前进浏览。`window.alert`和`window.confirm`用于显示提示信息并让用户进行确认或取消操作,`window.open`用于创建新的窗口并加载指定的URL,`window.close`则用于关闭当前窗口。`showModalDialog`用于在模式窗口中显示HTML文档,而`setTimeout`则可以设置定时器执行特定函数,实现异步操作。 任务三展示了如何实际应用这些知识,通过`window.open`方法打开一个新的窗口,然后定义了一个`closewindow`函数来调用`window.close`关闭窗口。同时,由于Window对象是顶层容器,一些方法可以直接在顶级调用,无需明确指定`window.`,如`open("google.htm")`和`close()`的简化形式。 总结来说,本讲详细介绍了浏览器对象的窗口模型、Window对象的重要属性和方法,以及如何利用这些工具进行网页交互和控制。理解并熟练运用这些知识对于前端开发者进行DOM编程至关重要,它有助于实现动态网页、窗口管理以及与用户交互等功能。

{ type: "searchSelect", placeholder: "签约机构", valueName: 'signOrganId', optionName: "label", searchItemName: "label", optionId: "key", searchApi:commonService.orgPageList({}).then(res=>{ const {retData}=res retData.map(item=>{ return {key: item.id, label: item.organName, value: item.id,} }) }) }, 分析一下此段代码的报错 汉语解释index.jsx:55 Uncaught TypeError: item.searchApi is not a function at searchQuery (index.jsx:55:1) at onFocus (index.jsx:129:1) at onContainerFocus (BaseSelect.js:326:1) at HTMLUnknownElement.callCallback (react-dom.development.js:188:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1) at invokeGuardedCallback (react-dom.development.js:292:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:306:1) at executeDispatch (react-dom.development.js:389:1) at executeDispatchesInOrder (react-dom.development.js:414:1) at executeDispatchesAndRelease (react-dom.development.js:3278:1) at executeDispatchesAndReleaseTopLevel (react-dom.development.js:3287:1) at forEachAccumulated (react-dom.development.js:3259:1) at runEventsInBatch (react-dom.development.js:3304:1) at runExtractedPluginEventsInBatch (react-dom.development.js:3514:1) at handleTopLevel (react-dom.development.js:3558:1) at batchedEventUpdates$1 (react-dom.development.js:21871:1) at batchedEventUpdates (react-dom.development.js:795:1) at dispatchEventForLegacyPluginEventSystem (react-dom.development.js:3568:1) at attemptToDispatchEvent (react-dom.development.js:4267:1) at dispatchEvent (react-dom.development.js:4189:1) at unstable_runWithPriority (scheduler.development.js:653:1) at runWithPriority$1 (react-dom.development.js:11039:1) at discreteUpdates$1 (react-dom.development.js:21887:1) at discreteUpdates (react-dom.development.js:806:1) at dispatchDiscreteEvent (react-dom.development.js:4168:1)

2023-07-13 上传
2023-06-05 上传