zoukankan      html  css  js  c++  java
  • 判断元素阶段类型

    兼容IE

    1.判断元素节点

    <body>
      <div id="test">aaa</div>
      <!--这是一个注释节点-->
      <script> var testDiv = document.createElement('div'); var isElement = function (obj) { if (obj && obj.nodeType === 1) {//先过滤最简单的 if( window.Node && (obj instanceof Node )){ //如果是IE9,则判定其是否Node的实例 return true; //由于obj可能是来自另一个文档对象,因此不能轻易返回false } try {//最后以这种效率非常差但肯定可行的方案进行判定 testDiv.appendChild(obj); testDiv.removeChild(obj); } catch (e) { return false; } return true; } return false; } var a = { nodeType: 1 } console.log(isElement(document.getElementById("test"))); //true console.log(isElement(document.getElementById("test").nextSibling));//false console.log(isElement(a));//false </script>
    </body>

    2.判断XML文档类型

    <body>
        <script>
            var isXML = function(doc) {
                return doc.createElement("p").nodeName !== doc.createElement("P").nodeName;
            }
    console.log(isXML(document)) //false </script> </body>

    3.判断HTML文档类型

    <body>
        <script>
            var isHTML = function(doc) {
                return doc.createElement("p").nodeName == doc.createElement("P").nodeName;
            }
            console.log(isHTML(document))  //true
        </script>
    </body>

    4.判断两种关系的元素节点

    <body>
        <div id="p-node">
            <div id="c-node">子节点内容</div>
        </div>
        <script>
            function fixContains(a, b) {
                try {
                    while ((b = b.parentNode)){
                        if (b === a){
                            return true;
                        }
                    }
                    return false;
                } catch (e) {
                    return false;
                }
            }
            var pNode = document.getElementById("p-node");
            var cNode = document.getElementById("c-node").childNodes[0];
            alert(fixContains(pNode, cNode)); //true        
    //alert(fixContains(document, cNode)); //true </script> </body>
  • 相关阅读:
    vue 路由
    CSS篇-dispaly、position、定位机制、布局、盒子模型、BFC
    CSS篇-样式表、选择器、权重、伪类
    vue-cli3.0 开发环境构建
    Vue 全家桶学习资源(转)
    vue全家桶常用命名
    服务拆分
    分布式事务及其解决方法
    java mvc 及其缓存
    java 面试经典题
  • 原文地址:https://www.cnblogs.com/yulingjia/p/6515089.html
Copyright © 2011-2022 走看看