编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载导读本指南讲解在 Brython在浏览器中运行的 Python 3 实现中如何读取网页元素的内容可见文本、内嵌的 HTML 代码以及输入字段中用户填写的值。通过document[id]的语法与browser模块提供的alert()函数你可以在几分钟内写出第一段与页面交互的 Brython 代码。读完本文你将掌握text、html、value三个属性的语义差异、底层实现原理以及一套可直接复制的完整示例页面。1. 问题如何获取页面元素的内容在浏览器环境中页面上的每一个元素div、span、单元格、输入框……都携带信息用户看到的文字、内部的 HTML 标记、表单字段中键入的值。Brython 将 DOM 节点包装为 Python 对象后为每种信息提供对应的属性属性返回内容适用元素text元素中可见的文本字符串所有元素html元素内部的 HTML 代码字符串所有元素value输入字段中当前的值字符串input、textarea、select等表单元素原文档get_content.md用一个带彩色单元格和输入框的页面演示了这三种读取方式下文逐条展开。2. 从browser导入document与alert所有 DOM 操作都从browser模块开始from browser import document, alertdocument是当前网页文档的 Python 包装对象等价于 JavaScript 的documentalert()是browser模块提供的一个函数它把参数显示在一个弹出窗口中等同于 JavaScript 的window.alert()。从源码看alert的实现直接委托给浏览器原生函数并统一把参数转换为字符串builtin_modules.jsalert:function(message) { window.alert($B.builtins.str.$factory(message || )) }3. 用document[id]选取元素Brython 允许用下标语法按id选取元素zone document[zone]这个语法并非魔法它由 DOMNode 的mp_subscript实现当键是字符串时底层调用的是document.getElementById(key)如果找不到对应元素会抛出KeyErrorbrython.jsDOMNode.mp_subscriptfunction(self,key){ if(self.nodeTypeNode.DOCUMENT_NODE){ if(typeof key.valueOf()string){ let resself.getElementById(key) if(res){return DOMNode.$factory(res)} $B.RAISE(_b_.KeyError,key) ...因此document[zone]等价于“按 id 取出元素并以 Python 对象形式返回”找不到时则像字典一样抛KeyError。4. 三种读取方式4.1 显示元素中的文本.textfrom browser import document, alert # document[zone] est la cellule colorée alert(document[zone].text)text返回元素中可见的文本不包含任何 HTML 标签。其实现优先使用innerText回退到textContent保证跨浏览器行为一致如果作用于document本身则读取body的文本brython.jsDOMNode_funcs.text_getfunction(self){ if(self.nodeTypeNode.DOCUMENT_NODE){selfself.body} var resself.innerText ||self.textContent if(resnull){res_b_.None} return res}注意text是只读式获取、也可写入的双向属性写入时使用innerText/textContent但读取时它只反映文本层标签会被剥离。例如单元格内有BContenu de la cellule/B.text得到的是Contenu de la cellule而不是B…/B。4.2 显示元素内部的 HTML.htmlfrom browser import document, alert alert(document[zone].html)html返回元素内部的HTML 源代码字符串保留所有标签与属性。底层对应innerHTML当元素是document时返回body的innerHTMLbrython.jsDOMNode_funcs.html_getfunction(self){ var resself.innerHTML if(resundefined){ if(self.nodeTypeNode.DOCUMENT_NODE self.body){ resself.body.innerHTML} else{res_b_.None}} return res}text与html的区别是本文的核心同样一个元素.text给你“人看到的文字”.html给你“浏览器解析的标记”。实际使用中.text适合提取纯文本如搜索结果摘要.html适合检查或复制结构如调试模板输出。反过来向元素写入时也建议按需选择写.text时标签会被转义显示为文字写.html时标签会被解析为真实节点——因此不要把未经清洗的用户输入直接写入.html以免引入注入风险。4.3 显示输入框中键入的值.valuefrom browser import document, alert # document[entry] est le champ de saisie alert(document[entry].value)value返回表单字段input、textarea、select中当前的内容。它不是一个静态副本用户修改字段后再次读取拿到的是最新值因此常被用于表单校验、搜索框取值或与localStorage配合保存用户输入可参考同一目录下的 local_storage.md 中storage[brython_test] document[zone].value的用法。从实现上看value直接透传到 DOM 节点的原生value属性DOMNode.tp_getattro在未命中 Brython 专有属性时会回退读取self[attr]即 JS 原生属性从而无缝获得输入框的当前值。5. 完整可运行的示例页面把原文档的演示合成为一张完整的 HTML 页面可直接保存为demo.html并在浏览器中打开需加载brython.js!DOCTYPE html html head meta charsetutf-8 script src/brython.js/script /head body onloadbrython() script typetext/python from browser import document, alert # 1) 读取单元格中的可见文本 alert(document[zone].text) # 2) 读取单元格内部的 HTML 代码 alert(document[zone].html) # 3) 读取输入框中当前的值 alert(document[entry].value) /script table width100% tr td stylewidth:50%;/td td idzone stylebackground-color:#FF7400;text-align:center; BContenu de la cellule/Bp INPUT identry valuechamp de saisie /td /tr /table /body /html运行顺序为onloadbrython()启动解释器 →script typetext/python中的代码被执行 → 依次弹出三个窗口分别显示单元格文本Contenu de la cellule、包含B与INPUT的 HTML 源码以及输入框的值champ de saisie。6. 结合源码理解读取链路整个读取过程可以概括为一条清晰的调用链document[zone]→mp_subscript→document.getElementById(zone)找不到抛KeyError.text→DOMNode_funcs.text_get→innerText || textContent.html→DOMNode_funcs.html_get→innerHTML.value→ 回退读取 DOM 节点原生value属性alert(...)→window.alert(...)参数统一转字符串。这套设计让 Brython 对 DOM 的访问“像 Python 字典又像 JavaScript 原生属性”学习成本低、可调试性强。若想进一步验证这些属性在真实事件场景下的表现可参阅同一手册中的其他条目事件绑定中动态改写.textbind_unbind.md、通过ev.target.value读取被选中选项的值select_checkbox.md、以及用.value回显文件内容read_file.md。7. 小结需求写法底层读取可见文本document[zone].textinnerText/textContent读取内部 HTMLdocument[zone].htmlinnerHTML读取输入值document[entry].value原生value属性弹窗显示alert(msg)window.alert掌握这三组属性你就具备了 Brython 中读写页面内容的基础能力再结合document[id]的选取语法与alert()的即时反馈可以快速验证 DOM 状态、调试脚本并在此基础上继续探索事件绑定、表单处理与页面动态更新。赞分享编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载相关推荐Flipper Zero BadUSB 恶搞载荷剖析FakeVirus 全屏假病毒脚本的 DuckyScript 实现原理Flipper Zero BadUSB 恶搞载荷剖析FakeVirus 全屏假病毒脚本的 DuckyScript 实现原理 本篇以 Flipper Zero教程文档iOS-Tech-Weekly深度解析500技术文章与开源项目的整理秘籍iOS Tech Weekly深度解析500技术文章与开源项目的整理秘籍 iOS Tech Weekly是百度Hi团队精心打造的iOS技术周报项目汇集了5教程文档人工智能Vibe CodingComprendre les API : de la prise électrique aux appels HTTP, le guide pas à pas deasy-vibeComprendre les API : de la prise électrique aux appels HTTP, le guide pas à pas教程文档上一篇VBA-JSON实战指南Office数据处理的无依赖JSON解析方案2025版下一篇C2ME-fabric终极指南如何通过并发区块管理引擎提升Minecraft性能300%创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
