如何获取<input>元素的value值？已尝试的实现方案均不生效

你提供的代码失效原因 #

• 你当前的需求是基于iframe实现页面查看器，默认的DOM查询方法document.getElementsByClassName、document.getElementById只会查询当前页面上下文的DOM元素，如果你要获取的<input>元素放在iframe内部，直接调用父页面的document方法无法检索到iframe里的元素，自然拿不到value。
• 你第二段测试代码的ID参数写错了，你给<input>设置的id是inputId，但查询时用的是input_id，ID不匹配会直接抛出未定义报错，导致点击按钮没有任何反应。

正确实现方案 #

场景1：input和执行脚本在同一页面 #

优先使用ID查询元素，避免类名重复导致的下标匹配错误，还可以增加非空判断避免异常：

function getInputValue() {
  const inputEl = document.getElementById('inputId')
  if (inputEl) {
    alert(inputEl.value)
  }
}

配套HTML代码无需修改：

<input type="text" placeholder="输入内容" id="inputId" class="inputClass">
<button type="button" onclick="getInputValue();">获取值</button>

场景2：input在iframe内部，脚本在父页面执行 #

需要先获取iframe节点，再访问其内部文档上下文查询元素：

function getIframeInputValue() {
  // 替换为你实际使用的iframe的ID
  const iframe = document.getElementById('your-iframe-id')
  if (!iframe) return
  // 兼容不同浏览器的iframe文档获取方式
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document
  const inputEl = iframeDoc.getElementById('inputId')
  if (inputEl) {
    alert(inputEl.value)
  }
}

注意该方法需要满足同源策略：iframe加载的页面和父页面必须同协议、同域名、同端口，否则会因为跨域限制无法访问iframe内部的DOM。

前端问题参考资源 #

• 原生HTML、CSS、JavaScript的语法、API可以查MDN Web Docs，所有内容都有官方验证的说明和示例
• 开发场景类问题可以直接在Stack Overflow检索关键词，大部分常见问题都有已落地的解决方案
• 新手入门可以看现代JavaScript教程，知识点结构清晰，适配当前主流的前端开发规范

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