<!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. Codeforces Round #383 (Div. 2)C. Arpa's loud Owf and Mehrdad's evil plan

    C. Arpa's loud Owf and Mehrdad's evil plan time limit per test 1 second memory limit per test 256 me ...

  2. Linux学习（十六）VIM

    一.简介 VIM是vi的增强版.VIM是Linux平台上的主要编辑器.基本上所有的文档的新增,修改,保存都需要用到它.所以,掌握VIM是很有必要的. vim的安装非常简单,一条命令就可以了: yum ...

  3. javascript中数组与字符串之间的转换以及字符串的替换

    数组转化为字符串: var a=['aa','bb','cc']; var b=a.join('-'); console.log(b)----->'aa-bb-cc' 字符串中的替换: 1.re ...

  4. defaultView and parentWindow

    defaultView     只读的 which is used to represent the currently rendered view of the document 返回的值通常是包含 ...

  5. openstack学习心得：glance 架构、概念、后端存储配置方式

    glance 架构 glance 服务概述 Image 服务 使得用户可以发现.注册.检索虚拟机镜像.它对外提供REST API使得你能够查询虚拟机镜像元数据和检索一个真实的镜像.你可以通过镜像服务将 ...

  6. 分享一个单例模型类Singleton代码

    相关代码: ;                foreach (string key in dict.Keys)                {                    if (cou ...

  7. 利用Pycharm本地调试spark-streaming（包含kafka和zookeeper等操作）

    环境准备就不说了! 第一步:打开Pycharm,在File->Setting->Project Structure中点击Add Content Root 添加本地python调用java和 ...

  8. [收藏] Java源码阅读的真实体会

    收藏自http://www.iteye.com/topic/1113732 刚才在论坛不经意间,看到有关源码阅读的帖子.回想自己前几年,阅读源码那种兴奋和成就感(1),不禁又有一种激动. 源码阅读,我 ...

  9. TCollector

    TCollector tcollector is a client-side process that gathers data from local collectors and pushes th ...

  10. SpringMVC注解HelloWorld

    今天整理一下SpringMVC注解 欢迎拍砖 @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是 ...