如何获取没有子元素但可能有文本的元素？答案

【问题标题】：How to get elements which have no children, but may have text?如何获取没有子元素但可能有文本的元素？
【发布时间】：2009-04-13 14:01:47
【问题描述】：

empty selector 表示：匹配所有没有子元素（包括文本节点）的元素。
查找所有为空的元素 - 它们没有子元素或文本。

我想要的是获取没有子元素但内部可能有文本的元素。，如何？

更新：
示例：
我想选择这些没有子元素但可能有文本的元素，语法如下：

$('div:empty, a:empty, span, p:empty, td:empty, img, input').mousemove(myMouseOverHandler);

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

获取没有任何其他元素的任何元素：

$('*:not(:has(*))');

【讨论】：

可能值得一提的是，这不起作用：“:has(:not())”由于某些内部原因而失败。
如果您考虑一下 CSS 选择器引擎可能会如何尝试解释选择器，这会有些道理。 has 不需要知道如何处理not。更好的是，not(*) 到底是什么意思？它将如何转化为我们想要的？无论如何，这个答案太棒了，因为它救了我的培根。
有类似的 CSS 选择器吗？

【解决方案2】：

如果一个元素只有文本，children() 的长度将为0：

<div id="test1">
Hello World
</div>

<div id="test2">
<b>Hey there</b>
</div>

<script>
alert($("#test1").children().length); // alerts 0
alert($("#test2").children().length); // alerts 1 (the bold tag)
</script>

编辑：为了响应您的编辑，jQuery 非常棒，可以让您进行自定义过滤器：

$.expr[':'].emptyOrText = function(e) {  
    return $(e).children().length == 0;
};

所以，对上面的 HTML 使用上面的代码，你可以这样做：

$('div:emptyOrText'); // will select #test1

【讨论】：

我猜他正在寻找类似 ":only-text" 选择器的东西。 children() 方法只有在你有 id 时才有帮助。
自定义选择器很不错！无需使用“扩展”方法 - 只需执行 jQuery.expr[':].emptyOrText = function(){...}
另外，0 转换为 false 并且尝试访问 [0] 比 'length' 短 - ...所以你可以做 'return !$(e).children()[0] '
啊，我不确定自定义选择器的语法，它更短。谢谢。就长度而言，我有点喜欢它的长度，因为它读起来更好，以后遇到它的人可以更容易理解它，我想。
不错的答案，保罗……这超出了当前的问题。我知道我会回到这个来解决未来的问题。

【解决方案3】：

我为不想使用 jQuery 的任何人制作了一个纯 JavaScript 函数。

const getElementsWithNoChildren = (target) => {
    let candidates;

    if (target && typeof target.querySelectorAll === 'function') {
        candidates = target.querySelectorAll('*');
    }
    else if (target && typeof target.length === 'number') {
        candidates = target;
    }
    else {
        candidates = document.querySelectorAll('*');
    }

    return Array.from(candidates).filter((elem) => {
        return elem.children.length === 0;
    });
};

【讨论】：