JavaScript BOM与DOM核心操作详解

BOM窗口管理与历史操作

window对象是浏览器窗口的全局对象，提供了与浏览器窗口交互的接口。

在窗口管理方面，主要涉及打开和关闭窗口的操作。

window.open()用于打开新窗口，其接受三个关键参数。

第一个参数指定载入新窗口的页面的URL地址。

第二个参数定义新窗口的名称，用于标识该窗口。

第三个参数为特性字符串，包含一个布尔值，用于说明是否用新载入的页面替换当前载入的页面。

window.close()方法用于关闭当前窗口或指定的窗口实例。

系统对话框提供与用户的简单交互，包括三种常见类型。

alert("hello world!")用于显示带有提示信息的警告对话框，用户点击确定后关闭。

confirm("Are you sure?")显示确认对话框，用户需进行选择操作，返回布尔值。

prompt("你的名字是说明？","")弹出提示框，允许用户输入文本信息。

时间间隔控制涉及定时执行代码的功能，分为单次和循环两种模式。

setTimeout("alert('hello world!')",3000)表示间隔3秒钟执行hello world只执行一次，适用于延迟操作。

clearTimeout用于取消由setTimeout设置的定时器，防止代码执行。

setInterval("alert('hello world')",3000)表示每隔3秒中执行一次，适用于周期性任务。

clearInterval用于取消由setInterval设置的定时器，停止周期性执行。

历史管理通过window.history对象实现，支持页面前进、后退及历史记录查询。

window.history.go(-1)回到上一页，实现后退导航功能。

window.history.back回到上一页，与go(-1)效果相同，提供标准的后退行为。

window.history.go(1)前进一页，实现向前导航功能。

window.history.forward前进一页，与go(1)效果相同，提供标准的前进行为。

window.history.length查询看历史中的页面数，用于获取历史记录栈的大小。

DOM节点访问与属性操作

document对象代表当前文档，提供了访问页面元素的各种属性和方法。

document.links[0]访问链接，通过索引获取页面中的链接元素。

document.images[0]或document.images["imgHome"]访问图像，支持索引或ID访问图片元素。

document.forms[0]或document.forms["frmSubscribe"]访问表单，通过索引或名称获取表单元素。

Location对象包含当前页面的位置信息，是DOM中的重要组成部分。

href属性表示当前载入的页面的完整的URL，用于获取或设置页面地址。

DOM中最主要的节点包括元素、属性、文本和注释四种类型。

1.元素节点(Elenment)，代表HTML标签，是DOM树的核心结构。

2.属性节点(Attributes)，存储元素的属性信息，如class、id等。

3.文本节点(Text)，包含元素内的文本内容，是用户可见的数据载体。

4.注释节点(Comment)，用于在代码中添加注释，不影响页面渲染。

所有类型节点的通用方法提供了访问节点属性和子节点的标准接口。

查找节点属性包括名称、值、类型及兄弟节点关系。

nodeName属性返回节点名字，标识节点类型或标签名。

nodeValue属性返回节点的值，主要针对文本节点，如果是元素节点返回为null。

nodeType属性返回节点的类型，用于区分元素、属性、文本等节点。

firstChild属性指向第一个儿子节点，用于访问子节点列表中的第一个元素。

lastChild属性指向第二个儿子节点，用于访问子节点列表中的最后一个元素。

childNodes属性包含所有的子节点，支持两种方式访问，用于遍历子节点集合。

previousSibling属性指向前一个兄弟节点，用于同级节点间的导航。

nextSibling属性指向后一个兄弟节点，用于同级节点间的导航。

DOM节点增删改查与创建

操作节点涉及属性的获取、节点的增删改及创建克隆等功能。

attributes属性包含了代表的一个元素的特性的Attr对象，仅用于Element节点。

appendChild方法添加一个新的节点在最后，用于向父节点追加子节点。

removeChild方法删除一个节点，用于从父节点中移除指定的子节点。

replaceChild方法替换节点，用新节点替换父节点中的旧节点。

insertBefore方法在指定节点之前添加一个节点，用于插入子节点到特定位置。

创建节点涉及元素和文本节点的实例化，是DOM操作的基础。

createElement方法创建一个元素节点，用于动态生成HTML元素。

createTextNode方法创建一个文本节点，用于添加纯文本内容。

克隆节点功能支持深度或浅度复制，保持原有结构或仅复制当前节点。

cloneNode方法复制一个节点，true表示深度复制，false表示浅度复制。

访问指定的节点通过ID、标签名和名称实现，提供高效的查找方式。

getElementById方法查找指定的Id，返回唯一的元素节点。

getElementsByTagName方法查找指定元素的类型，以数组的形式返回匹配元素集合。

getElementsName方法查找指定元素的Name，返回具有相同名称的元素集合。

属性的查找、改变和设置通过特定方法实现，用于动态修改元素属性。

getAttribute方法用于属性的查找，获取指定属性的值。

setAttribute方法用于属性的改变，例如：setArribute(class，red)第一个参数是改变class，第二个设置为红色。

removeAttribute方法用于删除属性，移除元素中指定的属性。

覆盖、添加文本的值通过innerHTML实现，用于设置或获取元素的HTML内容。

innerHTML属性允许直接操作元素的内部HTML结构，实现内容的动态更新。