<!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. 0_Simple__cdpSimplePrint + 0_Simple__cdpSimpleQuicksort

    CUDA动态并行的简单实践,以及利用CUDA动态并行实现快排算法(有单线程的递归调用) ▶ 源代码:动态并行递归调用线程块 #include <iostream> #include < ...

  2. .net中LAMBDA表达式常用写法

    这里主要是将数据库中的常用操作用LAMBDA表达式重新表示了下,用法不多,但相对较常用,等有时间了还会扩展,并将查询语句及LINQ到时也一并重新整理下: 1.select语句:books.Select ...

  3. Socket网络编程之概述理解

    今天主要讲讲什么是socket网络编程 socketde 英文原义是"孔"或者"插座".是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机 ...

  4. vue打包之后生成一个配置文件修改接口

    前言: 我们的vue代码打包上传到服务器之后, 要是数据接口 以后换了域名什么的,是不是需要重新去vue文件里修改接口. 能不能生成一个配置文件,里面可以配置域名或其它什么字段之类的,这样以后换了域名 ...

  5. linux如何查看端口被谁占用

    1.查看端口是否被占用 [guosong@alice48 main]$ netstat -nlp|grep 6184 (Not all processes could be identified, n ...

  6. MySQL子查询优化实例

    优化:子查询改写成关联查询 线上遇到问题,查询较慢,如为对应SQL的查询执行计划: localhost.\G . row *************************** id: select_ ...

  7. LSF-SCNN：一种基于 CNN 的短文本表达模型及相似度计算的全新优化模型

    欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 本篇文章是我在读期间,对自然语言处理中的文本相似度问题研究取得的一点小成果.如果你对自然语言处理 (natural language proc ...

  8. 十四、Hadoop学习笔记————Zookeeper概述与基本概念

    顺序一致性:严格按照顺序在zookeeper上执行 原子性:所有事物请求的结果,在整个集群的应用情况一致 单一视图:无论从哪个服务器进入集群,看到的东西都是一致的 可靠性:服务端成功响应后,状态会 一 ...

  9. NodeJS网络爬虫

      原文地址:NodeJS网络爬虫   网上有很多其他语言平台版本的网络爬虫,比如Python,Java.那怎么能少得了我们无所不能的javascript呢

  10. appium+Android studio安装与配置

    一. 关于JDK 安装,以及Java环境的设置 1.下载JDK1.6,选择对应的安装路径 2.配置相应的Java 环境变量 A.属性名称:JAVA_HOME (sdk的安装目录) 属性值:C:Prog ...