关于document.documentElement和document.body 的一些疑问

最新推荐文章于 2024-08-16 12:31:17 发布

lm1622

最新推荐文章于 2024-08-16 12:31:17 发布

阅读量549

点赞数

分类专栏： html 文章标签： javascript 广告 chrome

本文链接：https://blog.csdn.net/lm1622/article/details/52767360

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天在工作中,调试网页代码时，偶然遇到下面一段代码 ,这是电脑管家的网页广告过滤的js代码
/*
电脑管家chrome 广告过滤
*/

var GJAD_CS =
{
elemhideElt : null,
setElemhideCSSRules: function (selectors)
{
if (GJAD_CS.elemhideElt && GJAD_CS.elemhideElt.parentNode)
GJAD_CS.elemhideElt.parentNode.removeChild(GJAD_CS.elemhideElt);

if (!selectors)
return;

GJAD_CS.elemhideElt = document.createElement("style");
GJAD_CS.elemhideElt.setAttribute("type", "text/css");

// Try to insert the style into the <head> tag, inserting directly under the
// document root breaks dev tools functionality:
// http://code.google.com/p/chromium/issues/detail?id=178109
(document.head || document.documentElement).appendChild(GJAD_CS.elemhideElt);

var elt = GJAD_CS.elemhideElt; // Use a local variable to avoid racing conditions
function setRules()
{
if (!elt.sheet)
{
// Stylesheet didn't initialize yet, wait a little longer
window.setTimeout(setRules, 0);
return;
}

elt.innerText = selectors;
}
setRules();
},

QueryCss: function()
{
var query_param={
"url": window.location.href
};

chrome.extension.sendRequest({cmd: "query_css", json: JSON.stringify(query_param)}, function(response)
{
if (response && response.selectors != "")
{
GJAD_CS.setElemhideCSSRules(response.selectors);
}
});
},
};

GJAD_CS.QueryCss();

其中document.head || document.documentElement这一块不是很理解网上查了下

如果网页是<html>开头使用 document.head,
类似于<!DOCTYPE><html></html> ，使用 document.documentElement

在 IE 和 Firefox 中均是如此。

为了兼容，不管有没有 DTD，可以使用上面的代码：