如何判断元素是否为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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
原生JS实现自定义滚动条效果
Oct 27 Javascript
详谈js对url进行编码和解码(三种方式的区别)
Aug 16 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
随鼠标上下滚动的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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php中switch语句用法详解
2015/08/17 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
PHP精确计算功能示例
2016/11/29 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
js实现超级玛丽小游戏
2020/03/18 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python TKinter获取文本框内容的方法
2018/10/11 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
入党申请书自我鉴定
2013/10/12 职场文书
医院护士专业个人的求职信
2013/12/09 职场文书
论文致谢词范文
2015/05/14 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
python实现简单的聊天小程序
2021/07/07 Python
Python学习开发之图形用户界面详解
2021/08/23 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android