子跨度内的 <输入 /> 未定义

Question

所以我目前正在尝试访问这个元素中的classNameHTML输入：<div id="1">      <span>          <input name="classNameHTML" type="text" />      <span></div>我目前写的代码是let cObj = document.getElementById(1);let cObjClass = cObj.children[0].classNameHTML.value; <--- buggy line错误信息：Uncaught TypeError: Cannot read property 'value' of undefinedat calcGrade (index.html:172)at HTMLButtonElement.onclick (index.html:243)我以为 children[0] 会引用 span，然后我可以通过它的输入名称使用 reference classNameHTML。控制台说 clasNameHTML 在我执行控制台时未定义.log（）。谁能告诉我，我在这里用点运算符做错了什么？

Answer 1

如前所述：

let cObjClass = cObj.children[0].classNameHTML.value;

无效。分解：

coObj是周围的 div。

.children[0]是 div 内的跨度。

.classNameHTML是具有该名称的属性，该属性属于 span。这不存在。

您需要在跨度内的输入。这将为您提供输入：

cObj.children[0].firstChild

然后，作为 span 的第一个子级的输入值为：

cObj.children[0].firstChild.value

但是，如果您想按名称而不是位置访问输入，请使用：

cObj.children[0].querySelector('[name="classNameHTML"]').value

这将使用 获取 span 内的元素。name="classNameHTML"

Answer 2

如果要从元素中获取类名，则应使用 .className 而不是 .classNameHTML.value