时间戳

首页 > 解决方案 > 如何通过javascript最可靠/最简单地访问元素？

javascript - 如何通过javascript最可靠/最简单地访问元素？

问题描述

用例：我想动态地将类添加到<html>我的文档中的元素，以便如果在包含正文类的选择器中应用当前使用的一些 SASS 混合.class-name &将起作用——否则我会得到.class-name .body-class .rest-of-selector它不起作用，除非class-name是应用在高于<body>

以前我用过document.body.classList.add它看起来整洁、简单和健壮。

在过渡到向<html>元素添加类时，我想知道等效代码是什么：

标签： javascripthtmlcssdom

解决方案

正如上面的@thibsc 和@LouysPatriceBessette 所说，在document.querySelector("html")和中有两个很好的选择document.documentElement。

document.querySelector("html")

document.querySelector()是一个重要的功能，除了document.querySelectorAll(). 它返回文档顺序中的第一个匹配元素，对于 `document.querySelectorAll("html") 将是根 html 对象。

CanIUse 兼容性图表

document.documentElement

对象的documentElement属性（可以认为是 HTMLDocument 对象的别名）总是指根元素，在 HTML 中通常是标签。document<html>

CanIUse 兼容性图表

速度

在我的超科学速度测试中，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");

推荐阅读