更新1
得到一些答案后，我想到了更复杂的情况。
当表单具有名为“ id”和“ getAttribute”的字段时，如何访问表单的ID和其他属性？普遍的问题是：在任何情况下如何可靠地访问表单的属性？
console.log(document.querySelector("#myform").id)
console.log(document.querySelector("#myform").getAttribute("id"))<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form</title>
<form id="myform">
<input name="id" type="text" value="myvalue">
<input name="getAttribute" type="text" value="myvalue2">
</form>
结果：
<input name="id" type="text" value="myvalue">
TypeError: document.querySelector(...).getAttribute is not a function[Learn More]
我很困惑表单的字段如何覆盖表单的属性。例如，名为“ id”的字段将隐藏表格的实际ID：
console.log(document.querySelector("#myform").id)<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form</title>
<form id="myform">
<input name="id" type="text" value="myvalue">
</form>
给予：
<input name="id" type="text" value="myvalue">
如何访问表单属性而又不存在表单域覆盖它们的危险（万一字段可以有任何可能的名称）？
答案 0 :(得分：0)
编辑：
OP现在更改了问题，以包含getAttribute或任何任意字符串作为表单元素名称。
这与覆盖任何现有变量没有什么不同。例如，如果我想创建一个名为window或document的变量怎么办？或者我想将一些数据存储在名为forms的变量中，并将其放置在现有的document对象中。
这些方法中的每一个都会起作用，但不会产生预期的结果。这就是这个问题的实质。 “我可以这样做吗？”是。 “我应该这样做吗？”不。
作为开发人员，我们有义务了解这些细微差别。现在，OP可以了。
最令人沮丧的是，OP现在知道这个事实，但仍然通过更改要覆盖的变量继续追求这个问题！
END EDIT （有关使用id作为名称的原始答案）：
您已经混淆了Object属性和HTML属性之间的区别。
我们使用对象访问方法（.运算符或[]表示法）访问属性。
我们使用.getAttribute('name')访问HTML属性。因此，如果您要根据问题提示使用HTML编写的属性的值，可以使用：
document.querySelector("#myform").getAttribute('id')，它将返回“ myform”。
但是，就像大多数思考“假设条件”而又没有真正要解决的问题一样，这似乎有些愚蠢-毕竟，该元素因使用其ID而被查询。
现在，以正确的方式考虑对象属性，这：
document.querySelector("#myform").id
完全符合规范对语法评估的要求：
form [name]
返回表单控件（或者，如果有多个控件，则返回RadioNodeList的 具有给定ID或名称（不包括 出于历史原因的图像按钮）；或者，如果没有，则返回 具有给定ID的img元素。
使用特定名称引用元素后，该名称 将继续作为引用该元素的一种方式 即使元素的实际ID或名称发生更改，此方法也适用于 只要元素保留在树中即可。
如果有多个匹配项，则为RadioNodeList对象 包含所有这些元素。
此处：https://html.spec.whatwg.org/multipage/forms.html#the-form-element
希望有帮助。
答案 1 :(得分：0)
使用getAttribute（）可以获得表单属性。
console.log(document.getElementById('myform').getAttribute('id'))<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form</title>
<form id="myform">
<input name="id" type="text" value="myvalue">
</form>
答案 2 :(得分：0)
这与表单和表单字段的关系较小，而与给元素name（实际上是原生HTML属性和JavaScript属性）的事实有关。结果，您没有得到想要的参考。
您的代码发生了什么事，就是document.querySelector("#myform")正确地定位了form元素，但是随后您要求其中的id 属性，因此由于存在另一个name与id的{{1}}相同的元素，因此控制台记录该元素而不是实际的属性值，因为 form字段是子元素form的父级，因此被视为form 的属性。
如下所示，只需询问form（后面没有document.querySelector("#myform")），就会返回对与选择器匹配的第一个DOM元素的引用。
.idconsole.log(document.querySelector("#myform").id);
console.log(document.querySelector("#myform"));
<form id="myform">
<input name="id" type="text" value="myvalue">
</form>或name，这是HTML元素的本机属性或属性的名称，那么您会没事的：
idconsole.log("The value of the id attribue of the form as well as the value of the id property of the form DOM object is: " + document.querySelector("#myform").id); // Now returns the id of the element
console.log("The input element within the form is: ", document.querySelector("input[name='user']"));
答案 3 :(得分：0)
我想出了两个相当大的构造，无论任何可能的字段名称，它们都必须起作用。这个想法是从干净的对象中借用方法，从原型中获取访问器。
必须从原型链中选择正确的原型（您必须知道属性已定义）。
// To access obscured methods (and also attributes)
console.log(document.createElement("form").getAttribute.apply(document.querySelector("#myform"), ["id"]))
// To access obscured properties (such as `style`):
Object.getOwnPropertyDescriptor(Object.getPrototypeOf(Object.getPrototypeOf(document.createElement("form"))), "style").get.apply(document.querySelector("#myform")).background = "green"<!DOCTYPE html>
<meta charset="UTF-8">
<title>Form</title>
<form id="myform">
<input name="id" type="text" value="myvalue">
<input name="getAttribute" type="text" value="myvalue2">
<input name="style" type="text" value="myvalue3">
</form>