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

Question

如果HTML元素可以包含一些文本,我是否可以测试(使用纯javascript或jQuery)干净而强大的方式？

例如,<br>,<hr>或<tr>不能包含文本节点,同时<div>,<td>还是<span>可以的.

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

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

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

显然,前一个列表的每个点都有一个子答案.

Answer 1

W3标准中的“无效元素”规定：

无效元素
区域，基础，br，col，嵌入，hr，img，输入，keygen，链接，menuitem，meta，param，源，track，wbr

显然还有一些非官方的标签。

您可以将其列入黑名单，并用于.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元素，因为它与规范不匹配”）。void元素是其内容模型在任何情况下都不允许其内容的元素。Void元素可以具有属性。 ”）。