Question

我想修改HTML页面的<html>元素内的脚本中的<head>元素。我不需要访问/修改任何<html>个孩子，只需<html>本身。

在某些情况下，该脚本是否需要等待DOMContentLoaded，或定义document.documentElement 总是？ document.documentElement 总是是<html>元素吗？

例如：

<html>
  <head>
    <script type="text/javascript">
      document.documentElement.style.foo = 'bar';
    </script>
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

Answer 1

这是非常简单的测试：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <script>
      console.log(document.documentElement instanceof HTMLHtmlElement);
      console.log(document.documentElement === document.querySelector('html'));
    </script>
  </head>
  <body></body>
</html>

＆＃13;

但引用the W3C DOM4 specification：

[Constructor,
 Exposed=Window]
interface Document : Node {
  ...
  readonly attribute Element? documentElement;
  ...
};
document的文档元素是element，parent是document（如果存在），否则为null。 / p>

注意：根据node tree限制，只能有一个element。

^{此规范也在the DOM Standard中逐字存在。}

从技术上讲，它可以为空，你可以在这里确认：

＆＃13;

let doc = new Document();
console.log(doc.documentElement);

＆＃13;

但是，对于您的目的，当您使用document所属的<script>时，它永远不会是null情况下。

Answer 2

是的，它始终是定义的。

documentElement属性返回的documentElement document，作为Element对象。对于HTML文档，返回的对象是<html>元素。此属性是只读的。

https://www.w3schools.com/jsref/prop_document_documentelement.asp

如果脚本从document.body标记运行且页面未完全加载，则<head>可以为null，而html文档中始终存在<html>元素。

是否始终定义document.documentElement并始终使用html元素？

2 个答案: