DOM操作经典案例

百度换肤案例

百度换肤案例就是当你点击一张图片时，当前的背景图片就为你所点击的这张图片，实现起来也比较简单，就是更改一下backgroundImage的url路径
js代码：

 <script>
        var img=document.querySelectorAll('img');  //获取所有图片元素
        for(var i=0;i<img.length;i++){
            img[i].onclick=function() {   //为每张图片绑定点击事件
                document.body.style.backgroundImage="url("+this.src+")";
                //更改body的背景图片，切记，要加 url 
            }
        }
 </script>

鼠标移进移出变色（行变色）

鼠标经过变色这个是比较常见的，它的原理就是当经过这个元素时，为这个原属添加一个样式(直接style设置也行)，当鼠标离开后就移除这个样式
两个事件：onmouseover onmouseout;
js代码：

<script>
var tr=document.querySelector('tbody').querySelectorAll("tr");  //获取你需要经过改变样式的元素
	var oldColor;  //先准备一个变量，用来接等会临时经过元素原有的颜色
	for(var i=0;i<tr.length;i++){
		tr[i].onmouseover=function(){   //当鼠标经过就执行，
		oldColor=this.style.backgroundColor; //先将原有的背景颜色保存
		this.className += ' bg';  //追加型的样式
	};
		tr[i].onmouseout = function() { //当鼠标离开元素时
			this.classList.remove('bg');   //先移除刚刚追加的样式
			this.style.backgroundColor=oldColor; //在把原有的样式重新给该元素
			oldColor=null;  //释放内存(留着也行)
		}
	}
</script>

表单全选全取消案例

这个案例就是当点击一个全选按钮的时候，这一组的复选框全部选中，或者当这一组复选框全部选中后，全选按钮自动选中
js代码

    <script>
        var selectAll=document.getElementById("j_cbAll"); //获取全选按钮
        var btns=document.querySelectorAll("#j_tb input"); //获取那一组复选框
        selectAll.onclick=function() {  //给全选按钮添加事件
            for(var i=0;i<btns.length;i++){ //当全选按钮被点击后，
                btns[i].checked=this.checked;   //那一组复选框的状态需要和全选按钮的状态一致
            }
        };
        for(var i=0;i<btns.length;i++){  //给每个复选框添加点击验证当前组是否全部勾选
            btns[i].onclick=function() {
                var flag=true;   //这个变量用来决定全选按钮是否要被勾上
                for(var j=0;j<btns.length;j++){
                    if(!btns[j].checked){   //如果发现有一个未选中，
                        flag=false;    //那么flag就为false，全选按钮就不要勾上
                        break;   // 此次循环可以直接退出
                    }
                }
                selectAll.checked=flag;  //更据上方的判定，来决定是否要勾起
            }
     }
    </script>

tag导航栏切换案例

这个案例算是为非常经典的，而且非常常用的一个功能，点击相应的模块，显示相应的模块内容
js代码

<script>
        var li = document.querySelectorAll('li'); //我是用li元素来当相应的导航栏，所以先获取这些li
        var div = document.getElementsByClassName("item");  //首先所有的模块内容都是隐藏起来的，display值为none，我将它放在一个样式表里，方便以后的优化
        for(var i=0;i<li.length;i++){
            li[i].setAttribute('index',i);  //先给每个导航模块添加一个自定义属性，值为i，方便下面操作
            li[i].onclick=function() {
                for(var i=0;i<li.length;i++){
                    li[i].className='';  //首先将所有的导航模块的样式清空，一会再加，也可以使用移除指定样式，
                }
                this.className='current';  //给你点击的导航模块添加样式
                for(var j=0;j<div.length;j++){  //接下来就是显示相对应的模块内容了
                    div[j].removeAttribute('style'); //由于我是临时设置元素的display的，所以在style里，我先将这个属性移除，也可以直接div[j].style.display='none';
                }
                div[this.getAttribute('index')].style.display='block'; //设置元素的display为显示
            }
        }
    </script>

京东详情页放大镜案例

这是一个将鼠标移动到商品图上，然后再右边放大它的局部图片，让用户看的更仔细
代码：

    <div class="preview_img">
        <img src="s3.png" alt="">
        <div class="mask"></div>
        <div class="big">
            <img src="big.jpg" alt="" class="bigImg">
        </div>
    </div>

    <script>
        window.addEventListener('load', function() {
            var preview_img = document.querySelector('.preview_img');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');

            preview_img.addEventListener('mouseover', fn1);   //添加鼠标再图片上
            function fn1(e) {
                mask.style.display = big.style.display = 'block';    //再图片上将预准备的两个盒子展示
            }
            preview_img.addEventListener('mouseout', fn2);   //鼠标离开将临时的盒子隐藏
            function fn2(e) {
                big.style.display = mask.style.display = 'none';
            }
            preview_img.addEventListener('mousemove', fn3);   //添加鼠标再图片上移动的监听事件
            function fn3(e) {
                var x = e.pageX - this.offsetLeft;     // 获取鼠标再盒子里的坐标
                var y = e.pageY - this.offsetTop;
                var maskX = x - mask.offsetWidth/2;    //为鼠标移动设置到半透明盒子的中心做准备
                var maskY = y - mask.offsetHeight/2;  
                var pX=preview_img.offsetWidth-mask.offsetWidth;  //获得半透明的盒子最大移动的距离
                var pY=preview_img.offsetHeight-mask.offsetHeight;
                maskX <= 0 ? maskX = 0 : (maskX >= pX ? maskX = pX : maskX);  //判断鼠标的坐标，防止半透明的盒子跑出边界
                maskY <= 0 ? maskY = 0 : (maskY >= pY ? maskY = pY : maskY);
                mask.style.left = maskX + 'px';   //设置半透明盒子位置
                mask.style.top = maskY + 'px';
			//右边的放大图的设置
                var bigImg=document.querySelector('.bigImg');   //获取图片
                var bigMax=bigImg.offsetWidth-big.offsetWidth;   //获取这张图片最大的移动距离，用图片的宽度减盒子的宽度
 //因为图片的宽度比盒子的宽度大，盒子设置了溢出隐藏，等会按照比例来移动就可以实现它们所对应的放大效果
                var bigX=maskX*bigMax/pX;  //获取比例，大盒子/小盒子的与大图片/小图片的比例相等，所以可以获得大图片所要移动的距离
                var bigY=maskY*bigMax/pY;
                bigImg.style.left=-bigX+'px';  //设置大图片移动的距离
                bigImg.style.top=-bigY+'px';

				//不写下面这个判断会有一个bug，就是如果鼠标移动的太快，瞬间冲小盒子里移动到大盒子里，
				//根据mouseout事件会隐藏掉这两个盒子，但是不会，我也不知道为什么，然后加一个这样的判断，就可以解决了
                if(x>(this.offsetLeft+this.offsetWidth)){
                    big.style.display = mask.style.display = 'none';
                }
            }
        });
    </script>

需要注意不要让半透明盒子跑出边界
还有这里要注意的就是一个移动比例
比例公式：
半透明盒子移动的距离 / 半透明盒子最大能移动的距离 = 大图片需要移动的距离 / 大图片最大能移动的距离