首先，我應(yīng)該回憶一下JavaScript中訪問對象屬性的兩種常見方式：點(diǎn)號表示法和方括號表示法。點(diǎn)號是直接通過屬性名訪問，而方括號允許使用字符串或變量來動態(tài)訪問屬性。這可能就是這兩種寫法的主要區(qū)別所在。

接下來，我需要考慮在表單的上下文中，這兩種寫法會有何不同。例如，document.forms集合中的表單可以通過名稱或索引訪問，而表單中的元素同樣可以通過名稱或索引來訪問。如果表單元素的名稱含有特殊字符或者空格，這時候使用點(diǎn)號可能有問題，必須使用方括號表示法。

然后，用戶提到的document.form1[str]中的name可能是一個變量，而document.form1.name則是直接使用字符串"name"作為屬性名。這時候需要舉例說明當(dāng)name是一個變量時，兩者的行為差異。比如，如果name的值是"email"，那么document.form1[name]相當(dāng)于document.form1["email"]，而document.form1.name則是訪問名為"name"的元素，這可能不是用戶想要的。

還需要考慮瀏覽器兼容性或某些特殊情況，例如表單元素的名稱是否與表單對象的現(xiàn)有屬性或方法沖突。例如，如果表單中有一個元素名為"submit"，使用點(diǎn)號表示法document.form1.submit會獲取到那個元素，但同時也可能覆蓋表單原生的submit方法，導(dǎo)致錯誤。這時候使用方括號表示法可能更安全，比如document.form1["submit"]可以正確獲取元素，而不會調(diào)用submit方法。

此外，可能存在動態(tài)名稱的情況，即元素的名稱是動態(tài)生成的，這時候必須使用方括號表示法，因為點(diǎn)號不支持變量作為屬性名。例如，循環(huán)遍歷多個表單元素時，用變量代替固定的屬性名。

還要注意HTML中name屬性和id屬性的區(qū)別。雖然通常name和id可能相同，但在某些情況下它們可能不同，而document.form1.name訪問的是name屬性為"name"的元素，而不是id。這可能會導(dǎo)致誤解，需要明確說明。

總結(jié)起來，我需要分點(diǎn)說明兩者的區(qū)別：語法差異、動態(tài)屬性名的處理、特殊字符的處理、與表單原生屬性或方法的沖突、以及變量使用的情況。通過具體的例子來展示不同場景下的行為，幫助用戶理解何時使用哪種方法更為合適。

最后，確?；卮鹎逦锥?，結(jié)構(gòu)合理，包含代碼示例和注意事項，這樣用戶能夠快速掌握兩者的區(qū)別，并在實(shí)際編碼中正確應(yīng)用。

在 JavaScript 中，document.form1[name] 和 document.form1.name 是兩種訪問表單（<form>）元素的語法，但它們的行為和適用場景有顯著區(qū)別。以下是詳細(xì)解釋：

1. document.form1.name（點(diǎn)號表示法）

• 語法特點(diǎn)直接通過屬性名訪問表單中的元素，其中 name 是字面量字符串（固定名稱）。

• 使用場景當(dāng)表單元素的 name 是明確的、合法的標(biāo)識符（不包含特殊字符或空格）時使用。

• 示例

  <form name="form1">
    <input type="text" name="username">
  </form>

  運(yùn)行 HTML

  // 訪問 name="username" 的元素
  const input = document.form1.username;

• 注意事項

  • 如果元素的 name 與表單的某些原生屬性或方法（如 submit、action）沖突，點(diǎn)號表示法會優(yōu)先訪問表單的原生屬性/方法，而非元素。

  • 如果 name 包含特殊字符（如空格、連字符等），點(diǎn)號表示法會報錯。

2. document.form1[name]（方括號表示法）

• 語法特點(diǎn)通過字符串或變量動態(tài)訪問表單元素，其中 name 可以是一個變量或動態(tài)生成的字符串。

• 使用場景

  • 需要動態(tài)訪問不同名稱的元素時（例如通過循環(huán)或變量）。

  • 元素的 name 包含特殊字符（如 user-name）或與表單原生屬性/方法沖突時。

• 示例

  <form name="form1">
    <input type="text" name="user-name">
    <input type="text" name="email">
  </form>

  運(yùn)行 HTML

  // 通過變量動態(tài)訪問元素
  const fieldName = "user-name";
  const input1 = document.form1[fieldName]; // 正確訪問 name="user-name" 的元素
  
  // 直接通過字符串訪問
  const input2 = document.form1["email"];  // 正確訪問 name="email" 的元素

