Javascript：安全参考 <html> DOM节点？
[英]Javascript: Is it safe to refer to the <html> DOM-node?
问题描述
Working in an environment where only css-selectors are available for retrieving elements I want to obtain the element in the DOM which covers the whole browser-window. 
在只有CSS选择器可用于检索元素的环境中工作，我想在DOM中获得覆盖整个浏览器窗口的元素。 Using developer tools I found out that <body> has some margin in my case which makes it unsuitable for my requirements. 使用开发人员工具，我发现<body>在我的情况下有一定余地，这使其不适合我的要求。
I further discovered that the <html> element covers the whole area of the browser-window. 我进一步发现<html>元素涵盖了浏览器窗口的整个区域。 Is it safe to use that DOM-node when it is about the document properties? 关于文档属性使用该DOM节点是否安全？ Ie getting the width/height for example? 即获取宽度/高度？
Does by any chance <html> correspond to what is referred to as document in javascript? <html>是否与javascript中所谓的document相对应？
EDIT: Side note on the setup: 编辑：关于设置的旁注：
I'm working with interns wrapped WD version and want to coordinate mouse movements relative to the document. 我正在与实习生一起包装WD版本，并希望协调鼠标相对于文档的移动。 I was aiming for using a method like selectByCssSelector to coodinate mouse movements with respect to that selected element. 我的目标是使用诸如selectByCssSelector类的方法来协调鼠标相对于所选元素的移动。 Working with the <html> node here seems to work out so far. 到目前为止，在这里使用<html>节点似乎可以解决问题。 I just never touched the <html> node before and never saw anyone else do, that is why I wanted to be assured that it is not bad using that node. 我之前从未接触过<html>节点，也从未见过其他人这样做，因此我想确保使用该节点还不错。
2 个解决方案
解决方案1
1 已采纳 2014-05-30 22:54:09
The document object is a DOM HTML object so, yes, it does correspond to the <html> tag, but not in the way you think. 文档对象是DOM HTML对象，因此，是的，它确实与<html>标记相对应，但不符合您的想法。 It is not like a <body> or <span> tag. 它不像<body>或<span>标记。 It tells the browser that the following code or information is HTML. 它告诉浏览器以下代码或信息是HTML。 Just like how <?php tells the server that there is PHP code and <script type="text/javascript"> tells the browser that there is Javascript code. 就像<?php告诉服务器有PHP代码，而<script type="text/javascript">告诉浏览器有Javascript代码一样。 For more information on that, check out this page. 有关更多信息，请查看此页面。
If you don't want to get the width and height of the body, you can use window.innerWidth and window.innerHeight . 如果不想获取主体的宽度和高度，可以使用window.innerWidth和window.innerHeight 。 This should get the height and width of the entire window (excluding any scrollbars or toolboxes). 这应该获得整个窗口的高度和宽度（不包括任何滚动条或工具箱）。
You can also use documentElement to get the width and height of the entire document. 您还可以使用documentElement获取整个文档的宽度和高度。
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
This may be the final answer that you are looking for, but you can also find the width and height of the entire document by using document in jQuery. 这可能是你正在寻找最后的答案，但你也可以通过使用发现整个文档的宽度和高度document中的jQuery。
var width = $(document).width();
var height = $(document).height();
解决方案2
1 2014-05-31 13:53:28
The html represents all markup and content in the document, but it does not correspond to the document object. html表示文档中的所有标记和内容，但与document对象不对应。 Instead, it appears as its property, document.documentElement (though it can be referred to in many other ways, too, eg document.children[0] ). 相反，它作为其属性document.documentElement （尽管也可以通过许多其他方式引用它，例如document.children[0] ）。
As you note, the body element may have a margin, and by default it has a 8px margin on all sides. 如您所注意， body元素可能有一个空白，默认情况下，所有侧面都有8px的空白。 Thus, instead of it, the html element is the one you should refer to as corresponding to the entire viewport in the browser window, assuming that you let the dimensions of the html element default to that. 因此，假设您让html元素的尺寸默认为html ，而不是html元素，则应将其称为浏览器窗口中的整个视口。 You can get the dimensions as document.documentElement.clientWidth and document.documentElement.clientHeight . 您可以将尺寸获取为document.documentElement.clientWidth和document.documentElement.clientHeight 。
However, for historical reasons, by CSS definitions, the background of the html element always covers the entire canvas even if the element has been set to smaller dimensions. 但是，由于历史原因，通过CSS定义，即使将html元素的背景设置为较小尺寸，它的背景也会始终覆盖整个画布。 You can see this if you set both a background and a border on it; 如果同时设置背景和边框，则可以看到此内容。 the background may extend outside the border. 背景可能会超出边界。 Moreover, the CSS spec also specifies that if no background set for html , the background of body is used instead. 此外，CSS规范还指定如果未为html设置背景，则使用body的背景。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.