16

使用类似的东西document.getElementByTagName，您实际上可以创建自己的元素。

<arial>Hello</arial>

然后在 JS..

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

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

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

我的问题归结为，这是不好的做法吗？有什么我没有注意到的缺点吗？

4

5 回答 5

27

W3C 说你不应该。这是不好的做法。

作者不得使用本规范或其他适用规范不允许的元素、属性或属性值，因为这样做会使该语言在未来的扩展变得更加困难。

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

于 2013-08-11T22:52:26.153 回答
6

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

与其制作自己的标签，不如使用class，也许还有data属性来为你的 DOM 添加适当的属性。

于 2013-08-11T22:50:57.733 回答
4

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

于 2013-08-11T22:49:57.143 回答
2

我不会说这是不好的做法，但它几乎在任何情况下都过大，根据W3 Validator，它会使您的 HTML 标记无效。你可以做的是给你的元素 aclass然后在 JavaScript 中通过使用来引用它getElementByClass：

// Grabs the first element with said class
var foo = document.getElementsByClassName()[0];
于 2013-08-11T22:52:07.610 回答
0

前向兼容性

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

<input>Some Content</input>

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

<input />Some Content

搜索引擎优化和可访问性

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

如果您坚持使用这些标签，并且将它们用于不止一个文本块，您应该给它们角色和aria-tags。这有助于搜索引擎和需要屏幕阅读器或其他可访问性服务的人。

风格化

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

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

浏览器替代：数据-*

演示

您可以使用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（客户端）编写的演示，但与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)

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

于 2013-08-11T23:14:59.680 回答