表单元素的 DOM 操作, 除了上面介绍的这些通用方法, 还有一些专属的表单方法. 表单的知识, 可以参考 - HTML5 表单.

value

  1. /*
  2.  Javascript Dom 提供了大部分对应的 HTML 的属性方法, 例如 “value”
  3.  <input type="text" value=""/>
  4. */
  5. inputElement = document.querySelector('input[type=text]')
  6. inputElement.value = 'jmjc.tech' // 赋值
  7. inputElement.value // 取值

checked

  1. /*
  2.  checked 方法
  3.  <input type='checkbox' checked id='one'>
  4. */
  5. document.querySelector('#one').checked // true or false

select

  1. /*
  2. 像 select 这种 如果获取 option 的值, 操作起来跟上章节的思想就是衔接的
  3. <select>
  4.  <optinon value='name'>Sophie</option>
  5. </select>
  6. */
  7. selectElement = document.querySelector('select') // 获取到一个集合
  8. selectElement[0] // 集合中的默认元素, 也就是 option
  9. selectElement[0].value // option 的值

表单提交

JavaScript 针对表单的操作, 还有一个非常重要的功能, 就是它可以阻止表单的默认行为, 然后 JavaScript 可以验证数据, 确保无误在通过自己希望的方式, 例如Ajax 等提交数据.

return false

  1. <form action="?">
  2.  <input type="submit" onclick="return false"> <!-- 被点击时 return false, 阻止表单提交 -->
  3. </form>
  4. <!-- 所有就有了下面这种操作 -->
  5. <form action="?">
  6.  <input type="text" name="pass">
  7.  <input type="submit" onclick="return (function() {
  8.    if (document.querySelector('input[type=text]').value < 6) { // 验证数据, 密码小于6位阻止提交
  9.     alert('密码不能小于6位')
  10.     return false
  11.    }
  12.    return true
  13.   })()">
  14. </form>

onsubmit

  1. <!-- onsubmit 的作用是当表单被提交时触发, 其实用起来跟上一种方法一样, 只是另外一种写法-->
  2. <form onsubmit='retutn f()'>
  3.  <input type="submit" value="submit">
  4. </form>
  5. <script type="text/javascript">
  6. var f = function() {
  7.  // ...
  8. }
  9. </script>

submit()

  1. <!-- 有时候我们不想通过 input submit 提供表单, JavaScript Dom 也提供了独立了 submit() 方法, 让我们可以结合事件, 绑定在其他元素上 -->
  2. <form>
  3.  <input type="text">
  4. </form>
  5. <p onclick="return (function() {
  6.  form = document.querySelector('form')
  7.  form.submit()
  8. })()">点击提交表单</p>