<!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. 2016 ACM/ICPC Asia Regional Dalian Online Football Games

    Football Games Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  2. 助你了解react的小demo

    React是个啥 React 是一个用于构建用户界面的 JAVASCRIPT 库. React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebo ...

  3. Log4j – Configuring Log4j 2 - Log4j 2的配置

    Configuration Inserting log requests into the application code requires a fair amount of planning an ...

  4. JavaNIO阻塞IO添加服务器反馈

    package com.java.NIO; import java.io.IOException; import java.net.InetSocketAddress; import java.nio ...

  5. JavaScript中把Json字符串转化为对象

    1.采用eval()函数 定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串, ...

  6. POI不同版本替换Word模板时的问题

    一.问题描述 通过POI,把Word中的占位符替换为实际的值,以生成复杂结构的业务报告. 在POI 3.9上,功能正常.由于某些原因升级到POI 3.10.1后,项目组反馈说Word模板出错,无法生成 ...

  7. Python爬虫入门：URLError异常处理

    大家好,本节在这里主要说的是URLError还有HTTPError,以及对它们的一些处理. 1.URLError 首先解释下URLError可能产生的原因: 网络无连接,即本机无法上网 连接不到特定的 ...

  8. Python文件夹备份

    Python文件夹备份 import os,shutil def file_copy(path1,path2): f2 = [filename1 for filename1 in os.listdir ...

  9. Container With Most Water 容器最大水容量

    描述 Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...

  10. java的linux命令

    1.查找文件find / -name filename.txt 根据名称查找/目录下的filename.txt文件.find . -name “*.xml” 递归查找所有的xml文件2.查看一个程序是 ...