DOM基础测试37 - Dialog元素

[JaimeCheng]

题目：

原issue

回答：

// 我的回答 8分
// 1
const dialog = document.createElement('dialog')
document.body.append(dialog)

// 2
dialog.open = 'open'

// 3
const btn = document.createElement('button')
btn.innerText = 'Close'
dialog.append(btn)
btn.onclick = function () {
  dialog.close()
}

// 4
dialog.showModal()

// 5 没有头绪

满分回答 | 优秀回答 | 绝妙回答

总结：

1. h5新元素不了解，查文档才答的题；
2. 最后一题demo里没有写；

> 在线demo <

[JaimeCheng]

本期要点：

1. createElement的时候，里面的标签名称是不区分大小写的。appendChild这里也可以使用append这个API，新API，IE不支持，如果是HTML字符串，会自动转义为安全的纯本文。
2. 如果直接.open，则根据值是否 == true/false判断是否弹框显示；如果是setAttribute方法，则任意字符串和值。
3. 关闭使用.close()方法。
4. dialog.showModal()自带本透明蒙层。如果我们想要修改透明度，可以使用::backdrop伪元素进行设置。
5. showModal 时后弹框层级就是最高，其他元素设置再高的z-index值都无效。但是show()显示的就不一样了，我们需要动态计算处理，原理：遍历所有dialog再把最大的zindex加1。ziven27 的:focus-within值得关注下。