ZetCode

VBScript parentNode 属性

最后修改于 2025 年 4 月 9 日

VBScript 中的 parentNode 属性是一个基本的 DOM 属性,它返回指定节点的父节点。它允许向上遍历文档层级结构。此属性是只读的,并且在 VBScript 中的所有 DOM 节点上都可用。

parentNode 对于 DOM 遍历和操作至关重要。它提供了对文档树中祖先元素的访问。本教程将通过实际示例来涵盖 parentNode 的用法。

parentNode 属性概述

parentNode 属性引用 DOM 树中节点的直接父节点。对于文档节点,它返回 Nothing。对于元素节点,它返回包含的元素。文本节点返回它们的父元素。

主要功能包括只读访问和文档节点的空返回。它适用于 DOM 层级结构中的所有节点类型。理解此属性有助于创建健壮的 DOM 遍历脚本。

parentNode 的基本用法

此示例演示了 parentNode 访问元素父级的最简单用法。它展示了如何从子元素导航到其父元素。然后可以访问或修改父元素的属性。

basic_parentnode.vbs
Set doc = CreateObject("HTMLFILE")
doc.write "<html><body><div id='child'>Content</div></body></html>"
Set child = doc.getElementById("child")
Set parent = child.parentNode

WScript.Echo parent.tagName ' Output: BODY

脚本创建一个带有 div 元素的 HTML 文档。它通过 ID 获取 div 元素,然后使用 parentNode 访问其父级。将显示父级的 tagName,表明导航成功。

检查文档节点

此示例显示了如何处理节点可能是文档根的情况。文档元素的 parentNode 返回 Nothing。这演示了 DOM 遍历中的正确空值检查。

document_node.vbs
Set doc = CreateObject("HTMLFILE")
doc.write "<html><body></body></html>"
Set htmlElement = doc.documentElement
Set parent = htmlElement.parentNode

If parent Is Nothing Then
    WScript.Echo "This is the document root"
Else
    WScript.Echo parent.tagName
End If

脚本检查 HTML 元素的 parentNode。由于它是文档根,因此父节点为 Nothing。此示例展示了在使用 DOM 层级结构时重要的空值检查。

多级导航

parentNode 可以链式调用,以便在 DOM 树中向上导航多个级别。此示例通过两次使用 parentNode 来访问祖父元素。每次调用都会将层级向上移动一个级别。

multi_level.vbs
Set doc = CreateObject("HTMLFILE")
doc.write "<html><body><div><p id='para'>Text</p></div></body></html>"
Set para = doc.getElementById("para")
Set grandparent = para.parentNode.parentNode

WScript.Echo grandparent.tagName ' Output: BODY

脚本从段落元素开始,移动到其父 div,然后再到 body 元素。这演示了使用链式 parentNode 属性进行多级 DOM 遍历。

修改父元素

此示例展示了如何访问父元素并通过 parentNode 修改它。可以更改父元素的样式,或操作其他属性。这演示了实际的 DOM 修改。

modify_parent.vbs
Set doc = CreateObject("HTMLFILE")
doc.write "<html><body><div id='child'>Content</div></body></html>"
Set child = doc.getElementById("child")
Set parent = child.parentNode

parent.style.backgroundColor = "yellow"
WScript.Echo parent.style.backgroundColor ' Output: yellow

脚本访问子元素的父级并更改其背景颜色。这表明 parentNode 不仅能够导航,还能修改 DOM 中的祖先元素。

使用 parentNode 进行事件处理

此高级示例演示了如何在事件处理中使用 parentNode。可以访问事件目标的父级以实现事件委托。这对于动态内容很有用。

event_handling.vbs
Set doc = CreateObject("HTMLFILE")
doc.write "<html><body><ul id='list'><li>Item 1</li><li>Item 2</li></ul></body></html>"
Set list = doc.getElementById("list")

' Simulate event handling
Function HandleClick(element)
    Set parent = element.parentNode
    WScript.Echo "Clicked item's parent ID: " & parent.id
End Function

' Simulate click on first list item
Set firstItem = list.getElementsByTagName("li")(0)
HandleClick(firstItem) ' Output: Clicked item's parent ID: list

脚本模拟事件处理,其中访问了被点击元素的父级。这种模式在事件委托场景中很常见。显示父级的 ID 以确认导航成功。

来源

DOM 节点属性文档

在本文中,我们探讨了 VBScript 中的 parentNode 属性,涵盖了其用法和实际应用。从基本导航到事件处理,这些示例演示了 DOM 遍历技术。利用这些知识,您可以增强 VBScript 的 DOM 操作能力。

作者

我叫 Jan Bodnar,是一名热情的程序员,拥有多年的编程经验。自 2007 年以来,我一直撰写编程文章。到目前为止,我已撰写了 1400 多篇文章和 8 本电子书。我在编程教学方面拥有八年以上的经验。

列出所有 VBScript 教程