HTML开发与应用：准确快速定位获取元素方法HTML DOM。
HTML开发与应用：准确快速定位获取元素方法HTML DOM。
HTML DOM 简介：
根据ID查找元素：根据ID来获取一个元素，并且得到该元素对象
根据name属性查找元素：根据name属性来获取元素，得到符合条件的所有元素（数组） 。
根据标签名查找元素：根据标签名来获取，并且得到符合标签名的所有元素（数组）。
什么是DOM：
1.整个文档是一个文档节点。
2.每个 HTML 元素是元素节点。
3.HTML 元素内的文本是文本节点。
4.每个 HTML 属性是属性节点。
5.注释是注释节点。
为什么节点方便用于地位获取元素？
因为节点有很明显，很清晰的分层关系，或者说是有很清晰的等级关系，如果标签1包含一个标签2和一个标签3，那么我们就称标签1是标签2和标签3的父标签。2标签和3标签是1标签的子标签。2便签是3标签的同胞标签。那么也就是说，如果我们获得一个标签的位置，那么我们就可以通过父子关系，同级关系，等关系来表示出个个标签的位置，以此来获得元素。
标签如下：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
HTML DOM 对象 - 方法和属性：
我们来看一个例子：
这个例子是将form表单实现对信息的登记，也就是将用户所填写的信息获取，在按某种方式罗列出来，这是一道对初学者来说相当综合的一道题。他这里面有对表单的考察，与应用。我们先来看看代码。
<body>
<table border="1px" bordercolor="#0000ff" width="600px" height="400px" cellpadding="0px" cellspacing="0px" >
<tr>
<td align="right">用户名:td><td><input type="text" name="" id="stuName" value="" />td>
tr>
<tr>
<td align="right">密 码:td><td><input type="password" id="passwd" />td>
tr>
<tr>
<td align="right">专 业:td><td><select id="profession"><option>——请选择——option><option>电子option><option>信息option>select>td>
tr>
<tr>
<td align="right">性 别:td><td><input type="radio" name="gender" value="男" />男<input type="radio"name="gender" value="女" />女<input type="radio" name="gender" value="其他" />其他td>
tr>
<tr>
<td align="right">兴 趣:td><td><input type="checkbox" name="hobby" id="" value="羽毛球" />羽毛球<input type="checkbox" name="hobby" id="" value="篮球" />篮球<input type="checkbox" name="hobby" id="" value="乒乓球" />乒乓球td>
tr>
<tr>
<td><center><input type="submit" onclick="shouInput()" value="提交" />center>td>
<td><center> <button onclick="show()" style="margin-right: 40px;">显示button>
<input type="reset" onclick="dele()" value="清除" />
center>
td>
tr>
table>
<div style="width: 800px; height: 400px; border: solid 1px; background-color: aliceblue; position: fixed; left: 100%; top: 0px; margin-left:-800px ;" id="result">
div>
body>
<script type="text/javascript">
/*定义一个全局变量*/
var registerStudent = new Array();
function shouInput(){
var stuNameInput=document.getElementById("stuName").value;
var passwdInput=document.getElementById("passwd").value;
var stuProfession=document.getElementById("profession").value;
var stuGender=document.getElementsByName("gender");
var gender="";
for(var i=0;iif (stuGender[i].checked){
gender=stuGender[i].value;
break;
}
}
var stuHobby=document.getElementsByName("hobby");
var hobby="";
for(var i=0;iif(stuHobby[i].checked){
if(hobby!=""){
hobby=hobby+","+stuHobby[i].value;}
else{
hobby=stuHobby[i].value;}
}
}
//将所输入的信息存储进object中。
var student = new Object();
student.name=stuNameInput;
student.password= passwdInput;
student.profession=stuProfession;
student.gender = gender;
student.hobby = hobby;
registerStudent.push(student);
//清空text表单。
document.getElementById("stuName").value="";
document.getElementById("passwd").value="";
document.getElementById("profession").value="";
//清空多选与单选。
for(var i=0;ifalse;
}
for(var i=0;ifalse;
}
}
function show(){
var div_result = document.getElementById("result");
for(var i = 0; ivar name = registerStudent[i].name;
var password = registerStudent[i].password;
var profession = registerStudent[i].profession;
var gender=registerStudent[i].gender;
var hobby=registerStudent[i].hobby;
div_result.innerHTML += "1.姓名:"+name+" 2.密码:"+password+" 3.专业:"+profession+"4.性别"+gender+"5.爱好"+hobby+"
";
}
}
function dele(){
var div_result = document.getElementById("result");
div_result.innerHTML="";
registerStudent=new Array();
}
script> 在这里，我们要实现的功能有：
1.基本表单的功能，包括单选多选，下拉框。
2.点击注册清空原有列表的内容。
3.点击显示按钮则可以查看之前所录入的讯息。
4.点击清空，可以将原有的信息清空。
在这里为了方便用户体验，我并没有用document.write,而是将那些信息放进了一个被右移动的div中。
