如何使用PyScript执行DOM操作

PyScript 具备与JavaScript对等的DOM交互能力，原生支持通过CSS选择器选取DOM元素，完全可以实现你预期的元素获取效果。

• 相关查询能力已内置在官方模块中，无需额外封装自定义方法，选择器匹配规则和原生JS完全一致。
• 匹配单个元素时，从pyscript模块导入Element类即可，效果和你示例中的get_element(".nav-bar")完全对齐：

from pyscript import Element

# 选取页面中第一个class为nav-bar的元素
nav_bar = Element(".nav-bar")

• 若需要选取匹配选择器的所有元素，可导入document对象调用find方法，返回匹配的元素集合：

from pyscript import document

# 选取页面所有class为nav-item的元素
all_nav_items = document.find(".nav-item")

• 选中元素后可直接完成内容修改、属性调整、事件绑定等常规DOM操作，使用逻辑和JS高度一致：

# 修改导航栏文本
nav_bar.element.innerText = "更新后的导航栏标题"

# 绑定点击事件
def nav_click_handler(event):
    print("导航栏触发点击")

nav_bar.element.addEventListener("click", nav_click_handler)

如果你使用的是2023年之前发布的旧版本PyScript，事件绑定时需要额外通过pyodide的create_proxy做代理处理，当前正式版本已不需要该兼容步骤。

内容的提问来源于stack exchange，提问作者Spok。