Javascript - 如何从特定 div 类中的标签获取属性值？

Question

我需要从中检索值的 HTML 代码片段:

<div class="elgg-foot">
  <input type="hidden" value="41" name="guid">
  <input class="elgg-button elgg-button-submit" type="submit" value="Save">
</div>

我需要得到值 41，这很简单:

var x = document.getElementsByTagName("input")[0];
var y = x.attributes[1].value;

但是我需要确保我实际上是从“elgg-foot”中检索值，因为 HTML 代码中有多个 div 类。

我可以这样上课:

var a = document.getElementsByClassName("elgg-foot")[0];

然后我尝试以各种方式将它与 var x 结合起来，但我真的不知道这样做的语法/逻辑。例如:

var full = a.getElementsByTagName("input")[0];

因此:从唯一类 elg-foot 中检索值 41。

我花了几个小时谷歌搜索这个，但找不到解决方案(部分原因是我不知道要搜索什么)

编辑:感谢大家的回答，他们似乎都有效。我自己差点就让它工作了，只是在我的原始代码中的某处忘记了一个 [0] 。也很欣赏 JQuery，之前从未使用过它:-)

Answer 1

最简单的方法是使用 jQuery 和 CSS 选择器:

$(".elgg-foot") 确实总能为您提供类为“elgg-foot”的元素，但如果您更进一步，则可以使用后代选择器:

$(".elgg-foot input[name='guid']").val()

这确保您只获得名为 guid 的输入，它是标有类 elgg-foot 的元素的子元素。

现代浏览器中的等价物是原生的 querySelectorAll 方法:

document.querySelectorAll(".elgg-foot input[name='guid']")

或者你可以自己做:

var x = document.getElementsByClassName("elgg-foot")
var y = x.getElementsByTagName("input")[0];

假设您知道它始终是 div 中的第一个输入