如何判断元素是否为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高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
jQuery往返城市和日期查询实例讲解
Oct 09 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
Aug 06 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 一个比较完善的简单文件上传
2010/03/25 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
jQuery 表格插件整理
2010/04/27 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
JS实现前端缓存的方法
2017/09/21 Javascript
AngularJs ng-change事件/指令的用法小结
2017/11/01 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
[02:30]DOTA2放量测试专访海涛:呼吁保护新手玩家
2013/08/26 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
详解python算法之冒泡排序
2019/03/05 Python
python和c语言的主要区别总结
2019/07/07 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
python实现梯度下降法
2020/03/24 Python
大学新闻系应届生求职信
2014/06/02 职场文书
建筑安全标语
2014/06/07 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
python周期任务调度工具Schedule使用详解
2021/11/23 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技