如何通过Hyperscript获取DOM中指定script元素的textContent值？

问题场景 #

现有如下DOM结构：

<div 
   id="info_globals" style="display: none;" 
   hx-trigger="htmx_post_validation_trigger from:body" 
   hx-target="#info_globals" 
   hx-get="<snip>" 
   hx-include="[name='original_trigger_fld']" 
   hx-swap="innerHTML" 
   class=""
>
    <script id="info-length-lower" type="application/json">6</script>
    <script id="info-length-upper" type="application/json">6</script>
</div>

通过htmx触发验证后，后端（Django TemplateView）会返回更新后的内容并触发htmx_post_globals_updated事件，但在Hyperscript中尝试以下写法均无法获取到script元素的内容：

set lowerBound to the textContent of #info-length-lower
set lowerBound to #info-length-lower.textContent

执行日志代码后，控制台输出为空值：

globals updated
lower: "" upper: ""

解决方案 #

方案1：改用innerHTML获取内容 #

尝试用innerHTML替代textContent读取script元素的内容：

log "globals updated"
set lowerBound to #info-length-lower.innerHTML
set upperBound to #info-length-upper.innerHTML
log "lower:", lowerBound, "upper:", upperBound

方案2：调用原生JS方法获取 #

如果方案1无效，直接使用原生DOM方法获取：

log "globals updated"
set lowerBound to document.querySelector('#info-length-lower').textContent
set upperBound to document.querySelector('#info-length-upper').textContent
log "lower:", lowerBound, "upper:", upperBound

方案3：改用data-*属性存储数据（推荐） #

放弃用script标签存储JSON数据，转而使用元素的data-*属性，更符合HTML语义且更易维护：
修改后的DOM结构：

<div 
   id="info_globals" style="display: none;" 
   hx-trigger="htmx_post_validation_trigger from:body" 
   hx-target="#info_globals" 
   hx-get="<snip>" 
   hx-include="[name='original_trigger_fld']" 
   hx-swap="innerHTML" 
   data-length-lower="6"
   data-length-upper="6"
>
</div>

对应的Hyperscript代码：

log "globals updated"
set lowerBound to #info_globals.dataset.lengthLower
set upperBound to #info_globals.dataset.lengthUpper
// 如需转为数字类型：
set lowerBound to parseInt(lowerBound)
set upperBound to parseInt(upperBound)
log "lower:", lowerBound, "upper:", upperBound

原因分析 #

• 可能是Hyperscript对type="application/json"的script元素的textContent读取存在兼容性问题，改用innerHTML或原生DOM方法可绕过该限制。
• 使用data-*属性存储配置数据是更标准的做法，避免了script标签存储非脚本内容带来的潜在解析问题，同时简化了数据获取逻辑。

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