Question

只有Internet Explorer似乎具有元素属性：canHaveHtml（MSDN，Dottoro）。除了使用带有标记名列表的正则表达式之外，我似乎无法在其他浏览器中找到任何模拟它的东西。有没有办法在Chrome，Firefox等中确定这个？

例如，有没有办法检查innerHTML属性，这是100％等价吗？

Answer 1

我认为没有相关规范：

http://www.w3.org/TR/domcore/#concept-node-append

例如，在Firefox，Chrome和Safari中，您可以实际将节点添加到<input>等元素中，例如：

var input = document.createElement("input");
var div = document.createElement("div");

div.textContent = 'hello';

console.log(input.outerHTML, input.childNodes.length);

input.appendChild(div);

console.log(input.outerHTML, input.childNodes.length);

他们只是没有渲染。但在这两种情况下，它们都被认为是input节点的子节点。如果是Firefox，则outerHTML不会更改，只有childNodes长度报告1，如果Chrome和Safari outerHTML从<input>更改为<input></input> 。在Firefox中，与Safari和Chrome相反，innerHTML实际返回子项的HTML，即使它未呈现且未在outerHTML中返回。

<强>更新：正如@Bergi在@MårtenWikström的回答中所指出的那样，像之前我所做的那样的方法对于可以包含内容的元素（如textarea，甚至是title）并不是很有效，但不是HTML内容。因此，更好的canHaveHTML可能是这样的：

// Improving the `canHaveHTML` using `canHaveChildren`,
// using the approach shown by Mårten Wikström
function canHaveChildren(node) {
  // Uses the native implementation, if any.
  // I can't test on IE, so maybe it could be worthy to never use
  // the native implementation to have a consistent and controlled
  // behaviors across browsers. In case, just remove those two lines
  if (node && node.canHaveChildren)
    return node.canHaveChildren();

  // Returns false if it's not an element type node; or if it has a end tag.
  // Use the `ownerDocument` of the `node` given in order to create
  // the node in the same document NS / type, rather than the current one,
  // useful if we works across different windows / documents.
  return node.nodeType === 1 && node.ownerDocument
      .createElement(node.tagName).outerHTML.indexOf("></") > 0;
}

function canHaveHTML(node) {
  // See comment in `canHaveChildren` about native impl.
  if (node && node.canHaveHTML)
    return node.canHaveHTML();

  // We don't bother to create a new node in memory if it
  // can't have children at all
  if (!canHaveChildren(node))
    return false;

  // Can have children, then we'll check if it can have
  // HTML children.
  node = node.ownerDocument.createElement(node.tagName);

  node.innerHTML = "<b></b>";

  // if `node` can have HTML children, then the `nodeType`
  // of the node just inserted with `innerHTML` has to be `1`
  // (otherwise will be likely `3`, a textnode).
  return node.firstChild.nodeType === 1;  
}

在Firefox，Chrome和Safari中测试;应涵盖所有节点和所有场景。

Answer 2

您可以使用以下函数来确定命名元素是否可以包含子元素。

然而，正如ZER0所指出的，这可能更像是IE canHaveChildren而不是canHaveHtml的替代，因为它对于任何“假定”不为空的标记名称都返回true。

function canHaveHtml(tag) { 
    return document.createElement(tag).outerHTML.indexOf("></") > 0; 
}

它使用了一个新创建的元素，它不能（或不应该）拥有内容，但outerHtml没有结束标记。

例如：

document.createElement("input").outerHTML === "<input>"

和

document.createElement("div").outerHTML === "<div></div>"

Answer 3

我似乎无法在其他浏览器中找到任何模仿它的东西，其他比使用带有标记名列表的正则表达式。

它可能看起来不优雅或聪明，但创建白名单（或黑名单）是最简单，最快速，最可靠的方法。你不需要正则表达式;你可以创建一个简单的结构，如关联数组。

// blacklist approach

var noChildren = {
    input: true,
    meta: true,
    br: true,
    link: true,
    img: true

    // other properties here
};

function canHaveChildren(tagName) {
    tagName = tagName.toLowerCase();
    alert(noChildren[tagName] === undefined);
}

canHaveChildren("BR");
canHaveChildren("div");

演示：http://jsfiddle.net/FTbWa/
可重复使用的功能：Github Gist

这种范式并非没有优先权;它在许多脚本库和HTML解析器/清理程序中使用。例如，查看jQuery的源代码，您会注意到许多特定于元素的测试以及元素名称和属性名称的数组。

Answer 4

这里我假设如果元素没有innerHTML属性，它应该有一个值或src或type属性。不能想到任何其他方式。您可以添加特定的TagName检查来处理以下代码无法处理的特定情况。

function CheckInnerHTMLSupport(oElement)
{
    var oDiv = document.createElement(oElement.tagName);
    if('canHaveHTML' in oDiv)
    {
        return oDiv.canHaveHTML;
    }
    var bSupportsInnerHTML = oDiv.type === undefined && oDiv.value === undefined && oDiv.src === undefined;
    return bSupportsInnerHTML;
}

如何确定元素是否可以有html子元素？

4 个答案: