js day9

js当中与滚动相关的属性

<div>haha</div>
<script>
 let box=document.querySelector("div")
 box.addEventListener("scoll",function(e)){
    console.log(window.scrolltop)
}//往上走了
</script>

,box.scrollHeight——获取元素内容的实际高度和宽度，只读

box.clientHeight——获取元素对象可视区域的宽高，包含padding 不包含滚动条，margin

操作节点——查找节点

<div class="father">
  <div class="son1">子盒子</div>
  <div class="son2">子盒子</div>
  <div class="son3">子盒子</div>
  <div class="son4">子盒子</div>
  <div class="son5">子盒子</div>
</div>
//子节点如何获取父节点
<script>
const son3=document.querySelector(".son5")
console.log(son3.parentNode)
//查找子节点
const father=document.querySelector(".father")
console.log(father.children)
//查找兄弟节点
const son3=document.querySelector(".son3")
console.log(son3.nextElementSibling)//下一兄弟节点
console.log(son3.previousElementSibling)//上一兄弟节点

节点的创建和追加

<ul>
  <li>zs</li>
</ul>
<script>
//1.创建节点
//document.createElement("要创建的点")
let newli=document.createElement("li")
newli.innerHTML=`<div class="box1">这是动态节点</div>`
console.log(newli)
//追加节点  父元素.appendChild(子节点)  默认是追加到父元素最后一个子元素之后
ul.appendChild(newli)//将newli加入ul中
//将newli追加
ul.innsertBefore(newli,ul.children[1])
</script>

事件流（捕获或冒泡）

<div class="gf">
  <div class="f">
     <div class="son">
     <div>
  <div>
<div>
<script>
//addEventListener 第三个参数默认是false，表示冒泡
//若为true，表示捕获
const gf=document.querySelector(".gf")
const f=document.querySelector(".f")
const s0n=document.querySelector(".son")
 gf.addEventListener("click",function(){
 console.log("我是你爷爷")}，true)
 f.addEventListener("click",function(){
 console.log("我是你爹")
e.stopPropagation()//阻止元素对象的冒泡或捕获
}，true)
 

</script>

事件的委托

<ul>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
</ul>
<script>
const lis=document.querySelectorAll("li")
lis.forEach(li=>{
li.addEventListener("click",function(){
document.querySelector(".active").classList.remove
li.classist.add(".active")
})
})
</script>

方法二

<ul>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
 <li>我是li</li>
</ul>
<script>
let ul=document.querySelector("ul")
ul.addEventListener("click",function(e){
document.querySelector(".active").classist.remove
e.target.classist.add(".active")
//e.target存放的是触发事件的元素对象
})