设计网页界面， 在JavaScript脚本中DOM控制HTML表单及表单元素
本次实验主要内容为JavaScript脚本中DOM控制HTML表单及表单元素的方法。包括表单的引用、表单元素的引用与值的处理、DOM的使用以及document对象的应用。本文包括document和form对象的内容。
实验目的
- 掌握JavaScript脚本中DOM控制HTML表单及表单元素的方法。
- 利用脚本熟练处理表单数据、输出表单以及表单提交时数据合法性验证的能力。
- 表单的引用、表单元素的引用与值的处理。
实验内容
设计如下图所示表单，输出所填及所选内容。
代码部分
HTML代码
<body>
<div id="largediv">
<h2 id="yanshi" >元素演示区域</h2>
<div id="user">
<form action="">
<span>用户名：</span>
<input type="text" id="name">
<br><br>
<span>常去网站：</span><br>
<input type="checkbox" name="checkbox" value="CSDN ">CSDN
<input type="checkbox" name="checkbox" value="GitHub">GitHub
<input type="checkbox" name="checkbox" value="博客园">博客园<br>
<input type="checkbox" name="checkbox" value="Youtube">Youtube
<input type="checkbox" name="checkbox" value="IT之家">IT之家
<br><br><br>
<span>掌握技能：</span><br>
<select id="skill" size="6" multiple="multiple">
<option >ASP网站开发</option>
<option >Access和SQL sever</option>
<option >ASP.NET网站开发</option>
<option>ADO.NET编程</option>
<option>XML应用</option>
<option >DIV+CSS</option>
</select><br>
</form>
</div>
<div id="mm">
<span>密码：</span>
<input type="password" name="password" id="password">
<br><br>
<span>默认搜索：</span>
<br>
<input type="radio" name="网站" value="baidu">baidu
<input type="radio" name="网站" value="google">google <br>
<input type="radio" name="网站" value="bing">bing
<input type="radio" name="网站" value="MSN">MSN<br><br>
<span>最想了解的技术：</span>
<br>
<select id="technology"></select>
<select id="s2"></select>
</div>
<div id="btn">
<input type="submit" value="提交">
<button type="button" id="reset">重置</button>
<button type="button" id="list">list</button>
</div>
<div id="text">
<p id="demo"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
<p id="demo5"></p>
<p id="demo6"></p>
</div>
</div>
</body>
CSS代码
<style type="text/css">
#largediv{
width: 50%;
height: 100%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#yanshi{
background-color: #6495ED;
text-align:center;
top: 0; left: 0; bottom: 0; right: 0;
}
#user{
text-align: justify;
color: #333333;
}
#mm{
text-align: justify;
margin-left: 250px;
margin-top: -280px;
}
#btn{
text-align: justify;
margin-top: 120px;
margin-right: 60px;
}
#text{
color: royalblue;
}
</style>
JavaScript代码
<script type="text/javascript">
window.onload = function(){
var city = new Array;
city['操作系统'] = ['Windows', 'Linux', 'iOS', 'Android','UNIX'];
city['web前端'] = ['HTML5', 'CSS3', 'JavaScript','Vue.js','jQuery'];
city['编程语言'] = ['c语言', 'c++', 'Java','SQL', 'python'];
function firstSelect() {
var select1 = document.querySelector('#technology');
for(var k in city)
{
select1.add(new Option(k), null);}
secondSelect();
}
function secondSelect() {
var select2 = document.getElementById("s2");
var select1 = document.getElementById("technology").value;
select2.length = 0;
for(var i in city[select1 ]) {
select2.add(new Option(city[select1][i], city[select1][i]), null);
};
}
document.querySelector('#technology').onchange =function(){
secondSelect();
};
firstSelect();
}
list.onclick=function(){
var username=document.getElementById("name").value;
var p=document.getElementById("demo");
p.innerHTML="用户名："+username;//输出用户名
var checkbox=document.getElementsByName("checkbox");//得到所有的checkbox
var p2=document.getElementById("demo2");
var check_box=[];//申明数组保存所有被选中checkbox背后的值
for(var i=0;i<checkbox.length;i++){
if(checkbox[i].checked){
//如果checkbox被选中
check_box.push(checkbox[i].value); //将被选中checkbox背后的值添加到数组中
}
}
p2.innerHTML="常去网站："+check_box;//输出常用网站；
var select1=document.getElementById("skill");
var p3=document.getElementById("demo3");
var select_1=[]; //初始化select——1
var index=select1.length;
for(var j=0;j<index;j++){
if(select1.options[j].selected){
select_1.push(select1.options[j].value); //遍历数组添加数据
}
}
p3.innerHTML="掌握技能："+select_1;//输出掌握技能；
var password=document.getElementById("password").value;
var p4=document.getElementById("demo4");
p4.innerHTML="密码："+password;
var radio=document.getElementsByName("网站");//按照name属性获取该radio的集合
var p5=document.getElementById("demo5");
var s;
for(let q=0;q<radio.length;q++ ){
if(radio[q].checked){
s=radio[q].value;
}
}
p5.innerHTML="默认搜索："+s;
var p6=document.getElementById("demo6");
var technology=document.getElementById("technology");
var s2=document.getElementById("s2");
var num1=technology.selectedIndex;// 选中索引
var num2=s2.selectedIndex;
ag1=technology.options[num1].value;// 选中值
ag2=s2.options[num2].value;
p6.innerHTML="最想了解的技术："+ag1+"->"+ag2;
}
reset.onclick=function(){
var p=document.getElementById("demo");
p.innerHTML=""
var p2=document.getElementById("demo2");
p2.innerHTML=""
var p3=document.getElementById("demo3");
p3.innerHTML=""
var p4=document.getElementById("demo4");
p4.innerHTML=""
var p5=document.getElementById("demo5");
p5.innerHTML=""
var p6=document.getElementById("demo6");
p6.innerHTML=""
}
</script>
Document对象
document对象的属性
访问Document对象属性的语法格式为：document.propertyName
| 属性 | 说明 |
|---|---|
| title | 表示文档的标题 |
| URL | 表示文档对应的URL |
| domain | 表示当前文档的域名 |
| lastModified | 表示最后修改文档的时间 |
| cookie | 表示与文档相关的cookie |
| all | 表示文档中所有HTML标记符的数组 |
| applets | 表示文档中所有applets的信息，每一个applet都是这个数组中的一个元素 |
| anchors | 表示文档中所有带name属性的超链接的数组 |
| froms | 表示文档中所有的表单信息，每一个表单都是这个数组的一个元素 |
| images | 表示文档中所有的图像信息，每一个图像都是这个数组的一个元素 |
| links | 表示文档中所有的超链接信息，每一个超链接都是这个数组的一个元素 |
| referrer | 表示连接到当前文档的URL |
| embeds | 表示文档中所有的嵌入对象的信息，每一个嵌入对象都是这个数组的一个元素 |
document对象的常用方法
1.getElementById(“id”)方法
通过HTML元素的id属性访问元素。
2.getElementsByName(“name”)方法
适用于返回HTML元素中指定name属性的元素数组，而且getElementsByName()仅用于input、radio、checkbox等元素对象。
3.getElementByTagName(tagname)方法
getElementByTagName方法返回指定HTML标记名的元素数组，通过遍历这个数组获得每一个单独的子元素。
DOM Element的常用方法
1.appendChild(node)方法
appendChild方法是向当前节点对象追加节点，经常用于给页面动态的添加内容。
2.removeChild(childreference)方法
removeChild方法是删除当前节点下的某个子节点，并返回被删除的节点。
3.replaceChild(newChild,oldChild)方法
replaceChild方法是把当前节点的一个子节点替换成另一个节点。
4.insertBefore(newElement,targetElement)方法
insertBefore方法是在当前节点中插入一个新节点。
5.cloneNode(deepBoolean)方法
cloneNode方法是复制并返回当前节点的复制节点。该方法复制原来节点的属性值，包括ID属性，所以在把这个节点当新节点加到document之前，一点要修改ID属性，以便使ID属性保持唯一。
Form对象
表单对象的属性、方法和事件
| 属性、方法和事件 | 说明 |
|---|---|
| name属性 | 表示表单的名称 |
| length属性 | 表示表单中元素的数目 |
| action属性 | 表示表单提交时执行的动作 |
| elements属性 | 表示表单中所有控件元素的数组，数组下标就是控件元素在HTML源文件中的序号 |
| encoding属性 | 表示表单数据的编码类型 |
| method属性 | 表示发送表单的HTTP方法，取值为get或post |
| target属性 | 表示用来显示表单结果的目标窗口或框架，取值可以是_self,_parent,_top,_blank |
| reset()属性 | 将所有表单控件元素的值重新设置为其默认值，相当于单击表单中的“重置”按钮 |
| submit()属性 | 提交表单，相当于单击表单中的“提交”按钮 |
| onReset属性 | 单击“重置”按钮时触发 |
| onSubmit属性 | 单击“提交”按钮时触发 |