如何檢測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元素是否可以附加子節點？

回答

相關問題