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

0

前方互換性

コメントで述べたように、このような要素を作成することは安全ではありません。たとえば、入力要素が存在しなかったが、後で作成されたふりをします。

<input>Some Content</input>

ブラウザーはこれを次のように書き換えます (わかりやすくするために XHTML):

<input />Some Content

SEOとアクセシビリティ

HTML5 ページは、コンテンツを説明する要素を提供します。これにより、検索エンジンがページを理解するのに役立ちます。彼らがあなたのページを理解していない場合、ランキングが下がる可能性があります。

これらのタグの使用を主張し、それらをテキストのブロック以上に使用する場合は、ロールとaria-tagsを与える必要があります。これは、検索エンジンや、スクリーン リーダーやその他のアクセシビリティ サービスを必要とする人々を支援します。

スタイル性

一部のブラウザでは、要素をプログラムで作成するまで CSS スタイルを有効にできません。これは、古いブラウザーに新しい HTML5 要素をサポートさせるために html5shiv が使用する手法と同じです。

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

ブラウザの代替: data-*

デモ

属性を使用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 に答える