<html>
<head>
<title>获取元素对象学习</title>
<meta charset="UTF-8"/>
<!--
document对象获取元素对象学习：
直接方式：
ID方式：
作用：指定的获取HTML元素对象
使用：document.getElementById("ID值")
name方式：
作用：获取所有的name属性值相同的HTML元素对象的数组
使用：document.getElementsByName("name属性值");
标签名方式：
作用：获取一类标签的HTML元素对象的数组
使用：document.getElementsByTagName("标签名");
class属性:
作用：获取使用了指定类样式的所有HTML元素对象的数组。
使用：document.getElementsByClassName("类样式名");
间接方式：
父子关系：通过父标签获取子标签对象数组
先获取父然后通过属性childNodes获取所有的子数组
子父关系:通过自标签获取父标签对象
先获取子然后通过属性parentNode获取父
兄弟关系：通过当前标签获取上和下紧跟的标签对象
先获取当前的然后通过属性previousSibling获取上紧跟的元素对象
通过属性nextSibling获取下紧跟的元素对象。
-->
<!--声明js代码域-->
<script type="text/javascript">
//直接方式
//ID方式
function getEleById(){
var inp=window.document.getElementById("uname");
alert(inp.value);
}
//name属性值方式
function getElesByName(){
var inps=document.getElementsByName("fav");
alert(inps)
}
//标签名方式：
function getElesByTagName(){
var inps=document.getElementsByTagName("input");
alert(inps);
}
//class样式方式：
function getElesByClassName(){
var inps=document.getElementsByClassName("common");
alert(inps[1])
}
//间接方式：
//父子关系
function getElesByParent(){
//获取父级标签对象
var pid=document.getElementById("showdiv");
//获取所有的子元素
var cds=pid.childNodes;
alert(cds[0].nodeType);
}
//子父关系
function getEleByChild(){
//获取子标签对象
var cinp=document.getElementById("phone");
//获取父
var pdiv=cinp.parentNode;
alert(pdiv);
}
//兄弟关系
function getEleBypn(){
//获取当前元素对象
var inp=document.getElementById("phone");
//获取兄
var ps=inp.previousSibling;
alert(ps);
//获取弟
var ns=inp.nextSibling;
alert(ns);
}
</script>
<style type="text/css">
.common{
border: solid 1px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<h3>获取元素对象学习</h3>
<hr />
<input type="button" id="" value="测试--ID" onclick="getEleById()" />
<input type="button" id="" value="测试--name属性" onclick="getElesByName()" />
<input type="button" id="" value="测试--标签名" onclick="getElesByTagName()" />
<input type="button" id="" value="测试--class样式" onclick="getElesByClassName()" />
<hr />
<input type="button" id="" value="测试--父子关系" onclick="getElesByParent()" />
<input type="button" id="" value="测试--子父关系" onclick="getEleByChild()" />
<input type="button" id="" value="测试--兄弟关系" onclick="getEleBypn()" />
<hr />
用户名: <input type="text" name="uname" id="uname" value="" /><br />
个人爱好:
<input type="checkbox" name="fav" id="fav" value="1" />唱歌
<input type="checkbox" name="fav" id="fav" value="2" />跳舞
<input type="checkbox" name="fav" id="fav" value="3" />看电影
<input type="checkbox" name="fav" id="fav" value="4" />玩游戏
<div id="showdiv" class="common">
<input type="text" id="" value="" /><br />
电话:<input type="text" id="phone" value="" /><br />
<input type="text" id="" value="" /><br />
<input type="text" id="" value="" /><br />
<input type="text" id="" value="" /><br />
</div>
<table class="common">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
![假如没有sqlserver存储过程，这个系统真的傻眼了！从几百万条数据中找出异常数据还真不知道该怎么弄，也不知道该怎么控[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)