DOM获取元素的四种方法及使用

第一种是：document.getElementById('text')

使用方法如下：

        <div id="text">点击姓名</div>
        <script>
            var tab=document.getElementById('text');
            tab.οnclick=function(){
                alert('你中奖了');
            }
        </script>

第二种方法：

    <button  id="text">点击姓名</button>

    var tab=document.getElementsByTagName('button');
            tab[0].οnclick=function(){//在tab后面加[0],因为button有很多个，必须加数组才能指定到，不管是一个还是两个都需要加
                alert('你中奖了');
            }

第三种方法：

    <button class="text">点击姓名</button>

var tab=document.getElementsByClassName('text');

console.log(tab);

<button id="ldh">刘德华</button>
		<button id="zxy">张学友</button>
	    <img src="./img/上传博客必选其一.jpg" alt="" title="上传博客其一">

 img{
			  width:200px;
			  height:200px;
			  
		  }

<script>
	     //1，获取元素
		 var ldh=document.getElementById('ldh');
		 var zxy=document.getElementById('zxy');
		 var img=document.querySelector('img');
		 zxy.onclick=function(){
			 img.src='img/上传博客必选其二图.jpg';
			 //title的作用是用来隐藏注释
			 img.title='上传博客其二';
		 }
		 ldh.onclick=function(){
		 			 img.src='img/上传博客必选其一.jpg';
		 			 //title的作用是用来隐藏注释
		 			 img.title='上传博客其一';
		 }

 

 第三种方法采用的是案例的形式，结合方法一与方法三一起使用，随着ie浏览器的不断升级，在开发中大多使用第三种方法

第四种方法：是获取特殊元素（例如：HTML与body）

获取body内的元素

var bodyEle=document.body;

console.log( bodyEle);

获取HTML内的元素

var  htmlEle=document.documentElement;

console.log( htmlEle);