入力の属性とその値を取得するにはどうすればよいですか？

Question

は、これが私のHTMLとJavaScript構造であり、私はそれがこれまで

var input = document.getElementById("username").attributes; 
 
var ul  = document.createElement("ul"); 
 

 
for(var i=0; i<input.length;i++){ 
 
    var li = document.createElement("li"); 
 
    var data = input[i].name + ":" + input[i].value; 
 
    var text = document.createTextNode(data); 
 
    li.appendChild(text); 
 
    ul.appendChild(li); 
 
    document.body.appendChild(ul); 
 
}

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username">

をオーケーだけど、私は私のすべての入力データを取得したい場合は、それが唯一の最初の入力を与えるのパラメータを持つ私の属性はのgettinよ属性。例えば：

var input = document.getElementsByTagName("input").attributes; 
 
var ul = document.createElement("ul"); 
 

 
for (var i = 0; i < input.length; i++) { 
 
    var li = document.createElement("li"); 
 
    var data = input[i].name + ":" + input[i].value; 
 
    var text = document.createTextNode(data); 
 
    li.appendChild(text); 
 
    ul.appendChild(li); 
 
    document.body.appendChild(ul); 
 
}

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username"> 
 

 
<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password">

、あなたはそれをチェックアウトする場合は、この例では、私の長さの誤差を与え、あなたは

は、だから私は、私は「勝った理由です純粋なJavaScriptを学ぶためにしようとしているが表示されます私はその論理を理解しようとしているどのプロジェクトでも使用しています

Answer 1

getElementsByTagNameはgetElementByIdとは異なります。配列オブジェクトのを返します。

試してみてください。var input = document.getElementsByTagName("input")[0].attributes;

またはvar input = document.querySelector("input").attributes;

var input = document.getElementsByTagName("input")[0].attributes; 
 
var ul = document.createElement("ul"); 
 

 
for (var i = 0; i < input.length; i++) { 
 
    var li = document.createElement("li"); 
 
    var data = input[i].name + ":" + input[i].value; 
 
    var text = document.createTextNode(data); 
 
    li.appendChild(text); 
 
    ul.appendChild(li); 
 
    document.body.appendChild(ul); 
 
}

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username"> 
 

 
<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password">

あなたはすべての要素から属性を取得したい場合は、単に第二のループを実装します。

var input = document.getElementsByTagName("input"); 
 
var ul = document.createElement("ul"); 
 

 
for (var k = 0; k < input.length; k++) { 
 
    for (var i = 0; i < input[k].attributes.length; i++) { 
 
    var li = document.createElement("li"); 
 
    var data = input[k].attributes[i].name + ":" + input[k].attributes[i].value; 
 
    var text = document.createTextNode(data); 
 
    li.appendChild(text); 
 
    ul.appendChild(li); 
 
    document.body.appendChild(ul); 
 
    } 
 
}

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username"> 
 

 
<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password">

ES6ソリューション。

let elems = document.querySelectorAll('input'); 
 
Array.from(elems).forEach(v => { 
 
    Array.from(v.attributes).forEach(c => { 
 
    document.write(`${c.name}: ${c.value}<br>`); 
 
    }) 
 
})

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username"> 
 

 
<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password"><br>

Answer 2

あなたは、入力の各入力の属性をプッシュする必要があります。そして、入力は配列の配列になります。したがって、2つのループを使用して入力配列内の各配列にアクセスする必要があります。

var input = []; 
 
Array.from(document.getElementsByTagName("input")).forEach(function(el){ 
 
input.push(el.attributes); 
 
}); 
 
var ul = document.createElement("ul"); 
 

 
for (var i = 0; i < input.length; i++) { 
 
for (var j=0; j<input[i].length; j++){ 
 
    var li = document.createElement("li"); 
 
    var data = input[i][j].name + ":" + input[i][j].value; 
 
    var text = document.createTextNode(data); 
 
    li.appendChild(text); 
 
    ul.appendChild(li); 
 
    document.body.appendChild(ul); 
 
} 
 
}

<input type="text" id="username" name="user" class="form-control" data-id="1" placeholder="type a your username"> 
 

 
<input type="password" id="password" name="password" class="form-control" data-id="2" placeholder="Enter your password">

Answer 3

var input = document.getElementsByTagName("input").attributes; 
for (var i = 0; i < input.length; i++) { 
var this_input = document.getElementsByTagName("input")[i].attributes; 
    var li = document.createElement("li"); 
    var data = this_input.name + ":" + this_input.value; 
    var text = document.createTextNode(data); 
    li.appendChild(text); 
    ul.appendChild(li); 
    document.body.appendChild(ul); 
}