javascript 获取HTML DOM对象五种方式
获取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" onclick="get()" name="a">aaaaaaaaaa</div> <div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div> <div id="myBtn" onclick="get()" name="a">cccccccc</div> <div id="myBtn" onclick="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" onclick="get()" name="a">aaaaaaaaaa</div> <div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div> <div id="myBtn" onclick="get()" name="a">cccccccc</div> <div id="myBtn" onclick="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" onclick="get()" name="a">aaaaaaaaaa</div> <div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div> <div id="myBtn" onclick="get()" name="a">cccccccc</div> <div id="myBtn" onclick="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" onclick="get()" name="a">aaaaaaaaaa</div> <div class="myBtn" onclick="get()" name="a">bbbbbbbbb</div> <div class="myBtn" onclick="get()" name="a">cccccccc</div> <div class="myBtn" onclick="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" onclick="get(this)" name="a">aaaaaaaaaa</div> <div class="myBtn" onclick="get(this)" name="a">bbbbbbbbb</div> <div class="myBtn" onclick="get(this)" name="a">cccccccc</div> <div class="myBtn" onclick="get(this)" name="a">ddddddddddd</div> <script> function get(s){ alert(s.innerHTML); } </script> </body> </html>
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" onclick="get()" name="a">aaaaaaaaaa</div> <div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div> <div id="myBtn" onclick="get()" name="a">cccccccc</div> <div id="myBtn" onclick="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" onclick="get()" name="a">aaaaaaaaaa</div> <div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div> <div id="myBtn" onclick="get()" name="a">cccccccc</div> <div id="myBtn" onclick="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" onclick="get()" name="a">aaaaaaaaaa</div> <div id="myBtn" onclick="get()" name="a">bbbbbbbbb</div> <div id="myBtn" onclick="get()" name="a">cccccccc</div> <div id="myBtn" onclick="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" onclick="get()" name="a">aaaaaaaaaa</div> <div class="myBtn" onclick="get()" name="a">bbbbbbbbb</div> <div class="myBtn" onclick="get()" name="a">cccccccc</div> <div class="myBtn" onclick="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" onclick="get(this)" name="a">aaaaaaaaaa</div> <div class="myBtn" onclick="get(this)" name="a">bbbbbbbbb</div> <div class="myBtn" onclick="get(this)" name="a">cccccccc</div> <div class="myBtn" onclick="get(this)" name="a">ddddddddddd</div> <script> function get(s){ alert(s.innerHTML); } </script> </body> </html>
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
