如何使用 querySelectorAll 和 getAttribute？

Question

我有這個 HTML 文件...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
        <title>simple II</title>
</head>
<body>
        <div id="results"><!-- Results are displayed here -->
                <form method="post" name="start" target="_blank">
                        <p>Enter thing1: <input type="text"     id="thing1" name="thing1" size="10" /></p>
                        <p>Enter thing2: <input type="text"     id="thing2" name="thing2" size="10" /></p>
                        <p>Enter thing3: <input type="text"     id="thing3" name="thing3" size="10" /></p>
                        <p>Check thing4: <input type="checkbox" id="thing4" name="thing4" value=1>
                        <input type="hidden" id="state" name="state" value="one" /></p>
                </form>
                <button id='clickme' name='clickme'>Click me</button>
        </div>
        <script src="simple2.js?0000000000002"></script>
</body>
</html>

...還有這個 javascript 源文件 ...

document.querySelector("#results button").addEventListener("click", function(e) {
        e.preventDefault();
        var inputs = document.querySelectorAll("input");
        var params;
        var amp = "";
        for( var i = 0; i < inputs.length; i++ ) {
                var input       = inputs[i];
                var name        = input.getAttribute(name);
                var value       = input.getAttribute(value);

                params +=       amp + name + "=" + value;
                amp     =       "&";
        }
        alert( params );
});

...當我填寫表格並單擊按鈕時，我得到以下結果：

在此處輸入圖片說明

一切都是“空”:(我在這里做錯了什么？

Answer 1

您需要引用 getAttribute 中的值

var name        = input.getAttribute('name');
var value       = input.getAttribute('value');

由於name和value是 dom 元素的原生元素，因此您也可以簡單地使用

var name        = input.name;
var value       = input.value;

或者，這一切都可以使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce來完成

document.querySelector("#clickme").addEventListener("click", function() {
 alert([].reduce.call(document.querySelectorAll("input"),function(pre,cur){
  return (pre == "" ? pre : pre+"&") + cur.name + "=" + cur.value;
 },""));
});

http://jsfiddle.net/78Lwd5bf/

Answer 2

使用現代JS：

document.querySelectorAll('.className').forEach(elem => console.log(elem.getAttribute('attribute-you-want')));

如何使用 querySelectorAll 和 getAttribute？

問題描述

2 個解決方案

解決方案1
6 已采納 2015-01-29 18:38:34

解決方案2
0 2021-07-23 20:43:03

如何使用 querySelectorAll 和 getAttribute？

問題描述

2 個解決方案

解決方案1 6 已采納 2015-01-29 18:38:34

解決方案2 0 2021-07-23 20:43:03

解決方案1
6 已采納 2015-01-29 18:38:34

解決方案2
0 2021-07-23 20:43:03