使用JavaScript获取div内第一个输入框的id

Question

HTML

 <div id="div-1"> 
<input id = "input1" >
</div>
<p id="demo"></p>

JAVASCRIPT

var list = document.getElementById("div-1").firstChild.id;
    document.getElementById("demo").innerHTML = list;

我得到的输出是：

Undefined

- Ng21

Answer 1

firstChild（用于检索第一个子节点）可能是输入元素之前的文本节点（空格），它没有任何id属性，因此输出结果将为undefined。

要解决这个问题，可以使用Element#querySelector来获取输入元素，或者使用firstChildElement（不被广泛支持，用于检索第一个子元素）属性。

var list = document.getElementById("div-1").querySelector('input').id;
document.getElementById("demo").innerHTML = list;

<div id="div-1">
  <input id="input1">
</div>
<p id="demo"></p>

var list = document.getElementById("div-1").firstElementChild.id;
document.getElementById("demo").innerHTML = list;

<div id="div-1">
  <input id="input1">
</div>
<p id="demo"></p>

---

更新：或者你可以直接使用Document#querySelector方法选择元素。

// you can use css selector with querySelector
// which only gets the first element from them
var list = document.querySelector('#div-1 input').id;
document.getElementById("demo").innerHTML = list;

<div id="div-1">
  <input id="input1">
</div>
<p id="demo"></p>

- Pranav C Balan

Answer 2

最简单的答案是：

var inputID = document.querySelector("#div-1 input").id;

因为querySelector返回与提供的CSS选择器匹配的第一个节点。你可以实际上只找到你需要的那个元素，而不是找到div，然后查找它的第一个子节点。

这样更简单并且性能更优。

var inputID = document.querySelector("#div-1 input").id;
document.getElementById("demo").textContent = inputID;

<div id="div-1"> 
  <input id = "input1" >
  <input id = "input2" >
  <input id = "input3" >
</div>
<p id="demo"></p>

- Scott Marcus

Answer 3

您需要使用的正确属性是firstElementChild。

var list = document.getElementById("div-1").firstElementChild.id;
document.getElementById("demo").innerHTML = list;

https://jsfiddle.net/sureshatta/u2q7jpk0/

- Suresh Atta

Answer 4

如果你需要元素，可以使用firstElementChild代替firstChild。

var list = document.getElementById("div-1").firstElementChild.id;
    document.getElementById("demo").innerHTML = list;

 <div id="div-1"> 
<input id = "input1" >
</div>
<p id="demo"></p>

或者你可以使用#div-1 > *:first-child来选择第一个子元素，无论它是什么。

document.querySelector('#demo').innerHTML =
    document.querySelector('#div-1 > *:first-child').id

<div id="div-1"> 
    <input id = "input1" >
    </div>
    <p id="demo"></p>

- Yury Tarabanko

---

为什么不直接使用 document.querySelector("#div-1 input").id 呢？ - Scott Marcus