DOM（二）判断节点包含关系

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        var div = document.createElement("div");
        function isElement(obj) {
            if (obj && obj.nodeType == 1) {
                if (window.Node && obj instanceof  Node) {
                    return true;
                }

                try {
                    div.appendChild(obj);
                    div.removeChild(obj);
                } catch (e) {
                    return false;
                }
                return true;
            }
            return false;
        }

        var nodeA = {
            nodeType: 1
        };

        //属性法是很容易攻破的 函数法是不容易被攻破的
        //XML与html对象均支持createElement（）方法，通过比较创建的元素时传入参数的【大小写】不同的情况下，
                // 元素的nodeName是否相同来判断是哪一种文档对象。如果nodeName相同则为html对象，反之为XML对象。
        var isXML = function (doc) {
            return doc.createElement("p").nodeName != doc.createElement("P").nodeName;
        };

        var isHTMLElement = function (el) {
            if (isElement(el)) {
                return isXML(el.ownerDocument);
            }
            return false;
        };
    </script>
</head>
<body>
<div id="containerDiv">
    <div id="childDiv">childDiv</div>
</div>
<script type="text/javascript">
    var containerDiv=document.getElementById("containerDiv");
    var childDiv=document.getElementById("childDiv");
    var childTextDiv=childDiv.childNodes[0];
    //必须是元素节点
    console.log(containerDiv.contains(childDiv));
    console.log(childDiv.contains(childTextDiv));
    console.log(document.contains(childDiv)); //IE 下可能有问题

    function fixContains(a, b) {
        try {
            while ((b = b.parentNode)){
                if (b === a){
                    return true;
                }
            }
            return false;
        } catch (e) {
            return false;
        }
    }
</script>
</body>
</html>
posted on 2016-08-14 20:30 Herry彬阅读(508) 评论(0) 编辑收藏举报