如何判断元素是否为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 相关文章推荐
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
Sep 13 Javascript
JS前端加密算法示例
Dec 22 Javascript
js实现多张图片延迟加载效果
Jul 17 Javascript
用element的upload组件实现多图片上传和压缩的示例代码
Feb 12 Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
JS实现滑动插件
Jan 15 Javascript
Vue3 Composition API的使用简介
Mar 29 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
php执行sql语句的写法
2009/03/10 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
Javascript继承机制的设计思想分享
2011/08/28 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
2013/06/16 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
在Django中创建动态视图的教程
2015/07/15 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python实现聊天小程序
2018/03/13 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
JAVA代码查错题
2014/10/10 面试题
几道Web/Ajax的面试题
2016/11/05 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
导购员的岗位职责
2014/02/08 职场文书
《去年的树》教学反思
2014/04/11 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
解除租赁合同协议书
2016/03/21 职场文书
动画「半妖的夜叉姬」新BD特典图公开
2022/03/22 日漫
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
SQL试题 使用窗口函数选出连续3天登录的用户
2022/04/24 Oracle