表单用户通常用于收集用户数据，包含了 input 元素如：文本字段，复选框，单选框，提交按钮等待。表单也可以说选项菜单, textarea, fieldset, legend, 和 label 元素。

表单用于向服务端发送数据。

Form 对象属性

action: 提交表单后，服务器端处理脚本的URL。

autocomplete: 自动填充

enctype

• application/x-www-form-urlencoded，默认
• multipart/form-data，若包含type=file的控件，必须使用该编码，且method为post。请参阅 RFC1867。
• text/plain

method: 表单的HTTP提交方式，最常用的是 get 和 post。

target: _blank, _self, _parent, _top

Form 对象方法

Form 对象事件

onSubmit: 点击表单提交按钮时，会调用该函数。返回 fasle，就不会提交表单；否则提交表单

Form表单提交

通常表单的提交有两种方式，一是直接通过html的form提交，代码如下：

xxxxxxxxxx
<form action="" method="" id="forms">
    <input type="text" name="username" value="" />
    <input type="password" name="pwd" value="" />
    <input type="submit" value="提交"/>
</form>

但有时候我们会出于安全角度考虑，给用户输入的密码进行加密，方法一就没办法解决这个问题，这时候我们同常会选择另一种方法，使用javaScript来进行表单提交，代码入下：

​x
<!--HTML-->
<form action="" method="" id="test_form">
    <input type="text" name="username" value="" />
    <input type="password" name="pwd" value="" />
    <button type="button" onclick='doSubmitForm()'>提交<button/>
</form>


<script>
var form = document.getElementById('test_form');
//再次修改input内容

form.submit();
</script>

这种方法有个缺点就是，打乱正常的表单提交程序，通常用户输入完成后点击回车键就可以提交，但是这个方法实现不了，所以，使用下面的方法便可以解决这个问题,，通过form自身的onsubmit方法，来触发提交，然后进行input的修改：

xxxxxxxxxx
<!--HTML-->
<form id='test_form' action='' method='' omsubmit='return checkForm()'>
    <input type='text' name='username' value=''/>
    <input type='password' name='pwd' value =''/>
    <button type='submit'>提交<button/>
<form/>

<script>
function checkForm(){
    var form = document.getElementById('test_form');
    //可在此修改input            
    //进行下一步
    return true;
}
</script>

注意，checkForm()方法中，return true时，表单才会正常提交，为false时，浏览器将不会提交，通常是用户的密码输入错误时，终止提交。

之前说过，为安全考虑用户提交时，一般对密码进行加密处理，代码如下：

xxxxxxxxxx
<!--HTML-->
<form id='test_form' action='' method='' omsubmit='return checkForm()'>
    <input type='text' name='username' value=''/>
    <input type='password' name='pwd' id='pwd' value =''/>
    <button type='submit'>提交<button/>
<form/>

<script>
function checkForm(){
    var pwd= document.getElementById('pwd');
   pwd.value= toMD5(pwd.value);            
    //进行下一步
    return true;
}
</script>

这种做法看上去没问题，但是当用户输入完成后，提交会发现密码框的 * 会由几个瞬间变成 32个，这是由于MD5加密造成的（MD5有32个字符）；如果想避免出现这种情况，需要充分利用到,代码如下：

xxxxxxxxxx
<!--HTML-->
<form id='test_form' action='' method='' omsubmit='return checkForm()'>
    <input type='text' name='username' value=''/>
    <input type='password'  id='input_pwd' value =''/>
    <input type='hidden' name='pwd' id='md5_pwd' value=''/>
    <button type='submit'>提交<button/>
<form/>

<script>
function checkForm(){
    var input_pwd= document.getElementById('input_pwd');
    var md5_pwd= document.getElementById('md5_pwd');
     md5_pwd.value= toMD5(input_pwd.value);            
    //进行下一步
    return true;
}
</script>

注意，是用户输入密码的input框，并没有设置 name 属性，而是给 设置了 name='pwd'，这样表单提交只会提交带有name属性的输入框，从而解决了上面的那个问题。

绑定事件onclick

JavaScript三种绑定事件的方式：

xxxxxxxxxx
　　1. <div id="btn" onclick="clickone()"></div> //直接在DOM里绑定事件
　　　　<script>
　　　　　function clickone(){ alert("hello"); }
　　　　</script>

　　2. <div id="btn"></div>
　　　　<script>
　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); } //脚本里面绑定
　　　　</script>

　　3. <div id="btn"></div>
　　　　<script>
　　　　　document.getElementById("btn").addeventlistener("click",clickone,false); //通过侦听事件处理相应的函数
　　　　　function clickone(){ alert("hello"); }
　　　　</script>

那么问题来了，1 和 2 的方式是我们经常用到的，那么既然已经有两种绑定事件的方法为什么还要有第三种呢？答案是这样的：

用 "addeventlistener" 可以绑定多次同一个事件，且都会执行，而在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；在脚本通过匿名函数的方式绑定的只会执行最后一个事件。

xxxxxxxxxx
　　1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div> 
　　　　<script>
　　　　　function clickone(){ alert("hello"); } //执行这个
　　　　　function clicktwo(){ alert("world!"); }
　　　　</script>

　　2. <div id="btn"></div>
　　　　<script>
　　　　　document.getElementById("btn").onclick = function（）{ alert("hello"); }
　　　　　document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个
　　　　</script>

　　3. <div id="btn"></div>
　　　　<script>
　　　　　document.getElementById("btn").addeventlistener("click",clickone,false);
　　　　　function clickone(){ alert("hello"); } //先执行
　　　　　document.getElementById("btn").addeventlistener("click",clicktwo,false);
　　　　　function clicktwo(){ alert("world"); } //后执行
　　　　</script>

以上；可根据场景灵活选择。

再加一个attachEvent

attachEvent和addEventListener在前端开发过程中经常性的使用，他们都可以用来绑定脚本事件，取代在html中写obj.onclick=method。

相同点：

它们都是dom对象的方法，可以实现一种事件绑定多个事件处理函数。

不同点：

1、早期版本的Internet Explorer浏览器使用attachEvent，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。

2、多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。

