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，我以前从未使用过 :-)

- Nik Klep

---

你反对使用jQuery吗？ - sheriffderek

var x = a.getElementsByTagName("input")[0]; 看起来应该可以工作。 - Felix Kling

我有一个更大的计划，不仅仅是使用jQuery来检索元素。:) - sheriffderek

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 内的第一个输入。

- mcse3010

Answer 2

你可以像这样组合它：

    var a = document.getElementsByClassName("elgg-foot")[0];
    var b = a.getElementsByTagName("input")[0];
    var attribute = b.attributes[1].value;
    console.log(attribute); // print 41

将DOM视为树。您可以以与从根（文档）获取元素相同的方式从元素中获取元素。

- Ivan De Paz Centeno

Answer 3

你可以像这样使用querySelector

var x = document.querySelector(".elgg-foot input");
var y = x.value;

- Arun P Johny

Answer 4

通过选择器查询 DOM https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector

var fourty1 = document.querySelector('.elgg-foot input[name=guid]').value;

querySelector会返回选择器中的第一个匹配项。该选择器将查找具有elgg-foot类的元素，然后查看其中的input元素是否有一个名为guid的元素，然后取所选元素的值。

- Travis J

Answer 5

我认为最简单的方法是使用JQuery。但仅使用JavaScript，

the simplest way would be:

var div = document.getElementsByClassName("elgg-foot")[0];
var input = div.getElementsByTagName("input")[0];
alert(input.value)

请看这个 JSFiddle：http://jsfiddle.net/2oa5evro/

- Nelson Teixeira