如何最可靠地/简单地通过javascript访问<html>元素？
用例:我希望将类动态地添加到文档中的<html>元素中，这样，如果在包括body类的选择器中应用了一些当前正在使用.class-name &的SASS混频器，那么它就会正常工作--否则，除非在比<body>更高的级别上应用class-name，否则.class-name .body-class .rest-of-selector就无法工作。
以前我使用过document.body.classList.add，它看起来整洁、简单、健壮。
在将类转换为向<html>元素添加类时，我想知道等效的代码是什么：
document.html--不，似乎没有document.rootElement--我认为应该工作，但是当我测试的时候，null还不够健壮吗？！document.getElementsByTagName('html')[0]--相当笨重，但肯定有效/健壮？document.body.parentElement--看起来更干净，应该可靠吗？这有那么直接吗？- 正如下面Louys所建议的，
document.querySelector('html')--感觉我们不需要去查询它了吗？ - 还有其他我没想过的选择吗？
回答 1
Stack Overflow用户
发布于 2021-04-22 02:22:15
正如@thibsc和@LouysPatrice贝塞特上文所述，在document.querySelector("html")和document.documentElement中有两个很好的选择。
document.querySelector("html")
document.querySelector()是一个重要的功能，在一般情况下，除了document.querySelectorAll()。它以文档顺序返回第一个匹配元素，对于`document.querySelectorAll(" html ")，该元素将是根html对象。
document.documentElement
documentElement对象的document属性(可以认为它是HTMLDocument对象的别名)总是引用根元素，在(可以认为它是HTMLDocument对象的别名)中，根元素通常是<html>标记。
速度
在我的超科学速度测试中，document.documentElement今天看起来更快了：
let date = Date.now();
for (var i=0; i<123456; i++) {
a = document.querySelector("html");
a.classList.toggle("hello");
a = null;
}
console.log(Date.now() - date);
//result: 254
let a;
let date = Date.now();
for (var i=0; i<123456; i++) {
a = document.documentElement;
a.classList.toggle("hello");
a = null;
}
console.log(Date.now() - date);
//result: 225最后，您的问题是什么“感觉”好--但这些是访问<html>元素的最佳方法。你对其他选择的看法是正确的：
document.html--不存在document.rootElement--不受欢迎document.getElementsByTagName('html')[0]-- 笨重但健壮document.body.parentElement-- 也很健壮
但也许你想要的是：
const $ = document.querySelector.bind(document);
$("html").classList.add("myClass");https://stackoverflow.com/questions/67205363
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号