JavaScript 獲取包含特殊字元 name 屬性元素值的正確方法

問題場景

HTML 表單元素的 name 屬性包含點號（如 user.uname）：

<input type="text" name="user.uname" value="張三">

嘗試用 document.form.user.uname.value 獲取值會報錯，因為點號在 JavaScript 中是屬性存取運算子。

解決方案：使用中括號語法

// 正確寫法
var value = document.myform["user.uname"].value;

// 或使用 querySelector
var value = document.querySelector('[name="user.uname"]').value;

原理解析

完整範例

<form name="myform">
    <input type="text" name="user.uname" value="張三">
    <input type="text" name="user.email" value="zhang@example.com">
    <button type="button" onclick="getValues()">獲取值</button>
</form>

<script>
function getValues() {
    var form = document.myform;
    // 中括號語法
    console.log("uname:", form["user.uname"].value);
    console.log("email:", form["user.email"].value);
    
    // 現代寫法
    console.log("uname:", document.querySelector('[name="user.uname"]').value);
}
</script>

延伸應用：動態屬性名

var prefix = "user";
var fields = ["uname", "email", "phone"];

fields.forEach(function(field) {
    var fullName = prefix + "." + field;
    var value = document.myform[fullName].value;
    console.log(fullName + ":", value);
});

最佳實踐建議

• 盡量避免在 name 屬性使用特殊字元
• 若後端框架要求點號（如 Struts、Spring MVC），前端統一用中括號語法
• 現代專案推薦使用 id + document.getElementById 或 querySelector

總結

JavaScript 物件屬性存取時，屬性名包含特殊字元（如點號、連字號、空格）必須使用 obj["property.name"] 中括號語法，這是 JS 物件模型的基本特性。