How do you check if a JavaScript Object is a DOM Object?

后端 未结 30 2470
-上瘾入骨i
-上瘾入骨i 2020-11-22 16:06

I\'m trying to get:

document.createElement(\'div\')  //=> true
{tagName: \'foobar something\'}  //=> false

In my own scripts, I used

相关标签:
30条回答
  • 2020-11-22 16:27

    A absolute right method, check target is a real html element primary code:

        (function (scope) {
            if (!scope.window) {//May not run in window scope
                return;
            }
            var HTMLElement = window.HTMLElement || window.Element|| function() {};
    
            var tempDiv = document.createElement("div");
            var isChildOf = function(target, parent) {
    
                if (!target) {
                    return false;
                }
                if (parent == null) {
                    parent = document.body;
                }
                if (target === parent) {
                    return true;
                }
                var newParent = target.parentNode || target.parentElement;
                if (!newParent) {
                    return false;
                }
                return isChildOf(newParent, parent);
            }
            /**
             * The dom helper
             */
            var Dom = {
                /**
                 * Detect if target element is child element of parent
                 * @param {} target The target html node
                 * @param {} parent The the parent to check
                 * @returns {} 
                 */
                IsChildOf: function (target, parent) {
                    return isChildOf(target, parent);
                },
                /**
                 * Detect target is html element
                 * @param {} target The target to check
                 * @returns {} True if target is html node
                 */
                IsHtmlElement: function (target) {
                    if (!X.Dom.IsHtmlNode(target)) {
                        return false;
                    }
                    return target.nodeType === 1;
                },
                /**
                 * Detect target is html node
                 * @param {} target The target to check
                 * @returns {} True if target is html node
                 */
                IsHtmlNode:function(target) {
                    if (target instanceof HTMLElement) {
                        return true;
                    }
                    if (target != null) {
                        if (isChildOf(target, document.documentElement)) {
                            return true;
                        }
                        try {
                            tempDiv.appendChild(target.cloneNode(false));
                            if (tempDiv.childNodes.length > 0) {
                                tempDiv.innerHTML = "";
                                return true;
                            }
                        } catch (e) {
    
                        }
                    }
                    return false;
                }
            };
            X.Dom = Dom;
        })(this);
    

    0 讨论(0)
  • 2020-11-22 16:27
    (element instanceof $ && element.get(0) instanceof Element) || element instanceof Element
    

    This will check for even if it is a jQuery or JavaScript DOM element

    0 讨论(0)
  • 2020-11-22 16:29

    The using the root detection found here, we can determine whether e.g. alert is a member of the object's root, which is then likely to be a window:

    function isInAnyDOM(o) { 
      return (o !== null) && !!(o.ownerDocument && (o.ownerDocument.defaultView || o.ownerDocument.parentWindow).alert); // true|false
    }
    

    To determine whether the object is the current window is even simpler:

    function isInCurrentDOM(o) { 
      return (o !== null) && !!o.ownerDocument && (window === (o.ownerDocument.defaultView || o.ownerDocument.parentWindow)); // true|false
    }
    

    This seems to be less expensive than the try/catch solution in the opening thread.

    Don P

    0 讨论(0)
  • 2020-11-22 16:29

    Test if obj inherits from Node.

    if (obj instanceof Node){
        // obj is a DOM Object
    }
    

    Node is a basic Interface from which HTMLElement and Text inherit.

    0 讨论(0)
  • 2020-11-22 16:30

    No need for hacks, you can just ask if an element is an instance of the DOM Element:

    const isDOM = el => el instanceof Element
    
    0 讨论(0)
  • 2020-11-22 16:30

    Not to hammer on this or anything but for ES5-compliant browsers why not just:

    function isDOM(e) {
      return (/HTML(?:.*)Element/).test(Object.prototype.toString.call(e).slice(8, -1));
    }
    

    Won't work on TextNodes and not sure about Shadow DOM or DocumentFragments etc. but will work on almost all HTML tag elements.

    0 讨论(0)
提交回复
热议问题