<!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. <template> 标签

    <template> 元素,用于描述一个标准的以 DOM 为基础的方案来实现客户端模板.该模板允许你定义一段可以被转为 HTML 的标记,在页面加载时不生效,但可以在后续进行动态实例化.( ...

  2. Cache 和 Buffer 都是缓存，主要区别是什么？

    存储器的高速缓冲存储器存储了频繁访问的RAM位置的内容及这些数据项的存储地址.当处理器引用存储器中的某地址时,高速缓冲存储器便检查是否存有该地址.如果存有该地址,则将数据返回处理器;如果没有保存该地址 ...

  3. 开发环境MAPLAB下使用仿真器ICD2程序下载流程

    程序下载流程 一.    连接示意图 二.    下载步骤 1.目标板电源断开 2.将仿真器下载端口与电路板JTAG端口有效连接 3.启动MPLAB软件 4.点击MAPLAB软件上方Programme ...

  4. Java钉钉开发_03_通讯录管理之 人员管理 和 部门管理

    一.本节要点 1.通讯录权限 ISV(应用服务商)默认无管理通讯录的权限,企业应用默认有所有通讯录权限. 2.数据传输格式—JSON 请参见: Java_数据交换_fastJSON_01_用法入门 二 ...

  5. Java8一：Lambda表达式教程

    1. 什么是λ表达式 λ表达式本质上是一个匿名方法.让我们来看下面这个例子: public int add(int x, int y) {         return x + y;     } 转成 ...

  6. 细谈昆明SEO市场

    就在前几天,以前的同事跟我说,现在昆明SEO市场真的是烂到不行,每家公司在招SEO这个方向的时候,给到的工资都很低,接着这几天闲来无事,就在某个招聘平台上注册了个账号,投了将近100份简历,专门去面试 ...

  7. Spring MVC体系结构和处理请求控制器

    Spring MVC体系结构和处理请求控制器 一:MVC设计模式: (1.)数据访问接口:DAO层 (2.)处理业务逻辑层:Service层 (3.)数据实体:POJO (4.)负责前段请求接受并处理 ...

  8. Maven依赖解析

    本文将记录Maven工程中依赖解析机制,内容包括: Maven依赖基本结构 从仓库解析依赖的机制 依赖传递性解析实例 1. Maven依赖基本结构 上篇文章记录了Maven依赖的聚合与继承,POM中依 ...

  9. GameObject类及相关API

    GameObject.Find(String name):查找一个名为name的游戏物体,并返回这个游戏物体,找不到返回null.(不到万不得已,不要在Update()中使用,建议在Start()中使 ...

  10. 《java.util.concurrent 包源码阅读》07 LinkedBlockingQueue

    这篇文章来说说稍微复杂一些的LinkedBlockingQueue.LinkedBlockingQueue使用一个链表来实现,会有一个head和tail分别指向队列的开始和队列的结尾.因此Linked ...