如何检测 html 元素是否可以附加子节点？答案

【问题标题】：How do you detect if an html element can append child nodes?如何检测 html 元素是否可以附加子节点？
【发布时间】：2017-09-22 14:51:31
【问题描述】：

我在我的应用程序中创建了一个名为“加载”的自定义 jquery 事件。当触发此事件时，我想附加一个带有微调器的屏蔽元素。我可以毫无问题地弄清楚那部分。但是，某些元素（图像、表单输入等）不能附加子元素。我需要能够检测此事件的目标是否可以接收子元素。如果不能，那么我会将微调器和遮罩添加到它的父元素中。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您必须检查名称：

/*global $, jQuery */

function isVoid(el) {
    var tags = ['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input',
                 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'],
        i = 0,
        l,
        name;

    if (el instanceof jQuery) {
        el = el[0];
    }

    name = el.nodeName.toLowerCase();

    for (i = 0, l = tags.length; i < l; i += 1) {
        if (tags[i] === name) {
            return true;
        }
    }
    return false;
}

并像这样使用它：

var el = document.getElementById('el'),
    elj = $('#el');

if (!isVoid(el)) {
    // append
}

【讨论】：

indexOf 不是跨浏览器的数组：developer.mozilla.org/en/JavaScript/Reference/Global_Objects/…
如果您支持 IE8 及更早版本，请使用 _.indexOf
不错。可能值得添加'#text'，以防万一文本节点进入。
我们不支持 IE7 或更低版本。 indexOf 在 IE8 中不能正常工作吗？
仅限IE 9+，可以使用类似功能underscorejs.org/docs/underscore.html#section-47

【解决方案2】：

您可以添加子元素，它们只是不会渲染。这听起来像是语义上的区别，但它对您的问题很关键：DOM 不知道是否呈现特定标签。

最好的办法就是查看手册：

var allowChildren = function(elem) {
   return ! (elem.nodeName in { INPUT : true, IMG : true }) ;
};

【讨论】：

我从未见过这种布尔语法。它有效吗？所以我想我可以查找 void 元素的规范，并将其添加到该哈希中。
我认为创建一个空元素表将是唯一真正的解决方案。虽然我假设你的意思是return !{ input : true, img : true }[elem.nodeName]
jsfiddle.net/mblase75/eGyRH/3 -- Chrome 允许我将子元素添加到 <input> 标记，即使它根本没有显示。它在 DOM 调试器中可见，只是在浏览器窗口中不可见。
@NikPetersen -- 不，这是一个错字。
@amnotiam -- 抱歉，我的编辑由于某种原因没有“接受”。我重新申请了。

【解决方案3】：

http://jsfiddle.net/mblase75/eGyRH/3/ -- Chrome 允许我向<input> 标签添加一个子元素，即使它根本没有显示。它在 DOM 调试器中可见，只是在浏览器窗口中不可见。

但是，我可以测试它是 .width() 并查看它是否等于零：http://jsfiddle.net/mblase75/eGyRH/4/

alert($('.element').append('<span>asdf</span>').children().width());

但是，例如，如果我将跨度添加到隐藏的 div：http://jsfiddle.net/mblase75/eGyRH/5/，这也将是零宽度 - 所以它也不完全可靠。

【讨论】：

【解决方案4】：

接受的答案基于which types of nodes can be void 有一个非常好的功能。可以用 jQuery one-liner 代替：

node.is("area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr")

【讨论】：