如何判断元素是否为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定时器和优化的取消定时器方法
Jul 03 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
Nov 05 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
React SSR样式及SEO的实践
Oct 22 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
前端JavaScript大管家 package.json
Nov 02 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 进程锁定问题分析研究
2009/11/24 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
浅谈php处理后端&接口访问超时的解决方法
2016/10/29 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
2015/08/17 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
layer实现弹窗提交信息
2016/12/12 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
探索webpack模块及webpack3新特性
2017/09/18 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
2019/06/21 Javascript
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
python 读取文件并替换字段的实例
2018/07/12 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
教师试用期自我鉴定
2014/02/12 职场文书
党员承诺书格式
2014/05/21 职场文书
会计毕业生自荐书
2014/06/12 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
公司委托书范本5篇
2014/09/20 职场文书
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers