如何判断元素是否为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 相关文章推荐
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
利用JS制作万年历的方法
Aug 16 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
vue prop传值类型检验方式
Jul 30 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
React四级菜单的实现
Apr 08 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 小乘法表实现代码
2009/07/16 PHP
PHP错误Cannot use object of type stdClass as array in错误的解决办法
2014/06/12 PHP
php字符串函数学习之substr()
2015/03/27 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
2014/07/31 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
微信小程序WebSocket实现聊天对话功能
2018/07/06 Javascript
jQuery实现的点击显示隐藏下拉菜单功能完整示例
2019/05/17 jQuery
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
使用python加密自己的密码
2015/08/04 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
Django如何配置mysql数据库
2018/05/04 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Numpy之random函数使用学习
2019/01/29 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
给领导的致歉信范文
2014/01/13 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
2014年变电站工作总结
2014/12/19 职场文书
董事长开业致辞
2015/07/29 职场文书