xxxxxxxxxx
obj = document.getElementById("testdiv");
obj.attachEvent('onclick',function(){{alert('1');});
obj.attachEvent('onclick',function(){{alert('2');});
obj.attachEvent('onclick',function(){{alert('3');});
//执行顺序是alert(3),alert(2),alert(1);

obj = document.getElementById("testdiv");
obj.addEventListener('click',function(){{alert('1');},false);
obj.addEventListener('click',function(){{alert('2');},false);
obj.addEventListener('click',function(){{alert('3');},false);
//点击obj对象时,执行顺序为alert('1'),alert('2'),alert('3');

3、绑定时间时，attachEvent必须带on，如onclick，onmouseover等，而addEventListener不能带on，如click，mouseover。这个区别在以上代码中可见。

4、attachEvent仅需要传递两个参数，而addEventListener需要传递三个参数，这里牵扯到“事件流”的概念。

侦听器在侦听时有三个阶段：捕获阶段、目标阶段和冒泡阶段。顺序为：捕获阶段（根节点到子节点检查是否调用了监听函数）→目 标阶段（目标本身）→冒泡阶段（目标本身到根节点）。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true，则侦听器只在捕获阶段处理事件，而不在目标或冒泡阶段处理事件。 如果useCapture 为 false，则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件，请调用两次 addEventListener，一次将 useCapture 设置为 true，第二次再将useCapture 设置为 false。

为了解决浏览器的兼容性可以写如下代码：(略，用不上了)

删除某个div下的div元素

最好给需要删除的div元素定义一个ID，以方便对其进行操作；

注意JS中是没有remove();方法的，在jquery中就可以直接使用 $("#divID").remove();移除该元素；这样非常方便、简单。

js中的话要通过获取该元素的父级元素，再调用.removeChild(要删除的元素);

xxxxxxxxxx
//js
var element = document.getElementsByClassName('PlayerToolbar')[0];
var element = document.getElementsByID('PlayerToolbar');
pt.parentNode.removeChild(element);

//jquery
$("#divID").remove();

innerHTML和innerText

document对象中有innerHTML、innerText这两个属性，都是获取document对象文本内容，但使用起来还是有区别的；

1） innerHTML设置或获取标签所包含的HTML+文本信息(从标签起始位置到终止位置全部内容，包括HTML标签，但不包括自身)

2） outerHTML设置或获取标签自身及其所包含的HTML+文本信息（包括自身）

3） innerText设置或获取标签所包含的文本信息（从标签起始位置到终止位置的内容，去除HTML标签，但不包括自身）

4） outerText设置或获取标签自身及其所包含的文本信息（包括自身）

xxxxxxxxxx

    ,----------------outerHTML---------------,
    |                                        |
    |                    -innerTEXT-         |
    |                    |         |         |
...><div id="testdiv"><p>Text in DIV</p></div><...
                      |                |
                      '---innerHTML----'

innerText和outerText在获取的时候是相同效果，但在设置时，innerText仅设置标签所包含的文本，而outerText设置包含包括标签自身在内的文本。

示例代码：

示例1：

xxxxxxxxxx
<html>
    <head><title>innerHTML</title></head>
    <body>
        <p id="p1">hello world </p>
        <script>
            var content= document.getElementById("p1");
            alert(content.innerHTML);
            alert(content.innerText)
        </script>
    </body>
</html>

通过IE浏览器打开，弹出内容为"hello world"和"hello world"

通过Firefox浏览器打开，弹出内容为"hello world"和"undefined"

通过chrome浏览器打开，弹出的内容为"hello world"和"hello world"

alert(content.outerHTML)则弹出："<p id="p1">hello world</p>"

示例2

xxxxxxxxxx
<html>
    <head><title>innerHTML</title></head>
    <body>
        <div id="d1"><p id="p1">hello world </p></div>
        <script>
            var content = document.getElementById("d1”);
            alert(content.innerHTML);
            alert(content.innerText)
        </script>
    </body>
</html>

通过IE浏览器打开，弹出内容为"<p id="p1">hello world</p>"和"hello world"

通过Firefox浏览器打开，弹出内容为"<p id="p1">hello world</p>"和"undefined"

通过chrome浏览器打开，弹出的内容为"<p id="p1">hello world</p>"和"hello world"

alert(content.outerHTML)则弹出："<div id="d1"><p id="p1">hello world</p></div>"

综上：innerHTML所有浏览器都支持，innerText是IE浏览器支持的，Firefox浏览器不支持。

不同之处：

1） innerHTML、outerHTML在设置标签之间的内容时，包含的HTML会被解析；而innerText、outerText则不会；

2） innerHTML、innerText仅设置标签之间的文本，而outerHTML、outerText设置包含自身标签在内文本

函数

setInterval

定义和用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法 setInterval(code,millisec[,"lang"])

参数 描述 code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

setTimeout

定义和用法 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

语法 setTimeout(code,millisec)

参数 描述 code 必需。要调用的函数后要执行的 JavaScript 代码串。 millisec 必需。在执行代码前需等待的毫秒数。

提示和注释 提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

innerHTML

定义和用法 innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

语法 tablerowObject.innerHTML=HTML

Tampermonkey例子

插入内容

xxxxxxxxxx
<!--例子：-->
<a href="http://map.baidu.com" target="_blank" class="mnav">地图</a>

<!--运行如下js：-->
<script language="javascript">
    document.getElementsByTagName("a")[0].innerHTML = "设置标签的html内容";
</script>

<!--则会变成：-->
<a href="http://map.baidu.com" target="_blank" class="mnav">设置标签的html内容</a>


<!--另一种插入内容的方法：-->
<form name="form1" method="post" action="">
<input name="textarea" type="text" value="">
</form>

<script language="javascript">
document.form1.textarea.value = "xxx";
</script>

增加、删除和获取内容

添加属性：obj.setAttribute('attr_name','attr_value');

获取属性值：obj.getAttribute('attr_name');

删除属性：obj.removeAttribute('attr_name');

点击提交表单

xxxxxxxxxx
document.getElementById("su").submit();

点击按钮

原生javascript的click在w3c里边的阐述是DOM button对象，也是html DOM click() 方法，可模拟在按钮上的一次鼠标单击。

button 对象代表 HTML 文档中的一个按钮。button元素没有默认的行为，但是必须有一个 onclick 事件句柄以便使用。

语法：buttonObject.click()

onclick是一个事件，Event对象 。支持该事件的 JavaScript 对象：button, document, checkbox, link, radio, reset, submit

HTML DOM Event 对象，代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

xxxxxxxxxx
document.getElementById('su').click();
document.getElementById('su').onclick();

获取select

xxxxxxxxxx

<select class="select_style" name="screensize" style="width:200px;">
                              <option value="auto">自适应</option>
                              <option value="full">全屏</option>
                              <option value="800x600">800x600</option>
                              <option value="1024x768">1024x768</option>
                              <option value="1280x720">1280x720</option>
                              <option value="1280x768">1280x768</option>
                              <option value="1440x900">1440x900</option>
                                                </select>

document.getElementsByTagName("select")
document.getElementsByName("screensize")[0].selectedIndex
document.getElementsByName("screensize")[0].selectedIndex=3

获取时间

xxxxxxxxxx
<!--js获取时间：-->

<script language="javascript">
    function time1(){
        var date = new Date();

        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var week = date.getDay();
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        var week1;
        switch(week)
        {
            case 0: week1='星期日'; break;
            case 1: week1='星期一'; break;
            case 2: week1='星期二'; break;
            case 3: week1='星期三'; break;
            case 4: week1='星期四'; break;
            case 5: week1='星期五'; break;
            case 6: week1='星期六'; break;
        }

        year+'年'+month+'月'+day+'日'+week1+'   时间为：'+hour+':'+min+':'+sec;
</script>

百度测试

xxxxxxxxxx
// ==UserScript==
// @name         Baidu
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  try to take over the world!
// @author       You
// @match        https://www.baidu.com/
// @grant        none
// ==/UserScript==


//document.getElementById("form").submit();

var second=0;
var minute=0;
var hour=0;

function remainTime2()
{
    second++;
    if(second==60)
    {
    second=0;minute+=1;
    }
    if(minute==60)
    {
    minute=0;hour+=1;
    }

    //document.form1.textarea.value = hour+"时"+minute+"分"+second+"秒";
    document.getElementsByTagName("a")[8].innerHTML = hour+"时"+minute+"分"+second+"秒";
    document.getElementsByTagName("input")[0].value = hour+"时"+minute+"分"+second+"秒";
    document.getElementsByTagName("input")[11].value = hour+"时"+minute+"分"+second+"秒";
}

setInterval(remainTime2,1000);

自动登录并刷新

xxxxxxxxxx
// ==UserScript==
// @name        1.1.1.2
// @namespace   1.1.1.2
// @include     http://1.1.1.2/ac_portal/default/*
// @version     1
// @grant       none
// @description 1.1.1.2 自动登录
// ==/UserScript==

function clickbutton() {
   document.getElementById('password_name').value='5643';
   document.getElementById('password_pwd').value='1';
   document.getElementById("rememberPwd").checked = true;
   document.getElementById('password_submitBtn').onclick();

    setTimeout(refresh,1000)
}

function refresh()
{
    window.location.href="http://1.1.1.2/ac_portal/default/pc.html?tabs=pwd";
}

var second=0;
var minute=0;

function remainTime()
{
    second++;
    if(second==60)
    {
        second=0;minute+=1;
    }
    if(minute==30)
    {
        minute=0;
        clickbutton();
    }
    document.getElementById("password_submitBtn").value = "已停留:" + minute+"分"+second+"秒";
}

setInterval(remainTime,1000);
//setInterval(clickbutton,5000);

八零音乐自动签到

xxxxxxxxxx
// ==UserScript==
// @name         pt80.net自动签到
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://www.pt80.net/plugin.php?id=dsu_paulsign:sign
// @grant        none
// ==/UserScript==

function clickbutton() {
   document.getElementById('yl').onclick();
   document.getElementsByName('qdmode')[1].checked='true';
   document.getElementsByName('qdmode')[1].onclick();

   //document.getElementsByTagName('a')[83].onclick();
   document.getElementsByTagName('a')[68].onclick();
}


setInterval(clickbutton,5000);