检查 - 节点可以有子节点吗？

Question

有没有一种便携的方法来检查某个元素是否可以接受和显示childNodes，除了检查tagName switch（node.tagName）或类似内容？我需要实现某种d&d，并且我想将移动的节点插入最接近document.elementFromPoint位置（拖动的节点已被放置）。但是，据我所知，将元素插入<img> 之类的元素中毫无意义，因此在这种情况下我将需要 insertBefore 此img的parentNode。

当然，可以根据标签列表进行检查，但也许有更便携和简单的解决方案吗？

谢谢

- BbIKTOP

---

检查标签列表有什么问题吗？ - Manos Kounelakis

谁说这是错的？这个列表可能会变得有点长，并且将来可能会更改，所以也许有更简单的方法来做到这一点？只需看这里：https://developer.mozilla.org/en-US/docs/Web/HTML/Element - 它不是很小，对吧？)) - BbIKTOP

你需要了解更多的内容，而不仅仅是“可以有子元素”，因为有许多元素只能是特定其他元素的子元素，例如TD必须是TR的子元素，LI必须是UL或OL的子元素。同样，一些元素只能具有特定的子节点，例如TR只能具有TD子节点等等。 - RobG

Answer 1

不，我认为没有内置函数可以检查某个标签是否是空标签。这是HTML的一个相当武断的决定，没有DOM属性。 （在XML文档中，理论上每个元素都可以有子元素）。

因此，根据官方列表进行检查确实是解决问题的方法。对于HTML4，请参见哪些HTML标记没有内容，对于HTML5，请参见规范中的空元素列表：

area, base, br, col, embed, hr, img, input, keygen, link, menuitem, meta, param, source, track, wbr

- Bergi

---

嗯，这不完全是我要找的，但很接近。在我的情况下，将其插入到列表或选择等中也没有意义。好吧，也许这确实取决于目的和方法。谢谢，那我就写一个switch-case列表了)))) - BbIKTOP

@BbIKTOP 你可以在列表中插入<li>，在选择框中插入<option>。如果你想插入特定的元素，比如<div>，那么在某些情况下它显然不符合语义要求。请参考内容模型以了解更多信息。 - Bergi

当然，但是在列表中插入除li以外的任何内容都是无用的，这就是我的意思。我必须为这个特定的情况创建自己的列表。 - BbIKTOP

再强调一遍，不要自己造轮子，要使用官方列表 :-) - Bergi

就像我说的那样，我的任务没有列表，但至少现在我明白了。 - BbIKTOP

正如我在问题中所说的，我正在实现某种d&d，并需要在放置位置插入“dropped”元素。好吧，我已经获得了足够的信息，意识到我真正需要什么，谢谢！ - BbIKTOP

Answer 2

你可以使用 此答案 中的方法（问题和答案不是我的）。它回答了不同的问题，但仍然可能有帮助。 我在这里粘贴了被接受的答案，虽然这个问题也有其他答案，但可能对你有用。 这是一个检查元素是否能包含文本的方法。

function canElementContainText(tagname) {
    try {
        var e = document.createElement(tagname);
        return e.outerHTML.indexOf("/") != -1;
    } catch (ex) {
       return false;
    }
}

使用方法：

var result = canElementContainText(myElement.tagName);

- Shimon Rachlenko