Javascript 浏览器支持的所有HTML标记

使用JavaScript，是否可以获得浏览器支持的标记列表？

如果您愿意从已知的候选标记列表开始，可以尝试以下方法：

document.createElement("asdf") instanceof HTMLUnknownElement
true
document.createElement("canvas") instanceof HTMLUnknownElement
false

如果您需要支持IE8，可以使用以下方法：

function browserSupports(elementTagName) {
    var el = document.createElement(elementTagName);
    return !((el instanceOf HTMLUnknownElement) || (el instanceof HTMLGenericElement));
}

这里是另一种不依赖于特定命名构造函数的方法

function browserSupports(elementTagName) {
    var unknownel = document.createElement("zzxcv");
    var el = document.createElement(elementTagName);
    return unknownel.constructor !== el.constructor;
}

---

不过，它在IE8中似乎仍然不起作用。

没有通用的方法，但每个元素都有特定的方法来确定是否支持它

画布元素支持：

var canvasSupported = "getContext" in document.createElement("canvas");

var audioElementSupported = "play" in document.createElement("audio");

输入类型支持：

var input = document.createElement("input");
input.type = "color"
var colorInputSupported = input.type === "color";
//The above relies on the fact that type is enumerated and 
//falls back to "text" with invalid value
//The technique doesn't necessarily carry over to other properties

音频元素支持：

var canvasSupported = "getContext" in document.createElement("canvas");

var audioElementSupported = "play" in document.createElement("audio");

进度要素支持

var progressElementSupported = "max" in document.createElement("progress");

---

你可以通过窗口上的自省了解到支持什么

试试这个：

props = Object.getOwnPropertyNames(window)
for (var idx in props) {
  if (props[idx].indexOf("HTML") == 0) {
    //do something here
    console.log(props[idx]);
  }  
}

据我所知，这并不是详尽无遗的，但它将告诉您在大多数浏览器中哪些标记具有DOM对象类型

以下是在我的Chrome控制台中运行此命令的示例输出：

HTMLUnknownElement
HTMLOptionsCollection
HTMLFormControlsCollection
HTMLAllCollection
HTMLCollection
HTMLUListElement
HTMLTitleElement
HTMLTextAreaElement
HTMLTemplateElement
HTMLTableSectionElement
HTMLTableRowElement
HTMLTableElement
HTMLTableColElement
HTMLTableCellElement
HTMLTableCaptionElement
HTMLStyleElement
HTMLSpanElement
HTMLSelectElement
HTMLScriptElement
HTMLQuoteElement
HTMLProgressElement
HTMLPreElement
HTMLParamElement
HTMLParagraphElement
HTMLOutputElement
HTMLOptionElement
HTMLOptGroupElement
HTMLObjectElement
HTMLOListElement
HTMLModElement
HTMLMeterElement
HTMLMetaElement
HTMLMenuElement
HTMLMarqueeElement
HTMLMapElement
HTMLLinkElement
HTMLLegendElement
HTMLLabelElement
HTMLLIElement
HTMLKeygenElement
HTMLInputElement
HTMLImageElement
HTMLIFrameElement
HTMLHtmlElement
HTMLHeadingElement
HTMLHeadElement
HTMLHRElement
HTMLFrameSetElement
HTMLFrameElement
HTMLFormElement
HTMLFontElement
HTMLFieldSetElement
HTMLEmbedElement
HTMLDivElement
HTMLDirectoryElement
HTMLDataListElement
HTMLDListElement
HTMLCanvasElement
HTMLButtonElement
HTMLBodyElement
HTMLBaseElement
HTMLBRElement
HTMLAreaElement
HTMLAppletElement
HTMLAnchorElement
HTMLElement
HTMLDocument

由document.createElement（）创建的每个JavaScript html元素对象都有一个构造函数，该构造函数总是以“html…”开头，以“…element”结尾。所有这些都是从HtmleElement继承的。在窗口中，可以通过object.getOwnPropertyNames（）在对象中访问这些属性

所以，您可以通过迭代窗口中的所有属性名并使用HTML…元素对其进行筛选来获得所有有效的标记名：

编辑

html元素的一些构造函数只是基本构造函数（例如HTMLMEDIALEMENT）。 在本例中，HtmlLaudioElement（

目前，JavScript中没有其他方法可以使用document.createElement（tagName）；，创建错误的标记名，请检查构造函数是否为HtmlUnknowneElement，并手动修复这些问题：

function getAllTagNames()
{
    let items = [];

    Object.getOwnPropertyNames(window).forEach(name =>
    {
        if(name.startsWith('HTML') && name.endsWith('Element') && window[name].prototype instanceof HTMLElement)
        {
            items.push({ constructorName: name, tagName: name.substr(4, name.length - 11).toLowerCase() });
        }
    });

    items.sort((leftItem, rightItem) =>
    {
        let left = leftItem.tagName;
        let right = rightItem.tagName;

        if(left.toLowerCase) { left = left.toLowerCase(); }
        if(right.toLowerCase) { right = right.toLowerCase(); }

        return left == right ? 0 : (left < right ? -1 : 1);
    });

    function insertSorted(item)
    {
        let index = 0;
        while(item.tagName > items[index].tagName) { index++; }
        items.splice(index, 0, item);
    }

    let disagreements = [];
    items = items.filter(item =>
    {
        let tagName = item.tagName;

        switch(tagName) // deprecated
        {
            case "keygen": return false;
        }

        let filter = tagName == "unknown" || document.createElement(tagName).constructor == HTMLUnknownElement;
        if(filter && tagName != "unknown") { disagreements.push(item); }

        return !filter;
    });

    disagreements = disagreements.filter(item =>
    {
        switch(item.tagName) // base constructor
        {
            case "media": return false;
        }

        return true;
    });

    disagreements.forEach(item => 
    {
        let tagName = item.tagName;

        function exchange(tagName)
        {
            insertSorted({ constructorName: item.constructorName, tagName: tagName });
        }

        switch(tagName)
        {
            case 'anchor':
                exchange('a');
                break;

            case 'directory':
                exchange('dir');
                break;

            case 'dlist':
                exchange('dl');
                break;

            case 'heading':
                exchange('h1');
                exchange('h2');
                exchange('h3');
                exchange('h4');
                exchange('h5');
                exchange('h6');
                break;

            case 'image':
                exchange('img');
                break;

            case 'mod':
                exchange('del');
                exchange('ins');
                break;

            case 'olist':
                exchange('ol');
                break;

            case 'paragraph':
                exchange('p');
                break;

            case 'quote':
                exchange('blockquote');
                exchange('q');
                break;

            case 'tablecaption':
                exchange('caption');
                break;

            case 'tablecell':
                exchange('th');
                exchange('td');
                break;

            case 'tablecol':
                exchange('col');
                exchange('colgroup');
                break;

            case 'tablerow':
                exchange('tr');
                break;

            case 'tablesection':
                exchange('tfoot');
                exchange('thead');
                exchange('tbody');
                break;

            case 'ulist':
                exchange('ul');
                break;

            default:
                console.log('disagree', tagName);
                if(console.warn && tagName != "") { console.warn("unknown tag name for " + item.constructorName); }
                break;
        }
    });

    return items.map(item => item.tagName);
}

---

这将用于什么？@programminginallston修复OPs好奇。希望OP不是一个cat…检查受支持标记的代码可能从：

如果（IE）返回false

@cale\b基本上你只需要运行

document.createElement（'foo'））

并且它将是可风格化的。您所说的“支持”是什么意思？您想知道哪些标记（包括非标准标记）对特定浏览器具有特殊意义，或者特定规范中的哪些标记已完全实现（在DOM接口、行为等中）？这很有趣，但它给出了一个接口列表，而不是元素类型列表。例如，该列表不包含与

strong

或

span

相对应的任何内容，因为这些元素没有自己的接口（它们只使用通用HTMLElement接口）.就我所见，可能没有可靠的方法可以做到这一点，但我喜欢这种方法，因为它可以在没有起始列表的情况下使用，而且，正如@JukkaK.Korpela所说，列表中会有漏洞，它仍然是一种非常酷的方法。这确实是特定于元素的。例如，如果您没有ry将其应用于测试对

td

的

align=char

的支持（结果为真，即使没有浏览器实际支持此值）.@JukkaK.Korpela是的，我不是想暗示

输入

类型测试技术会影响到其他任何东西。它特别有效，因为

类型

