console.log('length----', list.length)

Question

console.log(‘length----’, list.length) 为啥会输出2啊，执行到这里的时候不是还没渲染吗

Answer 1

双越 2022-05-03 18:06:17

把完整代码贴出来吧。

• 提问者 倾城一笑stu #1

  const p = document.createElement('p')
          p.innerHTML = 'new paragraph'
          document.body.appendChild(p)
          const list = document.getElementsByTagName('p')
          console.log('length----', list.length)
  
          console.log('start')
          // 渲染之后
          setTimeout(() => {
              const list = document.getElementsByTagName('p')
              console.log('length on timeout----', list.length) // 2
              alert('阻塞 timeout')
          })
          // 渲染之前
          Promise.resolve().then(() => {
              const list = document.getElementsByTagName('p')
              console.log('length on promise.then----', list.length) // 2
              alert('阻塞 promise')
          })
          console.log('end')

• 双越 回复 提问者 倾城一笑stu #2

  你说的  console.log('length----', list.length) 是在同步代码中的，虽然此时可能还没有显示再页面上，但 JS 已经执行，DOM 结构已经创建了。