如何判断元素是否为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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
JS常用正则表达式总结
Nov 12 Javascript
js判断是否为ie的方法小结
Jan 13 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
详解Vue双向数据绑定原理解析
Sep 11 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
vue滚动tab跟随切换效果
Jun 29 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
随鼠标上下滚动的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
模仿OSO的论坛(一)
2006/10/09 PHP
PHP入门学习笔记之一
2010/10/12 PHP
php 定义404页面的实现代码
2012/11/19 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
JavaScript中创建类/对象的几种方法总结
2013/11/29 Javascript
Javascript中的Array数组对象详谈
2014/03/03 Javascript
JavaScript实现简单图片翻转的方法
2015/04/17 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
2015/12/04 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
2016/08/02 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Angular的$http与$location
2016/12/26 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
layui form表单提交后实现自动刷新
2019/10/25 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
基于Pyinstaller打包Python程序并压缩文件大小
2020/05/28 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
linux面试题参考答案(11)
2012/05/01 面试题
应届生会计求职信
2013/11/11 职场文书
幼儿园家长会欢迎词
2014/01/09 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
股权转让意向书
2014/04/01 职场文书
教师考核鉴定意见
2015/06/05 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript