使用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

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>

Answer 2

最简单的答案是：

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

因为querySelector返回与提供的 CSS 选择器匹配的第一个节点。您基本上可以只找到您需要的一个元素，而不是先找到div然后再寻找它的第一个子元素。

这更简单并且性能会更好。

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

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

Answer 3

您必须使用的正确属性是firstElementChild

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

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