JavaScript加强:Dom
获取各个属性的值:
DOM: DOM= Document Object Model,文档对象模型,DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说,这是表示和处理一个HTML或XML文档的常用方法。有一点很重要,DOM的设计是以对象管理组织(OMG)的规约为基础的,因此可以用于任何编程语言.
D:文档 – html 文档 或 xml 文档
O:对象 – document 对象的属性和方法
M:模型
DOM 是针对xml(html)的基于树的API。
DOM树:节点(node)的层次。
DOM 把一个文档表示为一棵家谱树(父,子,兄弟)
DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>01l.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
//当窗体加载完毕后,调研init函数
window.onload = init;
function init(){
// var input = document.getElementById("username"); 通过Id查询
// alert(input.nodeName+"--"+input.nodeValue+"--"+input.nodeType);
var btn = document.getElementById("button");
btn.onclick = say;
// --> btn.addEventListener("click",say,false);
}
function say(){
/*
根据标签名称获取
var ins= document.getElementsByTagName("input");
for(var i= 0;i<ins.length;i++){
alert(ins[i].value);
}*/
/*
根据标签的 name名称获取
var sexs = document.getElementsByName("sex");
for( var i=0;i<sexs.length;i++){
alert(sexs.[i].value);
}*/
var msg="";
var name =document.getElementById("username");
//alert(name);
if(name.value==""){
}else{
msg+="姓名:"+name.value;
}
var sexs =document.getElementsByName("sex");
for( var i=0;i<sexs.length;i++){
if(sexs[i].checked){
msg+="性别:"+sexs[i].value;
}
}
var favs = document.getElementsByName("fav");
for( var i=0;i<favs.length;i++){
if(favs[i].checked){
msg+="爱好:"+favs[i].value;
}
}
document.getElementById("msg").innerHTML=msg;
}
</script>
</head>
<body><div>
<form action="" method="post" enctype="application/x-www-form-urlencoded">
用户名:
<input type="text" name="username" id="username" />
<br />
<br />
性别 :
<input type="radio" name="sex" value="男" />
男
<input type="radio" name="sex" value="女" />
女
<br />
你个人爱好:
<input type="checkbox" name="fav" value="吃" />
吃
<input type="checkbox" name="fav" value="喝" />
喝
<input type="checkbox" name="fav" value="睡" />
睡
<input type="checkbox" name="fav" value="玩" />
玩
<br />
<input type="button" id="button" value="得到指定的值"/>
<div id="msg">
</div>
</form>
</div>
</body>
</html>