通过document的方法快速获取页面元素以便对其进行如显示标签中的文本等操作
1)getElementById()
document.getElementById()根据元素的Id获得指定对象,元素id(自定义)一般都不会重复,非起重复的id名也只会显示获取第一个有此id的元素
<body>
<div id="dv1">获取dv1</div>
<div id="dv2">获取dv2</div>
<script type="text/javascript">
var d = document.getElementById('dv1');//获取指定的dv1
alert(d.innerHTML);//显示div中的文字
</script>
</body>2)getElementsByName()
document.getElementsByName()根据元素的name获得对象,元素中的name可以重复比如多个RadioButton的name一样,因此getElementsByName返回值是对象数组
<body>
<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女
<script type="text/javascript">
var rds = document.getElementsByName('gender');
for (var i = 0; i < rds.length; i++) {
alert(rds[i].value);
}
</script>
</body>3)getElementsByClassName
document.getElementsByClassName()获取所有指定类名的元素数组
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取页面元素</title>
<style type="text/css">
.c1 {
width: auto;
height: 50px;
border: 1px solid red;
}
.c2 {
width: auto;
height: 50px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="c1">dv1</div>
<div class="c1">dv2</div>
<div class="c2">dv3</div>
<div class="c2">dv4</div>
<script type="text/javascript">
var dvs = document.getElementsByClassName('c1');//获取指定类名的元素
for (var i = 0; i < dvs.length; i++) {
alert(dvs[i].innerHTML);//显示div标签中的文字
}
</script>
</body>4)getElementsByTagName()
document.getElementsByTagName()获得指定标签的元素数组
<body>
<div id="dv1">dv1</div>
<div id="dv2">dv2</div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<script type="text/javascript">
var ps = document.getElementsByTagName('p');//获取指定的p标签
for (var i = 0; i < ps.length; i++) {
alert(ps[i].innerHTML);//显示p标签中的文字
}
</script>
</body>注意:如果脚本书写在head标签中时,需要将获取元素的代码放在window.onload事件中
