如何判断元素是否为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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
JS实现选项卡效果的代码实例
May 20 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
微信小程序实现列表的横向滑动方式
Jul 15 Javascript
JavaScript中的几种继承方法示例
Dec 06 Javascript
什么是SOLID
Mar 24 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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
JS 统计时间
2021/03/09 Javascript
DOM相关内容速查手册
2007/02/07 Javascript
学习ExtJS border布局
2009/10/08 Javascript
JavaScript 计算图片加载数量的代码
2011/01/01 Javascript
再谈javascript面向对象编程
2012/03/18 Javascript
Jquery 模板数据绑定插件的使用方法详解
2013/07/08 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
Vue.js实现实例搜索应用功能详细代码
2017/08/24 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Python实现读取txt文件并画三维图简单代码示例
2017/12/09 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
Python FFT合成波形的实例
2019/12/04 Python
爱尔兰电子产品购物网站:Komplett.ie
2018/04/04 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
考博专家推荐信模板
2013/12/02 职场文书
写给女朋友的道歉信
2014/01/12 职场文书
学校社会实践活动总结
2014/07/03 职场文书
2016高考感言
2015/08/01 职场文书
2015年圣诞节寄语
2015/08/17 职场文书