Question

使用像document.getElementByTagName这样的东西，你几乎可以创建自己的元素。

<arial>Hello</arial>

然后在JS ..

var a = document.getElementsByTagName("arial");

for(i = 0; i < a.length; ++i)
     a[i].style.fontFamily = "Arial"

我们有一个自定义元素，容易腻。

我的问题归结为，这是不好的做法吗？是否有一些我不注意的缺点？

Answer 1

The W3C says you should not.这是不好的做法。

作者不得使用那些元素，属性或属性值本规范或其他适用范围不允许规范，因为这样做使得它更加困难语言将在未来扩展。

此外，HTML5 不是 XML。您应该只使用官方规范中列出的元素。

Answer 2

这样做的主要缺点是它在语义上没有效果。但是，浏览器会将其解析为块元素，直到您为其添加更多样式。

使用class和data属性来为DOM添加适当的属性，而不是制作自己的标记。

Answer 3

通常，您希望使用标准html元素并使用其ID或类来定位它们。它将产生更清洁和可用的代码。

Answer 4

我不会说这是糟糕的做法，但它几乎在任何情况下都太过分了，并且会根据W3 Validator使您的HTML标记无效。你可以做的是给你的元素class，然后使用getElementByClass在JavaScript中引用它：

// Grabs the first element with said class
var foo = document.getElementsByClassName()[0];

Answer 5

向前兼容性

正如评论中所提到的，创建这样的元素是不安全的。例如，假装输入元素不存在，但稍后创建。

<input>Some Content</input>

浏览器将其重写为（为清晰起见，XHTML）：

<input />Some Content

SEO和辅助功能

HTML5页面提供描述内容的元素。这有助于搜索引擎了解您的网页。如果他们不了解您的网页，可能会降低您的排名。

如果您坚持使用这些标记，并将其用于多个文本块，则应该为其提供roles和aria-tags。这有助于搜索引擎和需要屏幕阅读器或其他可访问性服务的人。

Styleability

在以编程方式创建元素之前，某些浏览器不会让CSS样式生效。 html5shiv使用的技术与旧浏览器支持新的HTML5元素相同。

document.createElement("arial"); // don't need to do anything with it

浏览器替代方案：数据 - *

demo

您可以使用data-something属性标记要替换的元素。例如：

<span data-large>Large Text</span>

然后，您可以使用重写器将这些替换为不同的HTML。这个例子使用jQuery和一个非常简单的模板语言。

rewrites = {
    large: '<span style="font-size: 2em">{}</span>'
};

function rewrite(r) {
    for (rule in r) {
        // build a selector in the form of [data-something]
        var selector = "[data-{}]".replace("{}", rule)
        $(selector).each(function (i, el) {

            // get our inner html and inject it into our template
            var inner = $(this).html();
            var templated = r[rule].replace("{}", inner);

            // replace the element with our new HTML
            $(this).replaceWith(templated);            

        });
    }
}

rewrite(rewrites);

服务器端/构建

您可以使用您喜欢的任何标签编写代码，但在服务器到达浏览器之前将其转换。这是用jQuery编写的demo（客户端），但与Cheerio（nodejs）兼容。

rewrites = {
    large: '<span style="font-size: 2em">{}</span>'
};

function rewrite($, r) {
    for (rule in r) {
        $(rule).each(function (i, el) {
            var inner = $(this).html();
            var templated = r[rule].replace("{}", inner);
            $(this).replaceWith(templated);            
        });
    }
}

rewrite($, rules)

这可以在构建脚本中使用，也可以作为非常简单的服务器端模板使用。这样，浏览器和搜索引擎永远不会看到我们的组成元素。如果您需要这些虚拟元素，我建议使用此解决方案。

在HTML5中使用自定义元素是不好的做法吗？

5 个答案: