如何判断元素是否为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实现自定义对话框的代码
Jun 15 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 Javascript
JavaScript设计模式之装饰者模式实例详解
Jan 17 Javascript
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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
一个简单实现多条件查询的例子
2006/10/09 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
浅析is_writable的php实现
2013/06/18 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
SVG描边动画
2017/02/23 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
2017/06/29 Javascript
运用jQuery写的验证表单(实例讲解)
2017/07/06 jQuery
浅析vue中的MVVM实现原理
2019/03/04 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
微信小程序实现圆形进度条动画
2020/11/18 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
基于jquery ajax的多文件上传进度条过程解析
2019/09/11 jQuery
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
python进阶教程之模块(module)介绍
2014/08/30 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
Python标准库json模块和pickle模块使用详解
2020/03/10 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
机电专业毕业生求职信
2013/10/27 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
学习雷锋活动总结
2014/04/29 职场文书
超市理货员岗位职责
2014/07/04 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
聘任通知书
2015/09/21 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Python中如何处理常见报错
2022/01/18 Python