document.form1[str] 与 document.form1.str的区别

首先，我应该回忆一下JavaScript中访问对象属性的两种常见方式：点号表示法和方括号表示法。点号是直接通过属性名访问，而方括号允许使用字符串或变量来动态访问属性。这可能就是这两种写法的主要区别所在。

接下来，我需要考虑在表单的上下文中，这两种写法会有何不同。例如，document.forms集合中的表单可以通过名称或索引访问，而表单中的元素同样可以通过名称或索引来访问。如果表单元素的名称含有特殊字符或者空格，这时候使用点号可能有问题，必须使用方括号表示法。

然后，用户提到的document.form1[str]中的name可能是一个变量，而document.form1.name则是直接使用字符串"name"作为属性名。这时候需要举例说明当name是一个变量时，两者的行为差异。比如，如果name的值是"email"，那么document.form1[name]相当于document.form1["email"]，而document.form1.name则是访问名为"name"的元素，这可能不是用户想要的。

还需要考虑浏览器兼容性或某些特殊情况，例如表单元素的名称是否与表单对象的现有属性或方法冲突。例如，如果表单中有一个元素名为"submit"，使用点号表示法document.form1.submit会获取到那个元素，但同时也可能覆盖表单原生的submit方法，导致错误。这时候使用方括号表示法可能更安全，比如document.form1["submit"]可以正确获取元素，而不会调用submit方法。

此外，可能存在动态名称的情况，即元素的名称是动态生成的，这时候必须使用方括号表示法，因为点号不支持变量作为属性名。例如，循环遍历多个表单元素时，用变量代替固定的属性名。

还要注意HTML中name属性和id属性的区别。虽然通常name和id可能相同，但在某些情况下它们可能不同，而document.form1.name访问的是name属性为"name"的元素，而不是id。这可能会导致误解，需要明确说明。

总结起来，我需要分点说明两者的区别：语法差异、动态属性名的处理、特殊字符的处理、与表单原生属性或方法的冲突、以及变量使用的情况。通过具体的例子来展示不同场景下的行为，帮助用户理解何时使用哪种方法更为合适。

最后，确保回答清晰易懂，结构合理，包含代码示例和注意事项，这样用户能够快速掌握两者的区别，并在实际编码中正确应用。

在 JavaScript 中，document.form1[name] 和 document.form1.name 是两种访问表单（<form>）元素的语法，但它们的行为和适用场景有显著区别。以下是详细解释：

1. document.form1.name（点号表示法）

• 语法特点直接通过属性名访问表单中的元素，其中 name 是字面量字符串（固定名称）。

• 使用场景当表单元素的 name 是明确的、合法的标识符（不包含特殊字符或空格）时使用。

• 示例

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

  运行 HTML

  // 访问 name="username" 的元素
  const input = document.form1.username;

• 注意事项

  • 如果元素的 name 与表单的某些原生属性或方法（如 submit、action）冲突，点号表示法会优先访问表单的原生属性/方法，而非元素。

  • 如果 name 包含特殊字符（如空格、连字符等），点号表示法会报错。

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

• 语法特点通过字符串或变量动态访问表单元素，其中 name 可以是一个变量或动态生成的字符串。

• 使用场景

  • 需要动态访问不同名称的元素时（例如通过循环或变量）。

  • 元素的 name 包含特殊字符（如 user-name）或与表单原生属性/方法冲突时。

• 示例

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

  运行 HTML

  // 通过变量动态访问元素
  const fieldName = "user-name";
  const input1 = document.form1[fieldName]; // 正确访问 name="user-name" 的元素
  
  // 直接通过字符串访问
  const input2 = document.form1["email"];  // 正确访问 name="email" 的元素

• 注意事项

  • 如果元素的 name 与表单的原生属性/方法冲突，方括号表示法仍然可以正确访问该元素。

  • 支持动态参数，适合处理不确定名称的场景。

关键区别总结

示例场景

场景 1：元素名称包含特殊字符

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

运行 HTML

// 错误：点号表示法无法访问含连字符的 name
// const input = document.form1.user-email; 

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

场景 2：动态选择元素名称

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

场景 3：名称与表单原生属性冲突

html

复制

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

运行 HTML

// 错误：点号表示法会调用表单的 submit() 方法，而非访问元素
// document.form1.submit(); // 触发表单提交

// 正确：方括号表示法访问元素
const submitInput = document.form1["submit"];
console.log(submitInput.value);

最佳实践

• 如果元素名称是合法的标识符且无冲突，优先使用 document.form1.name（更简洁）。

• 如果名称包含特殊字符、需要动态访问或存在冲突，使用 document.form1[name]。

• 对于需要兼容性和安全性的代码，方括号表示法更可靠。

通过合理选择这两种语法，可以更灵活、安全地操作表单元素。

document.forms用法

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

        最好改成document.forms["formname"]的下标用法

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

        最好改成document.getElementById

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

        应一致改成document.getElementById("divId").style.display

JavaScript的一些用法总结

如下的用法需要在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;  
}

转到其他页面：

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;  
} 

检验手机格式

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

到此这篇关于document.form1[str] 与 document.form1.str的区别的文章就介绍到这了,更多相关document form内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！