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

我在我的应用程序中创建了一个名为'loading'的自定义jquery事件。当这个事件被触发时，我想附加一个带有微调器的遮罩元素。我可以找出没有问题的部分。但是，一些元素（图像，表单输入等）不能附加子元素。我需要能够检测此事件的目标是否可以接收子元素。如果它不能，那么我将添加微调框&它的父元素。如何检测html元素是否可以附加子节点？

来源

2012-06-22 demersus

你必须检查名称：

/*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 
}

来源

2012-06-22 18:38:06 jasssonpet

indexOf不是数组的跨浏览器：https：//developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf – Joe

使用_.indexOf如果您支持IE8和更老的 – jasssonpet

尼斯。为了防止文本节点进入，可能值得添加“＃text”。 – 2012-06-22 18:41:47

你可以添加子元素，他们只是不会渲染。这可能听起来像语义上的区别，但它对于您的问题至关重要：DOM不知道是否显示特定标记。

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

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

来源

2012-06-22 18:23:06 Malvolio

我还从未见过布尔语法。它有效吗？所以我想我可以查找void元素的规格，并将其添加到该散列。 – demersus

我认为创建一个void元素表将是唯一真正的解决方案。虽然我假设你的意思是'return！{input：true，img：true} [elem.nodeName]' – 2012-06-22 18:37:08

http://jsfiddle.net/mblase75/eGyRH/3/ - Chrome允许我将一个子元素添加到' '标记，即使它没有显示。它在DOM调试器中可见，只是不在浏览器窗口中。 – Blazemonger

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/ - 所以它也不完全可靠。

来源

2012-06-22 18:41:45 Blazemonger

接受的答案有一个很好的功能基于。它可以通过一个jQuery的一行替换为：

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

来源

2017-04-25 15:18:25

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

回答

相关问题