javascript - 测试元素是否可以包含文本

Question

如果 HTML 元素可以包含一些文本，是否有一种干净而可靠的方法可以测试(使用纯 javascript 或 jQuery)？

例如，<br> , <hr>或 <tr>不能包含文本节点，而 <div> , <td>或 <span>可以。

测试此属性的最简单方法是控制标记名称。但这是最好的解决方案吗？我认为这是最糟糕的情况之一......

编辑:为了阐明问题的意义，需要指出完美的答案应该考虑两个问题:

1. 根据 HTML 标准，元素是否可以包含文本节点？
2. 如果元素包含一些文本，是否会显示？

显然，前面列表中的每个点都有一个子答案。

Answer 1

The W3 standard for "void elements"指定:

Void elements
area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr

显然有一些 unofficial标签也是如此。

可以做一个黑名单，用.prop('tagName')获取标签名称:

(function ($) {
    var cannotContainText = ['AREA', 'BASE', 'BR', 'COL', 'EMBED', 'HR', 'IMG', 'INPUT', 'KEYGEN', 'LINK', 'MENUITEM', 'META', 'PARAM', 'SOURCE', 'TRACK', 'WBR', 'BASEFONT', 'BGSOUND', 'FRAME', 'ISINDEX'];

    $.fn.canContainText = function() {
        var tagName = $(this).prop('tagName').toUpperCase();

        return ($.inArray(tagName, cannotContainText) == -1);
    };
}(jQuery));

$('<br>').canContainText(); //false
$('<div>').canContainText(); //true

在这里你也可以添加自己的标签到cannotContainText (例如，添加 <tr> 这不是正式的 void 元素，因为它与 specification 不匹配 “void 元素是其内容模型在任何情况下都不允许它包含内容的元素。Void 元素可以有属性。").