如何在JavaScript中以标准简洁的方式获取html元素？

嘿，你找对思路了！其实DOM标准API里早就有专门、简洁又直接的方式来获取<html>元素——document.documentElement。

为什么这是最优解？ #

• 它是document对象的只读标准属性，语义非常清晰，一看就知道是在获取文档的根元素（也就是<html>标签对应的DOM节点），完全不需要依赖其他元素或者做额外的取值操作。
• 对比你之前用的方法：
  • document.body.parentNode虽然能拿到<html>，但它依赖<body>元素的存在，如果在<head>标签里提前执行这段代码（此时body还没加载），可能会得到null或者不符合预期的结果，而且语义上不够直观。
  • document.getElementsByTagName("html")返回的是一个HTMLCollection类数组对象，你必须通过[0]才能拿到实际的<html>元素，这种方式更适合批量获取同类型标签，用来拿唯一的根元素有点“杀鸡用牛刀”了。

代码示例 #

// 直接获取<html>元素
const htmlRoot = document.documentElement;
// 可以直接操作这个元素，比如修改样式
htmlRoot.style.backgroundColor = "#f0f0f0";

内容的提问来源于stack exchange，提问作者pj-yn9aq