文档对象模型的使用（实验）访问表单内容及表单元素

结果样式

重置按钮按下

list按下

HTML部分框架结构

<div id=top></div>
<div id=’center’>
<form id=’from’  method=‘post’ action=‘’>
  <div id=left’  ></div>
  <div id=’right’></div>
</form>
</div>

//保证所有提交的内容都在一个form里

对HTML修饰（css）

*{margin:0; padding: 0; list-style: none; }
body{border:1px solid black ; height:700px; width:600px; margin:10px auto}
#top{background: darkblue; color: white; text-align: center; height:50px; width:600px; font-size: x-large;}
/*#txt{border:1px solid black;  width:250px;}*/

#center{ height:450px; width:600px;line-height: 2;}
#left{float:left;  height:450px; width:250px; margin: 10px; padding: 2px;}
#right{float:left;  height:450px; width:250px; margin: 10px; padding: 2px;}

//表单里有文本框，密码，复选框，单选，下拉列表，列表框插件

//文本框text
用户名：<input type="text" size="10" id="l_1"/><br>
//密码：password
密码：<input type="password" id="r_1" size="8"><br>
//复选框：checkbox
常去网站：<br>
<input type="checkbox" name="l_2" value="a">CSDN
<input type="checkbox" name="l_2" value="b">MSDN
<input type="checkbox" name="l_2" value="c">新闻网<br/>
<input type="checkbox" name="l_2" value="d">几世网
<input type="checkbox" name="l_2" value="e">教程网<br>
//单选 radio
默认搜索：<br>
<input type="radio" name="r_2">baidu
<input type="radio" name="r_2">goole<br>
<input type="radio" name="r_2">yahoo
<input type="radio" name="r_2">MSN<br>
//每个元素对应一个 <option> 标签 - 由 0 起始。
//下拉列表:
最想了解的技术：<br>
<select id="r_3">
    <option>设计模式</option>
    <option>网络安全</option>
    <option>网络入侵防御</option>
    <option>网络协议</option>
</select>
//列表框
<select size="6" id="l_3" multiple> //multiple:按下Ctrl进行多选
    <option>ASP网站开发</option>
    <option>Access和SQL Server</option>
    <option>ASP,NET网站开发</option>
    <option>ADO,NET编程</option>
    <option>XML应用</option>
    <option>DIV+CSS</option>
</select>
//下拉列表框是因为没有size，所以出现滚动条；
//设置一个div去装所有输出的内容
<div id="txt" style="border:1px solid black; height: 100px; width:200px">
    <div id="na_pass"></div>
    <div id="mo_ren_sou_suo"></div>
    <div id="web"></div>
    <div id="skills"></div>
    <div id="knowledge"></div>
</div>

正式开始写js部分

//因为reset按钮触发onclick时，清空的是整个表单
//list 清空的是最终结果的文本框
//所以写两个函数分别清空表单和文本

//清空页面
function myreset()
{
    document.getElementById('form1').reset();//重置按钮的id，name不要设置为reset, 用reset就可以把表单重置。
    // document.getElementById('form2').reset();

}
function resettxt()
{
    document.getElementById('txt').innerText ="";
}

转换部分，把所选内容转到文本框中

//先把文本框每一行的id选出来

let na_pass=document.getElementById('na_pass');
let mo_ren_sou_suo=document.getElementById('mo_ren_sou_suo');
let web=document.getElementById('web');
let skills=document.getElementById('skills');
let knowledge=document.getElementById('knowledge');

//就是简单地把两个value值填入到第一行的innerHTML中

//第一行na_pass
let l_1=document.getElementById('l_1');
let r_1=document.getElementById('r_1');
na_pass.innerHTML="姓名："+l_1.value+"；"+"密码："+r_1.value;

//要想选出来单选按钮的文字部分就肯定不能用value了，而是用nodeValue
//但是为什么用nextsibling（下一个兄弟节点）呢？
//因为你所取到的是input这个标签，next之后才能取到他的文本节点

//第二行。mo_ren_sou_suo
let r_2=document.getElementsByName('r_2');
for(let i=0;i<r_2.length;i++)
{
    if(r_2[i].checked)
    {
        mo_ren_sou_suo.innerHTML="默认搜索："+r_2[i].nextSibling.nodeValue;//******
    }
}

//和单选一样，就是要一个变量，可以存所有选中的项

//第三行 web
let l_2=document.getElementsByName('l_2');
let aa='';
for(let i=0;i<l_2.length;i++)
{
    if(l_2[i].checked)
    {
        aa+=l_2[i].nextSibling.nodeValue;
        web.innerHTML=aa;
    }
}

//这时候的选项就不再是input了，而是select option；
//自然不能用checked，用selected（被选中）
//同样因为多选，要有一个变量存储所有所选项

//第四行skills
let l_3=document.getElementById('l_3');
let bb=l_3.children;
let cc='';
for(let i=0;i<bb.length;i++)
{
    if(bb[i].selected)
    {
        cc+=bb[i].innerHTML;
        skills.innerHTML=cc;
    }
}

//option有一个功能，可以直接选出option所对应的文本。‘text’
//和上面一样就是不用innerHTML；

let r_3=document.getElementById('r_3');
let ee='';
for(let i=0;i<r_3.length;i++)
{
    if(r_3.options[i].selected)
    {
        ee+=r_3.options[i].text;
        knowledge.innerHTML=ee;
    }
}

//最后只需要用的时候调用函数就行了

