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;i<stuGender.length;i++){
if(stuGender[i].checked){
gender=stuGender[i].value;
break;
}
}
var stuHobby=document.getElementsByName("hobby");
var hobby="";
for(var i=0;i<stuHobby.length;i++){
if(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;i<stuGender.length;i++){
stuGender[i].checked=false;
}
for(var i=0;i<stuHobby.length;i++){
stuHobby[i].checked=false;
}
}
function show(){
var div_result = document.getElementById("result");
for(var i = 0; i<registerStudent.length;i++){
var 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+"<br />";
}
}
function dele(){
var div_result = document.getElementById("result");
div_result.innerHTML="";
registerStudent=new Array();
}
</script>
在这里,我们要实现的功能有:
1.基本表单的功能,包括单选多选,下拉框。
2.点击注册清空原有列表的内容。
3.点击显示按钮则可以查看之前所录入的讯息。
4.点击清空,可以将原有的信息清空。
在这里为了方便用户体验,我并没有用document.write,而是将那些信息放进了一个被右移动的div中。