获取DOM对象有5种方式:
1.document.getElementById('id');//返回结果是一个对象,如果存在两个标签拥有相同id,则返回第一个标签对象。
2.document.getElementsByTagName('标签名');//返回结果是一个对象集合,以数组形式放在一起
3.document.getElementsByName('标签name属性的值');//返回结果是一个对象集合,以数组形式放在一起
4.document.getElementsByClassName('类名');返回一个对象集合,以数组形式放在一起。
5.通过this参数给函数传递受监控对象给函数。
1.document.getElementById();
<!DOCTYPE html>
<html>
<head>
<style>
#myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div id="myBtn" οnclick="get()" name="a">aaaaaaaaaa</div>
<div id="myBtn" οnclick="get()" name="a">bbbbbbbbb</div>
<div id="myBtn" οnclick="get()" name="a">cccccccc</div>
<div id="myBtn" οnclick="get()" name="a">ddddddddddd</div>
<script>
function get(){
//document.getElementById('myBtn') 通过id号获取对象
var x=document.getElementById('myBtn');//返回一个对象,多个相同id,选择第一个
alert(x.innerHTML);
}
</script>
</body>
</html>
2.document.getElementsTagName('标签名');
<!DOCTYPE html>
<html>
<head>
<style>
#myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div id="myBtn" οnclick="get()" name="a">aaaaaaaaaa</div>
<div id="myBtn" οnclick="get()" name="a">bbbbbbbbb</div>
<div id="myBtn" οnclick="get()" name="a">cccccccc</div>
<div id="myBtn" οnclick="get()" name="a">ddddddddddd</div>
<script>
function get(){
//document.getElementsByTagName('myBtn') 通过标签名获取
var x=document.getElementsByTagName('div');//返回一个对象集合,以数组形式放在一起
alert(x[0].innerHTML);
alert(x[1].innerHTML);
alert(x[2].innerHTML);
alert(x[3].innerHTML);
}
</script>
</body>
</html>
3.document。getElementsName('name属性的值');
<!DOCTYPE html>
<html>
<head>
<style>
#myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div id="myBtn" οnclick="get()" name="a">aaaaaaaaaa</div>
<div id="myBtn" οnclick="get()" name="a">bbbbbbbbb</div>
<div id="myBtn" οnclick="get()" name="a">cccccccc</div>
<div id="myBtn" οnclick="get()" name="a">ddddddddddd</div>
<script>
function get(){
//document.getElementsByTagName('myBtn') 通过name属性的是获取
var x=document.getElementsByName('a');//返回一个对象集合,以数组形式放在一起
alert(x[0].innerHTML);
alert(x[1].innerHTML);
alert(x[2].innerHTML);
alert(x[3].innerHTML);
}
</script>
</body>
</html>
4.document.getElementsByClassName('类名');
<!DOCTYPE html>
<html>
<head>
<style>
.myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div class="myBtn" οnclick="get()" name="a">aaaaaaaaaa</div>
<div class="myBtn" οnclick="get()" name="a">bbbbbbbbb</div>
<div class="myBtn" οnclick="get()" name="a">cccccccc</div>
<div class="myBtn" οnclick="get()" name="a">ddddddddddd</div>
<script>
function get(){
//document.getElementsByTagName('myBtn') 通过name属性的是获取
var x=document.getElementsByClassName('myBtn');//返回一个对象集合,以数组形式放在一起
alert(x[0].innerHTML);
alert(x[1].innerHTML);
alert(x[2].innerHTML);
alert(x[3].innerHTML);
}
</script>
</body>
</html>
5.通过this参数给函数传递受监控对象给函数。
<!DOCTYPE html>
<html>
<head>
<style>
.myBtn{height: 100px;width: 100px;background:#eeeeee;border: 1px,solid black;}
</style>
</head>
<body>
<div class="myBtn" οnclick="get(this)" name="a">aaaaaaaaaa</div>
<div class="myBtn" οnclick="get(this)" name="a">bbbbbbbbb</div>
<div class="myBtn" οnclick="get(this)" name="a">cccccccc</div>
<div class="myBtn" οnclick="get(this)" name="a">ddddddddddd</div>
<script>
function get(s){
alert(s.innerHTML);
}
</script>
</body>
</html>