js父元素获取子元素img_Js系列小结（二）

7、异步和单线程

1、异步和同步的区别是什么？

异步不会阻塞代码的执行

同步会阻塞代码的执行

 //异步
 console.log(100)
 setTimeout(()=>{
    
   console.log(200)
 },1000)
 console.log(300)
 ​
 //先打印100 和300 1秒之后在打印200
 ​
 //同步
 console.log(100)
 alert(200)
 console.log(300)
 //先打印100，点击确认之后在打印300

2、手写Promise加载一张图片

 //用promise的方式加载图片
 ​
 function loadImage(src,prev){
    
   console.log('我是上一个'+prev)
 ​
   return new Promise((resolve,reject)=>{
    
     let img = document.createElement('img')
     img.src = src
     document.body.appendChild(img)
     img.onload = function () {
    
       resolve(img)
     }
     img.onerror = function() {
    
       const err = new  Error('图片加载失败'+src)
       reject(err)
     }
   })
 }
 ​
 var p = loadImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592141012940&di=9c0e87d2c015a45da9022dc42bb0a65e&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg')
 p.then((res)=>{
    
   let img = res
   let width = img.width
   let src = img.src
   return loadImage('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592141012940&di=89c7c5e429c3ab15e5315d4736ce15b7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F56%2F12%2F01300000164151121576126282411.jpg',src)
 })
   .then((res)=>{
    
   let src = res.src
   console.log(src)
 })
   .catch((err)=>{
    
   console.log(err)
 })

3、前端使用异步的场景有哪些？

1、网络请求，如ajax图片加载

2、定时任务，如setTimeout

8、JS WEB API

1、DOM

• DOM是那种数据结构？
  从html标记语言解析成的一棵树
• DOM操作的常用API
  新增/插入节点
  获取子元素列表，获取父元素
  删除子元素
• attr和property的区别？
  property：修改对象属性，不会体现到html结构中
  attribute：修改html属性，会改变html结构
  两者都有可能引起dom重新渲染
• 一次性插入多个DOM节点，考虑性能

 //dom查询做缓存
 ​
 for(l