JavaScript中获取页面元素引用的多种方法详解

同一页面内元素引用方法

在同一页面内获取元素引用有多种方式。

第一种方法是通过元素的ID进行引用。

例如直接访问 link1.href。

第二种方法是通过元素的Name属性进行引用。

可以使用 document.all.link1.href 来获取。

第三种方法是利用sourceIndex属性。

例如 document.all(4).href，需要注意的是，由于HTML、HEAD、TITLE和BODY标签的存在，该链接在文档树中的索引值为4。

第四种方法是使用链接集合。

可以通过 document.anchors(0).href 获取，完整的集合列表包括all、anchors、applets、areas、attributes、behaviorUrns、bookmarks、boundElements、cells、childNodes、children、controlRange、elements、embeds、filters、forms、frames、images、imports、links、mimeTypes、options、plugins、rows、rules、scripts、styleSheets、tBodies、TextRectangle，具体可参考MSDN文档。方法3与方法4本质相同，均使用集合，区别在于all包含页面所有标记，而anchors仅包含链接元素。

第五种标准方法是使用getElementById。

代码示例为 document.getElementById("link1").href。

第六种方法是使用getElementsByName。

代码示例为 document.getElementsByName("link1")[0].href，这是一个集合，包含所有name属性等于指定参数的标记。

第七种方法是使用getElementsByTagName。

代码示例为 document.getElementsByTagName("A")[0].href，这是一个集合，包含所有标签名称等于指定参数的标记。

第八种方法是使用tags集合。

代码示例为 document.all.tags("A")[0].href，这与方法7类似，都是按标签名称获取集合。

此外，还可以通过event.srcElement获取触发事件的元素引用；使用document.elementFromPoint(x,y)获取指定坐标处的元素引用；或通过document.body.fromPoint(event.clientX,event.clientY)获取鼠标所在处的元素引用。还可以利用元素的父子节点和兄弟节点关系进行引用，例如nextSibling（当前节点的后一节点）、previousSibling（当前节点的前一节点）、childNodes、children、firstChild、lastChild、parentElement等，引用方式不限于此。

分帧页面与跨窗口引用

上述为同一页面内的常见引用方法，此外还涉及不同页面间的引用。

对于分帧页面，可以使用parent.frames("帧的name")或top.frames("帧的name")来引用不同的帧，后续引用方式与同一页面内相同，支持多重parent嵌套。

例如：

parent.frames("frame1").document.all.link1

top.frames("frame1").document.all.link1

对于通过window.open()打开的窗口，可以定义var newwin=window.open()，然后使用newwin变量引用新窗口，后续引用方式与同一页面内相同；新窗口可以使用window.opener来引用打开它的父窗口，可简写为opener。

例如：

父窗口（即调用window.open()方法的窗口）：

newwin.document.all.link1，此句在父窗口中可引用新窗口中的对象。

子窗口（由window.open()方法打开的窗口）：

opener.document.all.link1，此句在子窗口中可引用父窗口的对象。

多重opener引用也是支持的，例如：opener.opener.document.all.link1。

方法多种多样，有时需根据具体情况灵活运用，才能游刃有余。