为什么 StyleSheet 的 ownerNode 插入后为空？

【问题标题】：Why is StyleSheet's ownerNode null after insertion?为什么 StyleSheet 的 ownerNode 插入后为空？
【发布时间】：2019-03-11 22:20:48
【问题描述】：

在我将textContent 设置为某个东西后，有人可以解释为什么StyleSheet 的ownerNode 是null 吗？

const style = document.createElement('style')
document.head.appendChild(style)
const sheet = style.sheet
// passes
console.assert(sheet.ownerNode !== null, 'ownerNode is null')
sheet.ownerNode.textContent = 'div { color: red }'
// fails
console.assert(sheet.ownerNode !== null, 'ownerNode is null')

【问题讨论】：

有趣的问题！

标签： javascript css cssom

【解决方案1】：

因为通过完全替换节点的文本，您创建了一个新，替换样式表对象：

const style = document.createElement('style')
document.head.appendChild(style)
const sheet = style.sheet
sheet.ownerNode.textContent = 'div { color: red }'
console.log(style.sheet === sheet);           // <===== false!
console.log(style.sheet.ownerNode === style); // <===== true

旧的不在 DOM 中，所以它没有ownerNode。

【讨论】：