DOM操作小案例

表格的全选不选和反选

    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>
                    <input type="checkbox">全选
                </th>
                <th>昵称</th>
                <th>加入时间</th>
                <th>签名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>贤心</td>
                <td>2016-11-29</td>
                <td>人生就像是一场修行</td>
                <td>
                    <button type="button" class="layui-btn">删除</button>
                    <button type="button" class="layui-btn">修改</button>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>许闲心</td>
                <td>2016-11-28</td>
                <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                <td>
                    <button type="button" class="layui-btn">删除</button>
                    <button type="button" class="layui-btn">修改</button>
                </td>
            </tr>
        </tbody>
    </table>
    <button type="button" class="layui-btn allSelectBtn">全选</button>
    <button type="button" class="layui-btn inverseSelectBtn">反选</button>
    <button type="button" class="layui-btn notSelectBtn">不选</button>

方法一

        let tInput = document.querySelectorAll("tbody input");
        // 点击全选，实现表格全选
        document.querySelector(".allSelectBtn").onclick = function(){
            tInput.forEach(item=>{
                item.checked = true;
            });
        }
        // 不选
        document.querySelector(".notSelectBtn").onclick = function(){
            tInput.forEach(item=>{
                item.checked = false;
            });
        }
        // 反选
        document.querySelector(".inverseSelectBtn").onclick = function(){
            tInput.forEach(item=>{
                item.checked = !item.checked;
            });
        } 

