HTML怎么用代码获取track元素？DOM节点抓取方法 -html教程-PHP中文网

用 document.querySelector 获取 track 元素需确保其已加载且在 media 标签内，推荐加属性筛选如 track[kind="subtitles"]；获取后须检查 readyState（0-2）并等待 load 事件或子节点变化再访问 cues。

html怎么用代码获取track元素？dom节点抓取方法

用 `document.querySelector` 抓 `track` 元素最直接

浏览器原生支持通过 CSS 选择器定位 track，它和 div、span 一样是合法 DOM 节点，但必须出现在 video 或 audio 内部才有效。直接写 document.querySelector('track') 可能返回 null——不是语法错，而是节点还没加载或没被解析。

实操建议：

确保脚本在标签之后执行，或监听 DOMContentLoaded；
如果 track 是动态插入的（比如用 JS 创建后 append()），需等插入完成再查；
track 默认不渲染，也不参与样式流，所以不能靠视觉位置判断是否“存在”，得靠 DOM 树检查；
推荐加属性筛选，比如 document.querySelector('track[kind="subtitles"]')，避免误取 metadata 类型。

`HTMLTrackElement` 的 `readyState` 常被忽略

拿到 track 节点不等于它已就绪。它的 readyState 有三个值：0（NOT_LOADED）、1（LOADED）、2（ERROR）。很多代码直接读 track.cues 却报 undefined，就是因为 readyState !== 2 且没等加载完成。

正确做法：

不要一拿到节点就访问 cues 或 mode；
监听 load 事件（仅对 src 外链字幕有效）；
更稳妥的是轮询或用 MutationObserver 监听 track 子节点变化（如内联 ...>）；
track.mode = 'hidden' 后仍可读 cues，但 'disabled' 下 cues 为 null，这点容易踩坑。

用 `video.textTracks` 比遍历 DOM 更可靠

textTracks 是 HTMLMediaElement 的只读属性，返回 TextTrackList 对象，包含所有已关联的 track（无论是否在 DOM 中显式写出）。它比 querySelector 更贴近实际播放逻辑，也自动涵盖 JS 动态添加的轨道。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

关键点：

video.textTracks 不是数组，是类数组对象，要用 [index] 或 Array.from() 转换；
新增轨道时触发 addtrack 事件，移除时触发 removetrack，比监听 DOM 变化更精准；
textTracks[0].kind、textTracks[0].label 等字段可直接读，无需先查 DOM；
注意兼容性：Safari 旧版本对 textTracks 的 addtrack 事件支持不稳定，建议降级用轮询 length 变化。

内联 `track` 和外链 `src` 的加载行为差异大

内联字幕（即 ...）在 HTML 解析时就生成 TextTrack，readyState 通常为 LOADED；而带 src 的外链 VTT 文件会异步加载，状态变化有延迟，且失败时不抛 JS 异常，只设 readyState = ERROR。

排查建议：

用 network 面板确认 VTT 是否 200 返回，注意 MIME 类型是否为 text/vtt（Nginx/Apache 需配置）；
外链 track 的 error 属性是 TextTrackError 对象，但多数浏览器不暴露具体错误码，只能靠 readyState === 2 判断失败；
本地文件协议（file://）下 Chrome 会因 CORS 拒绝加载外链 track，必须走 HTTP 服务预览。