Question

有没有办法检查一个元素是否可以显示innerHTML或$.html()（比如有一个单独的结束标记的元素）或者是一个意图有src的元素根据HTML规范的属性，如<img>？我正在寻找快速/可靠的方法来通过jQuery或本机JavaScript来实现这一点。

修改：根据HTML规范，未设计为具有内部内容的元素称为void elements，但也有类似此<iframe src=url>inner</iframe>的元素完全有效。< / p>

Answer 1

不幸的是，没有一种万无一失的方法可以做到这一点，因为在Javascript中，任何元素都可以拥有这些属性。此外，看起来很奇怪，几乎所有HTML元素，包括<img>，都有innerHTML属性，即使它不能真正使用它！

最好的办法是制作一张表格，说明哪些元素具有什么。

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>

        <style>
            </style>

    </head>
    <body>

        <div id="anElementWithInnerHTML"></div>
        <img id="anElementWithInnerSRC" />

        <script>

            var div = document.getElementById("anElementWithInnerHTML");
            console.log(div.innerHTML); //Outputs ""
            console.log(div.src);       //Outputs undefined

            var img = document.getElementById("anElementWithInnerSRC");
            console.log(img.innerHTML); //Outputs "" (weird right?)
            console.log(img.src);       //Outputs ""

            </script>

    </body>
</html>

Answer 2

我想你可以做到

if (typeof element.src !== 'undefined')
if (element.innerHTML ...)

不完全可靠，因为任何元素都可以添加这些属性（JSON）。

（感谢类型修复，小偷）

Answer 3

我找到了list of elements that (according to the spec) allow the src attribute：

 audio, embed, iframe, img, input, script, source, track, video

所以这可以按名称检查：

function srcAllowed(tag) {
    if ( !tag ) { return false; }
    var tags = ['audio','embed','iframe','img','input','script','source','track','video'];
    return 0 <= $.inArray(tag.toLowerCase(), tags); // boolean
}

这适用于获取适当的内容：

function getContent(elem) {
    // @param  elem  is a selected element like $(this)
    // returns empty string if attr() and html() are both are falsey
    return elem.attr('src') || elem.html(); 
}

这更安全：

function getContentSafer(elem) {
    // @param  elem  is a selected element like $(this)
    // returns empty string if attr() and html() are both are falsey
    return srcAllowed(elem.prop('tagName')) ? (elem.attr('src') || elem.html()) : elem.html(); 
}

检查元素是否合法支持src属性或innerHTML

3 个答案: