js的节点操作和放大镜效果制作以及元素偏移量的属性

js节点node的回顾

一般的属性

1. 接点的增加

   使用的是createElement()，创建元素的节点 一般使用的是

   const el = document.createElement('元素标签')
   

2. 节点添加的位置 一般使用的是append() 还有 insertBefore(‘el’,'位置’)

   el.append('el')     
   

3. 节点的删除 remove() 以及 removeChildren()

   • 一般删除el的是父节点或子节点

   el.remove('el')  ul.removeChildren('li')
   

动态生成表格案例

1. 给了表格的数据数据为[{},{}]数组里是对象的形式

2. 首先是写表头 再更具datas的数组动态的生成 表格中的 tr 使用for循环

3. tr里的td生成时难点

   • 取对象里面的数据 使用for in

     for(let k in datas){
         datas[i][k]  //获取td数据 再创建td元素 赋值 最后插入到tr中
     }
     

   • 再添加td 里面内容是 a标签

   • 再给a标签添加 删除tr的事件 tbody.removeChildren(tr)

放大镜效果的制作

1. 有四个盒子 small 和 mask 以及 big 和bigimg
2. 先按比例计算出 mask的大小 small / mask = big /bigimg
3. 获取鼠标再small的位置 使用的是 e.pageX 和e.pageY
4. 先把鼠标位置放在mask 的中心 e.pageX-small.offsetWidth e.pageY - small.offsetHeight
5. 再获取mask的移动距离maskX 计算 是鼠标的位置e.pageX - mark的大小的一般
6. mask有个最大和最小的移动距离moveMax
7. 当mask的移动距离 <0 时 maskX =
8. 当mask的移动距离 >moveMax 时 maskX = moveMax 这个是重点，难点
   9. 大图片的位移计算 小图片的位移/小图片最大位移 = bigimg位移/ bigimg最大位移
   • 这里的mask和small成比例 big 和bigimg成比例
   10. 还有简单的鼠标移入移出的显示和隐藏 使用的是display

元素偏移量

1. offset 系列
   1. offsetTop和 offsetLeft 这个获取的是离自己最近的带定位的父元素的上偏移 和左偏移
   2. 父元素没有定位的话就是一body为标准
   3. el.offsetWidth 和 el.offsetHeight 在这个属性是包括了 盒子的边框和内边距
2. 元素可视区client系列 获取自身元素的信息
   1. clientTop 获取元素上边框
   2. clientLeft 获取元素左边框
   3. clientWidth 获取的是 内容去的宽度 包含padding 出去边框
   4. clientHight 获取的元素内容的高度 不含边框
3. 元素滚动scroll系列
   1. scrollTop 返回被卷去部分的高度
   2. scrollLeft 放回被卷去左侧的距离