方法二

        let tInput = document.querySelectorAll("tbody input");
        // 全选
        document.querySelector(".allSelectBtn").onclick = fn;
        // 不选
        document.querySelector(".notSelectBtn").onclick = fn;
        // 反选
        document.querySelector(".inverseSelectBtn").onclick = fn;

        // 怎么判断点击的是那个按钮？
        function fn(){
            console.log(this);
            let checked = true;									//默认全选
            if(this.classList.contains("notSelectBtn")){		//不选
                checked = false;
            }
            if(this.classList.contains("inverseSelectBtn")){	//反选
                tInput.forEach(item=>{
                    item.checked = !item.checked;
                });
            }else{
                tInput.forEach(item=>{
                    item.checked = checked;
                });
         } 

方法三

		let tInput = document.querySelectorAll("tbody input");
		// 全选
        document.querySelector(".allSelectBtn").onclick = fn;
        // 不选
        document.querySelector(".notSelectBtn").onclick = fn;
        // 反选
        document.querySelector(".inverseSelectBtn").onclick = fn;

        // 怎么判断点击的是那个按钮？
        function fn(){
            console.log(this);
            let checked = true;										//默认全选
            if(this.classList.contains("notSelectBtn")){			//不选
                checked = false;
            }
		 	let flag = 0;
            if(this.classList.contains("inverseSelectBtn")){		//反选
                flag = 1;
            }
            tInput.forEach(item=>{
                item.checked = flag == 1? !item.checked: checked;
            });
        }

表格的删除与添加

			// 点击删除，删除当前行
        	let allDeleteBtn = document.querySelectorAll(".delete-btn");
        	allDeleteBtn.forEach(el=>{
            	el.onclick = function(){
                	console.log(this);
                	this.parentElement.parentElement.remove();  //第一个parentElement为td，第二个parentElement为tr
                	// el.parentElement.parentElement.remove();
            	}
        	})
        	// 添加：点击添加，就往表格里面添加数据
       		 /* 
            	就往表格里面添加数据:(1)获取用户输入的内容（2）往表格里面添加
        	*/
        	document.querySelector('.addBtn').onclick = function(){
            // (1)获取用户输入的内容
            let nickName = document.querySelector('input[name="nickinput"]').value;
            let dateValue = document.querySelector('input[type="date"]').value;
            let signValue = document.querySelector('input[name="signinput"]').value;
            // （2）往表格里面添加
            document.querySelector('tbody').innerHTML += `
            <tr>
                <td>
                    <input type="checkbox">
                </td>
                <td>${nickName}</td>
                <td>${dateValue}</td>
                <td>${signValue}</td>
                <td>
                    <button type="button" class="layui-btn delete-btn">删除</button>
                    <button type="button" class="layui-btn">修改</button>
                </td>
            </tr>
            `;

            let allDeleteBtn = document.querySelectorAll(".delete-btn");
            allDeleteBtn.forEach(el=>{
                el.onclick = function(){
                    console.log(this);
                    this.parentElement.parentElement.remove();     
                    // el.parentElement.parentElement.remove();
                }
            })
        }

表单的修改弹窗

<body>
    <!-- 修改弹窗 -->
    <div class="updateBox">
        <div class="update">
            昵称：<input type="text">
            <br>
            加入时间：<input type="date">
            <br>
            签名：<input type="text">
            <br>
            <button type="button" class="layui-btn confirmBtn">确认</button>
            <button type="button" class="layui-btn cancelBtn">取消</button>
        </div>
    </div>
</body>

        // 点击更改，让弹窗显示
        let tbody = document.querySelector('tbody');
        let updateBox = document.querySelector('.updateBox');
        tbody.onclick = function(){
            // updateBox.style.display = 'flex';
            // 怎么判断点击的是更改按钮呢？
            console.dir(event.target);
            if(event.target.innerText == "修改"){//如果是更改按钮
                updateBox.style.display = 'flex';
            }
        }
        // 点击确认隐藏弹窗
        let confirmBtn = document.querySelector('.confirmBtn');
        confirmBtn.onclick = function(){
            updateBox.style.display = 'none';
        }
        // 点击取消隐藏弹窗
        let cancelBtn = document.querySelector('.cancelBtn');
        cancelBtn.onclick = function(){
            updateBox.style.display = 'none';
        }
        let update = document.querySelector('.update');
        update.onclick = function(){
            event.stopPropagation();
        }
        updateBox.onclick = function(){
            updateBox.style.display = 'none';
        }

表单联动

        let data = [{
            id: 101,
            province: "四川省",
            citys: [{
                id: 1011,
                city: "成都"
            }, {
                id: 1012,
                city: "绵阳"
            }, {
                id: 1013,
                city: "宜宾"
            }, {
                id: 1014,
                city: "乐山"
            }]
        }, {
            id: 102,
            province: "贵州省",
            citys: [{
                id: 1021,
                city: "贵阳"
            }, {
                id: 1022,
                city: "六盘水"
            }, {
                id: 1023,
                city: "黔南"
            }]
        }, {
            id: 103,
            province: "云南省",
            citys: [{
                id: 1031,
                city: "昆明"
            }, {
                id: 1032,
                city: "大理"
            }, {
                id: 1033,
                city: "丽江"
            }]
        }];
        /* 
            1.让所有的省份先显示
            2.选择了不同的省份，那么就应该显示对应的市

        */
        let provinceSelect = document.querySelector('#province');
        let citySelect = document.querySelector('#city');
        let adressMap = new Map();
        // adressMap.set({},"对象");
        // console.log(adressMap);
        let str = provinceSelect.innerHTML;
        data.forEach(item => {
            str += `<option value="${item.id}">${item.province}</option>`;
            adressMap.set(item.id,item.citys);
        })
        console.log(str);
        console.log(adressMap);
        provinceSelect.innerHTML = str;


        // 怎么拿到用户选择的省？
        provinceSelect.onchange = function () {
            //console.log(provinceSelect.value);
            // 怎么拿到这个省对应的市？
            data.forEach(item => {
                if (item.id == provinceSelect.value) {//找到了市
                    let str = "";
                    item.citys.forEach(c => {
                        str += `<option value="${c.id}">${c.city}</option>`;
                    })
                    citySelect.innerHTML = str;
                }
            }) 
            console.log(adressMap.get(provinceSelect.value*1));
            // console.log(provinceSelect.value === 102);//false
        }

瀑布流

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .shopBox{
            width: 1240px;
            background-color: pink;
            margin: 0 auto;
            position: relative;
        }
        .shop{
            width: 240px;
            /* height: 300px; */
            background-color: #ccc;
            margin-bottom: 10px;
            position: absolute;
        }
    </style>
    <body>
    	<div class="shopBox">
        	<!-- <div class="shop">商品1</div>
       		<div class="shop">商品2</div>
        	<div class="shop">商品3</div>
        	<div class="shop">商品4</div>
        	<div class="shop">商品5</div>
        	<div class="shop">商品6</div>
        	<div class="shop">商品7</div>
        	<div class="shop">商品...</div> -->
    	</div>
    </body>

        let result = {
            state: 1,
            data: [
                {name:'商品1'},
                {name:'商品2'},
                {name:'商品3'},
                {name:'商品4'},
                {name:'商品5'},
                {name:'商品6'},
                {name:'商品7'},
                {name:'商品8'},
                {name:'商品9'},
                {name:'商品10'},
                {name:'商品11'},
                {name:'商品12'},
                {name:'商品13'},
                {name:'商品14'},
                {name:'商品15'},
                {name:'商品16'},
                {name:'商品17'},
                {name:'商品18'},
                {name:'商品19'},
                {name:'商品20'},
                {name:'商品21'},
            ]
        }
        let shopBox = document.querySelector('.shopBox');
        result.data.forEach((item,index)=>{
            // 获取当前商品的偏移量
            let left = (240+10)*(index%5);
            let top  = 0;
            if(index>4){
                // 怎么获取上一排对应商品的高度？
                let allShop = document.querySelectorAll('.shop');
                //console.log(allShop);
                //console.log(allShop[index-5].offsetHeight);		//标签本身高度+边框线+上下内边距
                top = allShop[index-5].offsetHeight+allShop[index-5].offsetTop+10;
            }		//（前一行标签本身高度+边框线+上下内边距）+相对有定位属性的祖先节点（即shopBox）的上偏移量+10px间距
            		// 产生一个随机数高度260-320   [0,1) => [0,1)*60 => [0,60)+260 => [260,320)
            let sheight = Math.round(Math.random()*(320-260)+260);			//得到随机高度
            shopBox.innerHTML += `<div class="shop" style="height: ${sheight}px;left: ${left}px;top: ${top}px;">${item.name}</div>`;
        });

放大镜

<head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
        }
        .smallBox{
            position: relative;
            width: 350px;
            height: 350px;
        }
        .smallBox img{
            width: 350px;
            height: 350px;
        }
        .glass{
            /* 
                glassW?      bigBoxW
                smallImgW    bigImgW
            */
            width: 236px;
            height: 236px;
            background-color: rgba(217,212,51, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            display: none;
            /* 可以解决用offsetX、offsetY获取偏移量抖动问题 */
            pointer-events: none;
        }
        .bigBox{
            width: 540px;
            height: 540px;
            overflow: hidden;
            display: none;
            position: absolute;
            top: 0;
            left: 356px;
        }
        .bigBox img{
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="smallBox">
            <img src="./img/smallImg.jpg" alt="">
            <div class="glass"></div>
        </div>
        <div class="bigBox">
            <img src="./img/bigImg.jpg" alt="">
        </div>
    </div>
</body>

		let smallBox = document.querySelector('.smallBox');
		let smallImg = document.querySelector('.smallBox img');
		let glass = document.querySelector('.smallBox glass');
		let bigBox = document.querySelector('.bigBox');
		let bigImg = document.querySelector('.bigBox img');

		//1.鼠标移入小图显示glass和大盒子(bigBox)
		smallBox.onmouseover = function(){
			glass.style.display = 'block';
			bigBox.style.display = 'block';
		}


		 //2.鼠标移出小图隐藏glass和大盒子(bigBox)
		smallBox.onmouseout = function(){
			glass.style.display = 'none';
			bigBox.style.display = 'none';
		}


		//3.鼠标移动，glass跟着移动
		 
            //(1)获取鼠标的位置
            //(2)让glass跟着移动
		smallBox.onmousemove = function(){
			let mouseX = event.clientX;
			let mouseY = event.clientY;
			//console.log(mouseX,mouseY)
			let glassInfo = glass.getBoundingClientRect();
			let smallImgInfo = smallImg.getBoundingClientRect();
			let left = mouseX - glassInfo.width/2;
			if(left < 0){
				left = 0;
			}else if(left > smallImgInfo.width - glassInfo.width){
				left = smallImgInfo.width - glassInfo.width;
			}
			let top = mouseY - glassInfo.height/2;
			if(top < 0){
				top = 0;
			}else if(top > smallImgInfo.height - glassInfo.height){
				top = smallImgInfo.height - glassInfo.height
			}
			glass.style.left = left + 'px';
			glass.style.top = top + 'px';


			//4.glass移动（鼠标在小图片里面移动），大图跟着移动
			let bigImgInfo = bigImg.getBoundingClientRect();
			bigImg.style.marginLeft = -(left*bigImgInfo.width/smallImgInfo.width) + 'px';
			bigImg.style.marginTop = -(top*bigImgInfo.height/smallImgInfo.height) + 'px';
		}