• 注意事項

  • 如果元素的 name 與表單的原生屬性/方法沖突，方括號表示法仍然可以正確訪問該元素。

  • 支持動態(tài)參數(shù)，適合處理不確定名稱的場景。

關(guān)鍵區(qū)別總結(jié)

示例場景

場景 1：元素名稱包含特殊字符

<form name="form1">
  <input type="text" name="user-email">
</form>

運(yùn)行 HTML

// 錯誤：點(diǎn)號表示法無法訪問含連字符的 name
// const input = document.form1.user-email; 

// 正確：方括號表示法
const input = document.form1["user-email"];

場景 2：動態(tài)選擇元素名稱

const fields = ["username", "email", "address"];
fields.forEach(field => {
  const element = document.form1[field];
  console.log(element.value);
});

場景 3：名稱與表單原生屬性沖突

html

復(fù)制

<form name="form1">
  <input type="text" name="submit"> <!-- 與表單的 submit() 方法同名 -->
</form>

運(yùn)行 HTML

// 錯誤：點(diǎn)號表示法會調(diào)用表單的 submit() 方法，而非訪問元素
// document.form1.submit(); // 觸發(fā)表單提交

// 正確：方括號表示法訪問元素
const submitInput = document.form1["submit"];
console.log(submitInput.value);

最佳實(shí)踐

• 如果元素名稱是合法的標(biāo)識符且無沖突，優(yōu)先使用 document.form1.name（更簡潔）。

• 如果名稱包含特殊字符、需要動態(tài)訪問或存在沖突，使用 document.form1[name]。

• 對于需要兼容性和安全性的代碼，方括號表示法更可靠。

通過合理選擇這兩種語法，可以更靈活、安全地操作表單元素。

document.forms用法

1、FF中不能接受document.forms("formname")的使用，ie中可以

        最好改成document.forms["formname"]的下標(biāo)用法

2、FF中不能接受document.all的用法，document.all是在ie中定義的用法

        最好改成document.getElementById

3、FF中不能直接使用div的id獲取div的屬性，如divId.style.display等

        應(yīng)一致改成document.getElementById("divId").style.display

JavaScript的一些用法總結(jié)

如下的用法需要在JSP中增加屬性onclick. 以全選為例，onclick="javascript:allselect()"//javascript可以省略

或者將function allselect()用document.getElementById("allselectbox").onclick = function();

全選：

function allselect(){  
var form = document.forms[0];  
var state = form.allselectbox.checked;  
var length = form.username.length;  
if(length){  
for(var i=0;i<length;i++){  
   form.usernames[i].checked=state;  
}  
}else form.username.check = state;  
}  

全選的另一種寫法：

function allSelect(){  
var items = document.getElementsByName("usernames");  
var state = document.getElementsByName("allselectbox")[0].checked;  
if(items.length){  
   for(var i = 0; i < items.length; i++){  
    items[i].checked = state;  
   }  
}else{  
   items.checked = state;  
}  
}  

單項選擇：

function selectitem(){  
var form = document.forms[0];  
var length = form.username.length;  
if(length){  
for(var i=0;i<length;i++){  
   if(form.usernames[i].checked) return true;  
}  
}else return form.usernames.check;  
}

轉(zhuǎn)到其他頁面：

function topage(page){  
var form = document.forms[0]  
form.page.value = page;  
form.submit;  
}  

取單選框的值Radio:

function getradiovalue(objradio){  
var result = "";  
try{  
   if(typeof(objradio.value)=="undefined"){  
    for(var i=0;i<objradio.length;i++){  
     if(objradio[i].checked){  
      return objradio[i].value;  
     }  
    }  
   }else{  
    if(objradio.checked) result = objradio.value;  
   }  
}catch(e){result = "";}  
return result;  
} 

檢驗手機(jī)格式

function validateMobile(){  
var form = document.forms[0];  
if(form.mobile.value!==""){  
    var num = /^1[35]\d{9}$/  
   if(!num.test(form.mobile.value)){  
    alert("收貨人的手機(jī)號格式不正確");  
    return false;  
   }  
   alert("正確");  
}
}

到此這篇關(guān)于document.form1[str] 與 document.form1.str的區(qū)別的文章就介紹到這了,更多相關(guān)document form內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論