JavaScript 引用元素的8种常用方法及跨窗口引用

同一页面内的元素引用方法

在标准DOM操作中，根据目标元素的属性（如id、name、标签名）或其在树状结构中的位置，有多种途径可以获取元素引用。以下列出主流且有效的操作方法：

第1步：通过唯一标识符获取

id 是元素最稳定的标识。使用 document.getElementById("link1") 可直接返回该元素的引用，这是推荐的标准做法。

第2步：通过名称属性获取

name 属性通常用于表单元素或多选组。使用 document.getElementsByName("link1")[0] 会返回一个伪数组（NodeList），需通过索引 [0] 获取第一个匹配元素。

第3步：通过标签名称批量获取

若需引用所有特定类型的元素，可使用 document.getElementsByTagName("A")。同样返回集合，通过索引访问具体元素，例如 [0] 表示第一个链接。

第4步：利用DOM层级关系导航

当已知相邻元素或父级容器时，可通过父子/兄弟节点关系定位。常用属性包括：

• parentElement：父元素
• nextSibling / previousSibling：前后兄弟节点
• childNodes / children：子节点集合
• firstChild / lastChild：首尾子节点

第5步：事件触发点定位

在事件处理函数中，可通过 event.srcElement（IE旧版）或 event.target（标准）直接获取触发该事件的元素引用。

不同窗口与帧之间的引用

在包含框架（frames）或多窗口的复杂布局中，引用其他上下文的元素需要特殊语法。

分帧页面引用

对于嵌套的iframe或frameset，可使用 parent.frames("frameName") 或 top.frames("frameName") 定位特定帧。获取帧对象后，即可在其内部继续执行上述DOM操作。例如：
parent.frames["frame1"].document.all["link1"]（注：此写法兼容性较老，现代开发推荐使用标准DOM访问帧内容）。

窗口打开与关闭引用

使用 window.open() 创建新窗口时，可获得指向新窗口的句柄：

var newWin = window.open("url", "target");

• 父窗口引用子窗口：直接使用 newWin 对象，如 newWin.document...。
• 子窗口引用父窗口：使用 window.opener 或简写 opener，如 opener.document...。

这种引用支持多重嵌套，例如 opener.opener 可追溯更上一级的打开源窗口。

总结

JavaScript提供了丰富的API来定位和操作页面元素。在实际开发中，优先选择语义明确的标准方法（如 getElementById），在处理动态生成或分组元素时使用集合筛选，而在复杂的多窗口架构中则需注意上下文（Context）的切换与传递。以上就是JavaScript引用元素方法的详细内容，更多关于JavaScript DOM操作的资料请关注本站其它相关文章！