如何判断元素是否为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 相关文章推荐
js传值 判断
Oct 26 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
使用原生js写ajax实例(推荐)
May 31 Javascript
原生JS实现多个小球碰撞反弹效果示例
Jan 31 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
node.js文件的复制、创建文件夹等相关操作
Feb 05 Javascript
JavaScript实现前端网页版倒计时
Mar 24 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基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
php的hash算法介绍
2014/02/13 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
phpMyAdmin安装并配置允许空密码登录
2015/07/04 PHP
使用PHP编写发红包程序
2015/07/22 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
js下写一个事件队列操作函数
2010/07/19 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
2013/04/24 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
python基础知识小结之集合
2015/11/25 Python
VSCode Python开发环境配置的详细步骤
2019/02/22 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
基于Python实现简单学生管理系统
2020/07/24 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
美国女孩服装购物网站:Justice
2017/03/04 全球购物
来自世界各地的优质葡萄酒:VineShop24
2018/07/09 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
就业协议书怎么填
2014/09/15 职场文书
英文自荐信范文
2015/03/25 职场文书
公司新员工欢迎词
2015/09/30 职场文书
python OpenCV学习笔记
2021/03/31 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
关于SpringBoot 使用 Redis 分布式锁解决并发问题
2021/11/17 Redis
Win11自动黑屏怎么办 Win11自动黑屏设置教程
2022/07/15 数码科技
SQLServer常见数学函数梳理总结
2022/08/05 MySQL