是一个枚举属性。我在编辑中澄清了这一点。

对齐

属性也被枚举。甚至是形式上相似的属性（具有枚举的值列表）浏览器可能会以不同的方式对待它。@JukkaK.Korpela我没有发现任何关于它的信息，只是它被弃用了。这一点都不可靠，因为旧的浏览器无法识别

htmlunknowneElement

。如果我测试对任何元素的支持，我会用IE 10在IE 8模式下进行测试，得到结果

false

（包括肯定受支持的元素，如

p

）。@JukkaK.Korpela：这一点很好。我添加了一个处理IE8的新实现。我最初的想法是不使用列表标记开始，但这也是一种非常酷的方法=）。非常酷。但是有大量缺少的元素。就在a、B和C中，有旁白、缩写、地址、文章、B、bdi、bdo、blockquote、caption、cite、code、col、colgroup。如果与手动添加缺少的其余元素相结合，这可能是一种很好的方法。多痛苦啊。。。

function getAllTagNames()
{
    let items = [];

    Object.getOwnPropertyNames(window).forEach(name =>
    {
        if(name.startsWith('HTML') && name.endsWith('Element') && window[name].prototype instanceof HTMLElement)
        {
            items.push({ constructorName: name, tagName: name.substr(4, name.length - 11).toLowerCase() });
        }
    });

    items.sort((leftItem, rightItem) =>
    {
        let left = leftItem.tagName;
        let right = rightItem.tagName;

        if(left.toLowerCase) { left = left.toLowerCase(); }
        if(right.toLowerCase) { right = right.toLowerCase(); }

        return left == right ? 0 : (left < right ? -1 : 1);
    });

    function insertSorted(item)
    {
        let index = 0;
        while(item.tagName > items[index].tagName) { index++; }
        items.splice(index, 0, item);
    }

    let disagreements = [];
    items = items.filter(item =>
    {
        let tagName = item.tagName;

        switch(tagName) // deprecated
        {
            case "keygen": return false;
        }

        let filter = tagName == "unknown" || document.createElement(tagName).constructor == HTMLUnknownElement;
        if(filter && tagName != "unknown") { disagreements.push(item); }

        return !filter;
    });

    disagreements = disagreements.filter(item =>
    {
        switch(item.tagName) // base constructor
        {
            case "media": return false;
        }

        return true;
    });

    disagreements.forEach(item => 
    {
        let tagName = item.tagName;

        function exchange(tagName)
        {
            insertSorted({ constructorName: item.constructorName, tagName: tagName });
        }

        switch(tagName)
        {
            case 'anchor':
                exchange('a');
                break;

            case 'directory':
                exchange('dir');
                break;

            case 'dlist':
                exchange('dl');
                break;

            case 'heading':
                exchange('h1');
                exchange('h2');
                exchange('h3');
                exchange('h4');
                exchange('h5');
                exchange('h6');
                break;

            case 'image':
                exchange('img');
                break;

            case 'mod':
                exchange('del');
                exchange('ins');
                break;

            case 'olist':
                exchange('ol');
                break;

            case 'paragraph':
                exchange('p');
                break;

            case 'quote':
                exchange('blockquote');
                exchange('q');
                break;

            case 'tablecaption':
                exchange('caption');
                break;

            case 'tablecell':
                exchange('th');
                exchange('td');
                break;

            case 'tablecol':
                exchange('col');
                exchange('colgroup');
                break;

            case 'tablerow':
                exchange('tr');
                break;

            case 'tablesection':
                exchange('tfoot');
                exchange('thead');
                exchange('tbody');
                break;

            case 'ulist':
                exchange('ul');
                break;

            default:
                console.log('disagree', tagName);
                if(console.warn && tagName != "") { console.warn("unknown tag name for " + item.constructorName); }
                break;
        }
    });

    return items.map(item => item.tagName);
}

