如何判断元素是否为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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
js实现简单点赞操作
Mar 17 Javascript
vue+springboot+element+vue-resource实现文件上传教程
Oct 21 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循环获取GET和POST值的代码
2008/04/09 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
PHP中file_exists()判断中文文件名无效的解决方法
2014/11/12 PHP
php 实现进制相互转换
2016/04/07 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
js格式化货币数据实现代码
2013/09/04 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
微信小程序 地图定位简单实例
2016/10/14 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
vue-cli入门之项目结构分析
2017/04/20 Javascript
JavaScript手风琴页面制作
2017/05/17 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
Python函数嵌套实例
2014/09/23 Python
Django分页功能的实现代码详解
2019/07/29 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
python 常见的反爬虫策略
2020/09/27 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
Ibatis如何调用存储过程
2015/05/15 面试题
中软Java笔试题
2012/11/11 面试题
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
常务副总经理任命书
2014/06/05 职场文书
法学求职信
2014/06/22 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
员工辞职信怎么写
2015/02/27 职场文书
公司考勤管理制度
2015/08/04 职场文书