Javascript:引用<html>dom节点

Javascript: Is it safe to refer to the <html> DOM-node?

本文关键字：dom 节点 html 引用 Javascript      更新时间：2023-09-26

在一个只有css选择器可用于检索元素的环境中工作，我想在覆盖整个浏览器窗口的DOM中获得元素。使用开发人员工具，我发现<body>在我的情况下有一些余量，这使得它不适合我的需求。

我进一步发现<html>元素覆盖了浏览器窗口的整个区域。当它是关于文档属性时，使用dom节点是否安全?例如，获取宽度/高度?

是否有机会<html>对应于javascript中所指的document ?

编辑:关于设置的边注:

我正在与实习生一起包装WD版本，并希望协调鼠标移动相对于文档。我的目标是使用像selectByCssSelector这样的方法来协调鼠标移动与选定元素的关系。到目前为止，使用<html>节点似乎是可行的。我以前从未接触过<html>节点，也从未见过其他人这样做，这就是为什么我想确信使用该节点并不坏。

文档对象是一个DOM HTML对象，所以，是的，它确实对应于<html>标记，但不是以您认为的方式。它不像<body>或<span>标签。它告诉浏览器下面的代码或信息是HTML。就像<?php告诉服务器有PHP代码，<script type="text/javascript">告诉浏览器有Javascript代码一样。欲了解更多信息，请查看此页面。

如果你不想获取正文的宽度和高度，你可以使用window.innerWidth和window.innerHeight。这应该得到整个窗口的高度和宽度(不包括任何滚动条或工具箱)。

你也可以使用documentElement来获取整个文档的宽度和高度。

var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;

这可能是你正在寻找的最终答案，但你也可以通过使用jQuery中的document来找到整个文档的宽度和高度。

var width = $(document).width();
var height = $(document).height();

html表示文档中的所有标记和内容，但它不对应于document对象。相反，它显示为其属性document.documentElement(尽管它也可以以许多其他方式引用，例如document.children[0])。

正如你所注意到的，body元素可能有一个边距，默认情况下它的所有边距都是8px。因此，如果您让html元素的尺寸默认为这个，那么您应该将html元素作为与浏览器窗口中的整个视口相对应的元素。您可以获得document.documentElement.clientWidth和document.documentElement.clientHeight的尺寸。

然而，由于历史原因，根据CSS定义，html元素的背景总是覆盖整个画布，即使该元素已被设置为较小的尺寸。如果你同时设置背景和边框，就能看到这个效果;背景可能会延伸到边界之外。此外，CSS规范还规定，如果没有为html设置背景，则使用body的背景。

相关文章：