<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>是否是有效的dom节点</title>

    <script type="text/javascript">

        //是否是节点（body有效）

        function isNode(elem) {

            var ts = Object.prototype.toString;

            var reg = /^(\[object HTML).*?(Element\])$/;

            var str = ts.call(elem);

            //IE8下body会识别成[object Object]

            if (reg.test(str)

                    || (elem !== undefined

                            && elem !== null

                            && elem.nodeName !== undefined

                            && elem.nodeName !== '#text'

                            && elem.nodeName !== '#document')) {

                return true;

            }

            return false;

        }

    </script>

</head>

<body>

<ul>

    <li>

        列表节点

    </li>

</ul>

<h4>单测结果输出：</h4>

<script type="text/javascript">

    //简单测试框架

    function test(testArr, expectArr, explain) {

        var tStr;

        for (var i = 0, len = testArr.length; i < len; i++) {

            if(explain && explain[i]){

                tStr = explain[i] + ' -> ' + expectArr[i] + ':';

            }

            if (isNode(testArr[i]) === expectArr[i]) {

                tStr += '成功';

            } else {

                tStr += '失败';

            }

            document.write(tStr + '<br />');

        }

    }

    // 对验证的说明

    var explain;

    //预期结果

    var expect;

    var ul = document.getElementsByTagName('ul')[0];

    var childNodes = ul.childNodes;

    if (childNodes.length == 3) {

        expect = [false, true, false];

        explain = [

            '标准浏览器下childNodes获取的换行文本节点',

            '标准浏览器下childNodes获取的Dom节点',

            '标准浏览器下childNodes获取的换行文本节点'

        ];

    } else {

        expect = [true];

        explain = ['IE下childNodes获取的Dom节点'];

    }

    test(childNodes, expect, explain);

    document.write('------------------------<br />');

    var testArr =

            [

                document,

                window,

                document.body,

                undefined,

                null,

                true,

                false,

                '' ,

                0,

                2 / 0,

                new Number(3),

                'str',

                new String('str'),

                new String('')

            ];

    expect =

            [

                false,

                false,

                true,

                false,

                false,

                false,

                false,

                false,

                false,

                false,

                false,

                false,

                false,

                false

            ];

    // 对验证的说明

    explain = [

        'document',

        'window',

        'document.body',

        'undefined',

        'null',

        'true',

        'false',

        '空字符串',

        '数字0',

        'NaN,如2/0',

        'new Number(3)',

        'str',

        'new String("str")',

        'new String("")'

    ];

    test(testArr, expect, explain);

    document.write('------------------------<br />');

    //这种变态构造就管不了了

    test([

        {nodeName: 'DIV'}

    ], [false]);

</script>

</body>

</html>

是否是有效的dom节点--轮子代码的更多相关文章

  1. 手动触发dom节点事件代码

    在爬代码过程中,碰到一个稀奇古怪的问题.需要手工修改select的值,然后手动触发select的change事件,但使用网络上查到的通过trigger.onchange()事件触发都不执行,没办法,只 ...

  2. DOM节点的使用（常用方法+代码）

    DOM节点的应用 学习总结 1. 什么是 DOM 2. HTMLDOM 3. 元素获取 元素获取方式 元素节点的属性操作 4. Node 对象的属性和方法 常用属性 常用方法 5. 事件处理 事件驱动 ...

  3. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  4. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  5. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  6. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

  7. 第6章 DOM节点操作

    一．创建节点 为了使页面更加智能化,有时我们想动态的在 html 结构页面添加一个元素标签,那么 在插入之前首先要做的动作就是:创建节点. varbox=$('<div id="box ...

  8. 通过DOM节点操作来获取表单信息

    这是之前突发奇想地用dom节点的关系来操作表单的故事.. 事情的经过是这样的,大概就是一个平台注册后有留言功能,管理员登录之后可以对这些留言进行回复.这个页面呢,就是通过foreach获取到数据库里的 ...

  9. 关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案--黄丕巧

    1.移动端开发往往需要添加一下自定义的左右滑动事件,但是添加了左右滑动事件之后就要阻止浏览器大默认事件,否则dom节点的滑动事件和浏览器本身的滑动会出现冲突,导致滑动的时候会出现消失瞬间再出现的效果 ...

随机推荐

  1. 关于C++中vector和set使用sort方法进行排序

    C++中vector和set都是非常方便的容器, sort方法是algorithm头文件里的一个标准函数,能进行高效的排序,默认是按元素从小到大排序 将sort方法用到vector和set中能实现多种 ...

  2. java中表示二进制、八进制、十进制、十六进制

    1.进制 进制是一种记数方式 ,可以用有限的数字符号代表所有的数值.由特定的数值组成. 2.进制的表现形式 二进制: 由0和1两个数字组成. 八进制: 由0-7数字组成,为了区分与其他进制的数字区别, ...

  3. PgSql on Docker with HaProxy 反向代理

    Run PgSql on Docker as Remote Db docker run -d -it \ --name pgdb \ -p 5432:5432 \ -e POSTGRES_USER=p ...

  4. DataProtection Key的选择

    代码位于: Microsoft.AspNetCore.DataProtection.KeyManagement.DefaultKeyResolver.cs private IKey FindDefau ...

  5. 3Sum探讨（Java）

    探讨一下leetcode上的3Sum: Given an array S of n integers, are there elements a, b, c in S such that a + b  ...

  6. linux下mysql启动出错

    1.刚安装完就启动出错,是因为没有开msql服务,开启即可,service mysql start 2.MySQL: mysql is not running but lock exists rm / ...

  7. [转载] Java并发编程：Callable、Future和FutureTask

    转载自http://www.cnblogs.com/dolphin0520/p/3949310.html 在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Run ...

  8. [转载] 多图详解Spring框架的设计理念与设计模式

    转载自http://developer.51cto.com/art/201006/205212_all.htm Spring作为现在最优秀的框架之一,已被广泛的使用,51CTO也曾经针对Spring框 ...

  9. VueJS使用笔记

    html: <script src='vue.js'></script> <div id='app'> <span>{{msg}}</span&g ...

  10. [转] 深刻理解Python中的元类(metaclass)

    非常详细的一篇深入讲解Python中metaclass的文章,感谢伯乐在线-bigship翻译及作者,转载收藏. 本文由 伯乐在线 - bigship 翻译.未经许可,禁止转载!英文出处:stacko ...