Document、HTMLDocument、Document、Element、Node等，它们的关系是什么？

Question

我想知道document、HTMLDocument、Document、Element 和Node 之间的关系以实现 IE8 的getElementsByClassName 方法.. 但每当我尝试这些方法时，它都不起作用:
document.getElementsByClassName = function(){}, HTMLDocument.getElementsByClassName=function(){} 或 Element.prototype.getElementsByClassName=function(){}.

        if(!Element.getElementsByClassName) {
            Element.prototype.getElementsByClassName = function(arg){
                var cssSelector;
                var parentElement = this.document||this.documentElement.document||document;
                var queryElements = null;

                if(arg){
                    if(arg.indexOf(' ')>0){
                        cssSelector = '[class~="'+arg+'"]';
                    }else{
                        cssSelector = "."+arg;
                    }
                    queryElements = parentElement.querySelectorAll(cssSelector);
                }
                return queryElements;
            }
        }
        var elems = document.getElementsByClassName('limit').item(0);
        var triangles = elems.getElementsByClassName('triangle');
        debugger;

Answer 1

您可以在this doc 中找到Document、Node 和Element 的描述，以及从here 中找到HTMLDocument 的描述。

• Document 接口代表浏览器中加载的任何网页，并作为网页内容（即 DOM 树）的入口点。

• Node 是一个接口，各种类型的 DOM API 对象都从该接口继承。

• Element 是Node 的一种。它只有各种元素共有的方法和属性。

• HTMLDocument 接口扩展了 Window.HTMLDocument 属性以包含特定于 HTML 文档的方法和属性。

此外，如果您只想在 IE 8 中使用 getElementsByClassName 之类的东西，我认为最简单的方法是使用 document.querySelectorAll('.classname') 作为替代。有关此方法的更多信息，您可以参考this article。