导航：表单和元素

一、文档中的表单是特殊集合document.forms的成员。
二、命名的集合：既是被命名了的，也是有序的。既可以使用名字，也可以使用在文档中的编号来获取表单。

  1. document.forms.my - name="my" 的表单
  2. document.forms[0] - 文档中的第一个表单

【示例1】当我们有了一个表单时，其中的任何元素都可以通过命名的集合forms.elements来获取到。

  1. <form name="my">
  2.   <input name="one" value="1">
  3.   <input name="two" value="2">
  4. </form>
  5. <script>
  6.   // 获取表单
  7.   let form = document.forms.my; // <form name="my">元素
  9.   // 获取表单中的元素
  10.   let elem = form.elements.one; // <input name="one">元素
  12.   alert(elem.value); // 1
  13. </script>

三、可能会有多个名字相同的元素，这种情况经常在处理单选按钮中出现。这种情况下，form.elements[name]将会是一个集合。

<form>
  <input type="radio" name="age" value="10">
  <input type="radio" name="age" value="20">
</form>
<script>
  let from = document.forms[0];
  let ageElems = form.elements.age;

  alert(ageElems[0]); // [object HTMLInputElement]
</script>

四、这些导航（navigaton)属性并不依赖于标签的结构。所有的控件元素，无论它们在表单中有多深，都可以通过form.elements获取到。
五、一个表单内会有一个或多个

元素。它们也具有elements属性，该属性列出了
中的表单空间。

<body>
  <form id="form">
    <fieldset name="userFields">
      <legend>info</legend>
      <input name="login" type="text">
    </fieldset>
  </form>
  <script>
    alert(form.elements.login); // <input name="login">

    let fieldset = form.elements.userFields;
    alert(fieldset); // HTMLFieldSetElement

    // 我们可以通过名字从表单和fieldset中获取input
    alert(fieldset.elements.login == form.elements.login); // true
  </script>
</body>

六、可以通过form[index/name]来访问元素。换句话说，我们可以将form.elements.login写成form.login
1、小问题：如果我们访问一个元素，然后修改它的name，之后它仍然可以被通过旧的name访问到（当然也能通过新的name访问）。
（1）不过我们很少修改表单元素的名字。
【示例1】

<form id="form">
  <input name="login">
</form>

<script>
  alert(form.elements.login == form.login); // true，与 <input> 相同

  form.login.name = "username"; // 修改 input 的 name

  // form.elements 更新了 name：
  alert(form.elements.login); // undefined
  alert(form.elements.username); // input

  // form 允许我们使用两个名字：新的名字和旧的名字
  alert(form.username == form.login); // true
</script>

反向引用：element.form

一、对于任何元素，其对应的表单都可以通过element.form访问到。因此，表单引用了所有元素，元素也引用了表单。
【示例1】

<form id="form">
  <input type="text" name="login">
</form>

<script>
  // form -> element
  let login = form.login;

  // element -> form
  alert(login.form); // HTMLFormElement
</script>

表单元素

input, textarea

一、我们可以通过input.value(字符串）或input.checked（布尔值）来访问复选框（checkbox）中的它们的value
【示例1】

input.value = "New value";
textarea.value = "New text";

input.checked = true; // 对于复选框（checkbox）或单选按钮（radio button）

二、使用textarea.value，而不是textarea.innerHTML。仅存储最初在页面上的HTML，而不是存储的当前value。

select、option

一、一个设置value的不同方式（3种）：
1、找到对应的

<select id="select">
  <option value="apple">Apple</option>
  <option value="pear">Pear</option>
  <option value="banana">Banana</option>
</select>

<script>
  // 所有这三行做的是同一件事
  select.options[2].selected = true;
  select.selectedIndex = 2;
  select.value = 'banana';
</script>

三、如果 中的编号。
3、option.text：