如何判断元素是否为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-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
详解JavaScript中数组的相关知识
Jul 29 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
js自定义瀑布流布局插件
May 16 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
js简单实现自动生成表格功能示例
Jun 02 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
桌面中心(一)创建数据库
2006/10/09 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
jQuery 常见学习网站与参考书
2009/11/09 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
2012/10/11 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
2018/12/07 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
[42:11]TNC vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python import用法以及与from...import的区别
2015/05/28 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
Python hashlib模块用法实例分析
2018/06/12 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
Python学习笔记之抓取某只基金历史净值数据实战案例
2019/06/03 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
链表面试题-一个链表的结点结构
2015/05/04 面试题
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
2021/05/26 Servers