dom 操作总结即获取图片的样式和宽高 监听滚动事件

<div className="smallItemContent">
    <div className="wrapImage"><img src={image05} alt=""/></div>
    <div className="wrapBottom">
        <div className="worker">火山将作品</div>
        <div className="readAndLove">9&nbsp;2</div>
        <div className="author">
            <img src="" alt=""/>
            <div>天狼 </div> <div>字体设计</span>
        </div>
    </div>
</div>

将上边的代码转换成dom操作的代码就是下边的操作


let smallItemContent = document.createElement("div")
let wrapImage = document.createElement("div")
let wrapBottom = document.createElement("div")
let worker = document.createElement("div")
let readAndLove = document.createElement("div")
let author = document.createElement("div")
let $div1 = document.createElement("div")
let $div2 = document.createElement("div")
let bigimg = document.createElement("img")
let userimg = document.createElement("img")
smallItemContent.setAttribute("class","smallItemContent")
wrapImage.setAttribute("class","wrapImage")
wrapBottom.setAttribute("class","wrapBottom")
worker.setAttribute("class","worker")
readAndLove.setAttribute("class","readAndLove")
author.setAttribute("class","author")

bigimg.setAttribute("src",imgList[imgId])
wrapImage.appendChild(bigimg)
smallItemContent.appendChild(wrapImage)
worker.append("火山将作品")
wrapBottom.appendChild(worker)
readAndLove.append("9&nbsp;2")
wrapBottom.appendChild(readAndLove)
userimg.setAttribute("src",imgList[imgId])
author.appendChild(userimg)
$div1.append("天狼")
author.appendChild($div1)
$div2.append("字体设计")
author.appendChild($div2)
wrapBottom.appendChild(author)
smallItemContent.appendChild(wrapBottom)

window.onload = function () {
   var box = document.getElementsByClassName("leftItemContent")[0].children
   // 这里要说的是操作完一个dom后还是可以继续操作dom的
   for(var i=0; i<box.length;i++){
      let imgNodeStyle =window.getComputedStyle(box[i].
           getElementsByClassName("wrapImage")[0].children[0])
      console.log(imgNodeStyle.height)
      console.log(box[i].getElementsByClassName("wrapImage")[0].children[0].width);
      console.log(box[i].getElementsByClassName("wrapImage")[0].children[0].height);
   }
}

 监听滚动事件

document.addEventListener("scroll",function(){
    console.log(1)
}

或者是这种形式的
 box.addEventListener("scroll",(e)=>{
  console.log("e",e)
})

 除了用document.getElementsByClassName等方法外还有一个

删除一个节点 虽然输出e这里边没有发现currentTarget为null但是当打印e.currentTarget时确实是一个节点