window.onload=function()
{
    let sub=document.getElementById('sub');
    let myyreset=document.getElementById('myyreset');
    let list =document.getElementById('list');

    sub.onclick=function()
    {
        digital();
    };
    myyreset.onclick=function()
    {
       myreset();
    };
    list.onclick=function()
    {
        resettxt();
    };
}

全部代码：

js

//清空页面
function myreset()
{
    document.getElementById('form1').reset();//重置按钮的id，name不要设置为reset, 用reset就可以把表单重置。
    // document.getElementById('form2').reset();

}
function resettxt()
{
    document.getElementById('txt').innerText ="";
}
// function re()
// {
//     location.reset();
// }
//数据传输
function digital()
{
    let na_pass=document.getElementById('na_pass');
    let mo_ren_sou_suo=document.getElementById('mo_ren_sou_suo');
    let web=document.getElementById('web');
    let skills=document.getElementById('skills');
    let knowledge=document.getElementById('knowledge');

    //第一行na_pass
    let l_1=document.getElementById('l_1');
    let r_1=document.getElementById('r_1');
    na_pass.innerHTML="姓名："+l_1.value+"；"+"密码："+r_1.value;

    //第二行。mo_ren_sou_suo
    let r_2=document.getElementsByName('r_2');
    for(let i=0;i<r_2.length;i++)
    {
        if(r_2[i].checked)
        {
            mo_ren_sou_suo.innerHTML="默认搜索："+r_2[i].nextSibling.nodeValue;//******
        }
    }


    //第三行 web
    let l_2=document.getElementsByName('l_2');
    let aa='';
    for(let i=0;i<l_2.length;i++)
    {
        if(l_2[i].checked)
        {
            aa+=l_2[i].nextSibling.nodeValue;
            web.innerHTML=aa;
        }
    }

    //第四行skills
    let l_3=document.getElementById('l_3');
    let bb=l_3.children;
    let cc='';
    for(let i=0;i<bb.length;i++)
    {
        if(bb[i].selected)
        {
            cc+=bb[i].innerHTML;
            skills.innerHTML=cc;
        }
    }

    //第五行knowledge
    let r_3=document.getElementById('r_3');
    let ee='';
    for(let i=0;i<r_3.length;i++)
    {
        if(r_3.options[i].selected)
        {
            ee+=r_3.options[i].text;
            knowledge.innerHTML=ee;
        }
    }
 }

css

*{margin:0; padding: 0; list-style: none; }
body{border:1px solid black ; height:700px; width:600px; margin:10px auto}
#top{background: darkblue; color: white; text-align: center; height:50px; width:600px; font-size: x-large;}
/*#txt{border:1px solid black;  width:250px;}*/

#center{ height:450px; width:600px;line-height: 2;}
#left{float:left;  height:450px; width:250px; margin: 10px; padding: 2px;}
#right{float:left;  height:450px; width:250px; margin: 10px; padding: 2px;}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="Form_dom.css">
    <script src="Form_dom.js"></script>
    <script>
        window.onload=function()
        {
            let sub=document.getElementById('sub');
            let myyreset=document.getElementById('myyreset');
            let list =document.getElementById('list');

            sub.onclick=function()
            {
                digital();
            };
            myyreset.onclick=function()
            {
               myreset();
            };
            list.onclick=function()
            {
                resettxt();
            };
        }
    </script>

</head>
<body >
<div id="top">元素演示区域</div>
<div id="center">
    <form method="post" id="form1" action="">
    <div id="left">

            用户名：<input type="text" size="10" id="l_1"/><br>
            常去网站：<br>
            <input type="checkbox" name="l_2" value="a">CSDN
            <input type="checkbox" name="l_2" value="b">MSDN
            <input type="checkbox" name="l_2" value="c">新闻网<br/>
            <input type="checkbox" name="l_2" value="d">几世网
            <input type="checkbox" name="l_2" value="e">教程网<br>
            掌握技能：<br>
            <select size="6" id="l_3" multiple>
                <option>ASP网站开发</option>
                <option>Access和SQL Server</option>
                <option>ASP,NET网站开发</option>
                <option>ADO,NET编程</option>
                <option>XML应用</option>
                <option>DIV+CSS</option>
            </select>
            <br>
            <input type="button" value="提交" id="sub" >
            <input type="reset" value="重置" id="myyreset" >
            <input type="button" value="list"  id="list">


        <div >您输入的信息为：</div>
<!--        </form>-->
    </div>
    <div id="right">
<!--        <form method="get" id="form2" action="">-->

            密码：<input type="password" id="r_1" size="8"><br>
            默认搜索：<br>
            <input type="radio" name="r_2">baidu
            <input type="radio" name="r_2">goole<br>
            <input type="radio" name="r_2">yahoo
            <input type="radio" name="r_2">MSN<br>
            最想了解的技术：<br>
            <select id="r_3">
                <option>设计模式</option>
                <option>网络安全</option>
                <option>网络入侵防御</option>
                <option>网络协议</option>
            </select>
<!--        </form>-->
        <br><br><br>
        <div id="txt" style=" height: 100px; width:200px">
            <div id="na_pass"></div>
            <div id="mo_ren_sou_suo"></div>
            <div id="web"></div>
            <div id="skills"></div>
            <div id="knowledge"></div>
        </div>

    </div>
    </form>
</div>
</body>
</html>

注意点：

1.reset按钮触发onclick时，清空的是整个表单，所以保证所有提交的内容都在一个form里
2.单选框复选框用input各自的type；列表框用select option
3.Input的选中用checked；Select的选中用selected
4.直接选出option所对应的文本。Text，（两个option之间的文本）