let tagNames =
[
    { name: "a", constr: "HTMLAnchorElement" },
    { name: "area", constr: "HTMLAreaElement" },
    { name: "audio", constr: "HTMLAudioElement" },
    { name: "base", constr: "HTMLBaseElement" },
    { name: "body", constr: "HTMLBodyElement" },
    { name: "br", constr: "HTMLBRElement" },
    { name: "button", constr: "HTMLButtonElement" },
    { name: "canvas", constr: "HTMLCanvasElement" },
    { name: "content", constr: "HTMLContentElement" },
    { name: "data", constr: "HTMLDataElement" },
    { name: "datalist", constr: "HTMLDataListElement" },
    { name: "details", constr: "HTMLDetailsElement" },
    { name: "dialog", constr: "HTMLDialogElement" },
    { name: "dir", constr: "HTMLDirectoryElement" },
    { name: "div", constr: "HTMLDivElement" },
    { name: "dl", constr: "HTMLDListElement" },
    { name: "embed", constr: "HTMLEmbedElement" },
    { name: "fieldset", constr: "HTMLFieldSetElement" },
    { name: "font", constr: "HTMLFontElement" },
    { name: "form", constr: "HTMLFormElement" },
    { name: "frame", constr: "HTMLFrameElement" },
    { name: "frameset", constr: "HTMLFrameSetElement" },
    { name: "head", constr: "HTMLHeadElement" },
    { name: "h1", constr: "HTMLHeadingElement" },
    { name: "h2", constr: "HTMLHeadingElement" },
    { name: "h3", constr: "HTMLHeadingElement" },
    { name: "h4", constr: "HTMLHeadingElement" },
    { name: "h5", constr: "HTMLHeadingElement" },
    { name: "h6", constr: "HTMLHeadingElement" },
    { name: "hr", constr: "HTMLHRElement" },
    { name: "html", constr: "HTMLHtmlElement" },
    { name: "iframe", constr: "HTMLIFrameElement" },
    { name: "img", constr: "HTMLImageElement" },
    { name: "input", constr: "HTMLInputElement" },
    { name: "label", constr: "HTMLLabelElement" },
    { name: "legend", constr: "HTMLLegendElement" },
    { name: "li", constr: "HTMLLIElement" },
    { name: "link", constr: "HTMLLinkElement" },
    { name: "map", constr: "HTMLMapElement" },
    { name: "marquee", constr: "HTMLMarqueeElement" },
    { name: "menu", constr: "HTMLMenuElement" },
    { name: "meta", constr: "HTMLMetaElement" },
    { name: "meter", constr: "HTMLMeterElement" },
    { name: "del", constr: "HTMLModElement" },
    { name: "ins", constr: "HTMLModElement" },
    { name: "object", constr: "HTMLObjectElement" },
    { name: "ol", constr: "HTMLOListElement" },
    { name: "optgroup", constr: "HTMLOptGroupElement" },
    { name: "option", constr: "HTMLOptionElement" },
    { name: "output", constr: "HTMLOutputElement" },
    { name: "p", constr: "HTMLParagraphElement" },
    { name: "param", constr: "HTMLParamElement" },
    { name: "picture", constr: "HTMLPictureElement" },
    { name: "pre", constr: "HTMLPreElement" },
    { name: "progress", constr: "HTMLProgressElement" },
    { name: "q", constr: "HTMLQuoteElement" },
    { name: "script", constr: "HTMLScriptElement" },
    { name: "select", constr: "HTMLSelectElement" },
    { name: "shadow", constr: "HTMLShadowElement" },
    { name: "slot", constr: "HTMLSlotElement" },
    { name: "source", constr: "HTMLSourceElement" },
    { name: "span", constr: "HTMLSpanElement" },
    { name: "style", constr: "HTMLStyleElement" },
    { name: "td", constr: "HTMLTableCellElement" },
    { name: "th", constr: "HTMLTableCellElement" },
    { name: "col", constr: "HTMLTableColElement" },
    { name: "colgroup", constr: "HTMLTableColElement" },
    { name: "table", constr: "HTMLTableElement" },
    { name: "tr", constr: "HTMLTableRowElement" },
    { name: "tbody", constr: "HTMLTableSectionElement" },
    { name: "tfoot", constr: "HTMLTableSectionElement" },
    { name: "thead", constr: "HTMLTableSectionElement" },
    { name: "template", constr: "HTMLTemplateElement" },
    { name: "time", constr: "HTMLTimeElement" },
    { name: "title", constr: "HTMLTitleElement" },
    { name: "track", constr: "HTMLTrackElement" },
    { name: "ul", constr: "HTMLUListElement" },
    { name: "video", constr: "HTMLVideoElement" }
];