如何判断元素是否为HTMLElement元素


Posted in Javascript onDecember 06, 2013

我们经常使用nodeType==1判断元素是否是一个HMTLElement元素。页面上的元素都是节点(Node),有元素节点(Element Node)、属性节点(Attribute Node)、文本节点(Text Node)等。w3c nodeType 的定义如下

const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;

但如果我们自定义的对象也包含nodeType属性呢?如

var obj = {nodeType:1}; 
function isHTMLElement(obj){ 
    if(obj.nodeType){ 
        return obj.nodeType==1; 
    } 
} 
isHTMLElement(obj);//true

以上isHTMLElement(obj)返回true,但obj明显不是一个HTML节点元素。下面通过对象特性及try-catch语句来判断。
function isHTMLElement(obj){ 
    var d = document.createElement("div"); 
    try{ 
        d.appendChild(obj.cloneNode(true)); 
        return obj.nodeType==1?true:false; 
    }catch(e){ 
        return false; 
    } 
} 
var obj1 = {nodeType:1}; 
var obj2 = document.createTextNode("hello"); 
var obj2 = document.createElement("p"); 
isHTMLElement(obj1);//false 
isHTMLElement(obj2);//false 
isHTMLElement(obj3);//true

对于window和document还要特别处理下
function isHtmlControl(obj) {      var d = document.createElement("div"); 
    try{ 
        d.appendChild(obj.cloneNode(true)); 
        return obj.nodeType==1 ? true : false; 
    }catch(e){ 
        return obj==window || obj==document; 
    } 
} 
Javascript 相关文章推荐
在JavaScript中,为什么要尽可能使用局部变量?
Apr 06 Javascript
angularjs基础教程
Dec 25 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
Vue 过滤器filters及基本用法
Dec 26 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
JS实现随机点名器
Apr 12 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
详解CocosCreator消息分发机制
Apr 16 Javascript
随鼠标上下滚动的jquery代码
Dec 05 #Javascript
js简单实现删除记录时的提示效果
Dec 05 #Javascript
Jquery 切换不同图片示例代码
Dec 05 #Javascript
jquery 快速回到页首的方法
Dec 05 #Javascript
JS验证邮箱格式是否正确的代码
Dec 05 #Javascript
javascript eval(func())使用示例
Dec 05 #Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 #Javascript
You might like
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP结合Ffmpeg快速搭建流媒体服务的实践记录
2018/10/31 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
深入理解jQuery中的事件冒泡
2016/05/24 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
Bootstrap模态框使用详解
2017/02/15 Javascript
vue 使用eventBus实现同级组件的通讯
2018/03/02 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
用Python 执行cmd命令
2020/12/18 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
软件测试工程师面试问题精选
2016/10/28 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
企业党员公开承诺书
2014/03/26 职场文书
2015关爱留守儿童工作总结
2014/12/12 职场文书
2015年全国“爱牙日”宣传活动总结
2015/03/23 职场文书
2015年业务员工作总结范文
2015/04/07 职场文书
学生病假条范文
2015/08/17 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL