h5练习笔记

1、querySelector()方法：获取文档中id=“demo"的元素；
document.querySelector(”#demo")；
此方法返回文档中匹配指定css选择器中的一个元素；
2、parentNode：直接父级
来个例子：

点击删除相应的一条，就是将其隐藏掉：

var nodes = document.querySelectorAll(".list>li>a");
for (let i = 0 ; i < nodes.length ; i++) {
nodes[i].onclick = function () {
this.parentNode.style.display = "none"；
}
}

3、兼容性问题：js

• ev||event
• 鼠标滚轮 火狐
• 事件绑定
• offsetParent
  a、父级是否有定位（4种）
  b、本身是否有定位（4种）
  c、浏览器不一样（5大pc浏览器）
  针对offsetParent总结下：
  ie7以上的浏览器和火狐：

ie7一下的浏览器：

offsetLeft&offsetTop：每个元素都有
注意：让body为100%
总结：

二、绝对位置和相对位置

注意：绝对位置是相对于body相对位置是相对与视口的
left、top算border和margin
绝对位置等于相对位置加上滚动条的高度
getBoundingClientRect（）一个元素4个角的相对位置，兼容性很高；
三、clientWidth和clientHeight
clientWidth: 可视区域（跟标签就是视口的大小）
offsetWidth : 可视区域+border
边框里面拖动：client-off…
四、一个底下停靠的几个图片的动画效果：

五、兼容性问题
事件绑定：

时间流阶段：捕获 目标处理 冒泡
鼠标滚轮：滚轮事件在火狐里面不支持
onmousewheel()滚轮事件
火狐这样实现：

滚轮方向：