JS 基础 05：DOM操作 innerHTML、操纵DOM树的常见函数、事件对象

1. innerHTML 不仅能设置标签内容,还能设置标签

<button type="button">按钮</button>
<ul>
			
</ul>

//1. innerHTML 不仅能设置标签内容,还能设置标签
//实现功能:点击按钮,弹出一个列表
	let btn = document.querySelector("button")
	let ul = document.querySelector("ul")
			
	btn.onclick = function(){
	ul.innerHTML=`
	<li>苹果</li>
	<li>香蕉</li>
	<li>橘子</li>`
	}

2.操纵DOM树的常见函数

//   创建元素结点 createElement
//   创建文本结点 createTextNode
//   添加结点到DOM树 appendChild
//   删除结点从DOM树 removeChild

案例1：点击按钮一次,创建一个li列表;点击一个列表,将其删除

<input />
<button type="button">按钮</button>
<ul class="my-list">
	<li>aaa</li>
	<li>bbb</li>
	<li>ccc</li>
</ul>

//实现功能:点击按钮一次,创建一个li列表;点击一个列表,将其删除
	let btn = document.querySelector("button")
	let ul = document.querySelector("ul")
	let inp = document.querySelector("input")
	let list = document.querySelectorAll(".my-list li")
			
	btn.onclick = function(){
		let li = document.createElement("li")
                // console.log(inp.value);	//value 属性获取输入值
		let txt = document.createTextNode(inp.value)
	
		ul.appendChild(li)
		li.appendChild(txt)
		}
			
	for(let i in list){		//遍历的是已有的元素,不能删除后来新建的元素
		list[i].onclick = function(){
			//元素的父节点来删除this
			ul.removeChild(this)
		}
	}

3.事件对象 JS规定事件响应函数的形参为事件对象，一般取名为 e或event

    let box = document.querySelector(".box")
    box.onclick = function(e){     //不管叫 e 还是event，都表示事件对象
    console.log(e.clientX+","+e.clientY);
    console.log(e);
    }

案例2： 完成图片放大镜功能

.img-list img{
		width: 10rem;
		height: 8em;
				
	}
	.big-img img{
		width: 20rem;
		height: 16rem;
				
	}
	.big-img{
		position: absolute;
	}

    <div class="img-list">
        <img src="img/1.jpg" >
        <img src="img/2.png" >
        <img src="img/3.png" >
    </div>
<div class="big-img">
			
</div>

//使用事件对象,完成图片放大镜功能
	let imgList = document.querySelectorAll(".img-list img")
	let bigImg = document.querySelector(".big-img")
	let picList = document.querySelector(".img-list") //获取整个图片div
	for (let i in imgList) {
                //鼠标移入时，实现放大
		imgList[i].onmouseenter = function(){
			bigImg.innerHTML = `<img src="${this.src}"></img>`
		}
                //鼠标移出时，取消放大
		imgList[i].onmouseleave = function(){
			bigImg.innerHTML = ``
				}
	}
        //鼠标移动时，大图跟随移动
	picList.onmousemove = function(e){
		let X = e.clientX
		let Y = e.clientY
		bigImg.style.top = Y+10+"px"
		bigImg.style.left = X+10+"px"
		}