如何判断元素是否为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 EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 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 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
微信小程序 页面跳转传参详解
2016/10/28 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
对node.js中render和send的用法详解
2018/05/14 Javascript
使用Vue自定义指令实现Select组件
2018/05/24 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
js 函数性能比较方法
2020/08/24 Javascript
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
python Pygame的具体使用讲解
2017/11/03 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python实现趣味图片字符化
2019/04/30 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python groupby 函数 as_index详解
2019/12/16 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
开办饭店创业计划书
2013/12/28 职场文书
揠苗助长教学反思
2014/02/04 职场文书
企业年会主持词
2014/03/27 职场文书
股份转让协议书范本
2015/01/27 职场文书
谁动了我的奶酪读书笔记
2015/06/30 职场文书
担保书怎么写 ?
2019/04/22 职场文书
JS监听Esc 键触发事键
2021/04/14 Javascript
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
python关于集合的知识案例详解
2021/05/30 Python