如何判斷元素是否為HTMLElement元素
我們經(jīng)常使用nodeType==1判斷元素是否是一個(gè)HMTLElement元素。頁面上的元素都是節(jié)點(diǎn)(Node),有元素節(jié)點(diǎn)(Element Node)、屬性節(jié)點(diǎn)(Attribute Node)、文本節(jié)點(diǎn)(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明顯不是一個(gè)HTML節(jié)點(diǎn)元素。下面通過對象特性及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;
}
}
相關(guān)文章
js實(shí)現(xiàn)將json數(shù)組顯示前臺table中
本文主要介紹了把JSON數(shù)組顯示在前臺的table中的方法。具有一定的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01學(xué)習(xí)JavaScript設(shè)計(jì)模式(單例模式)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式,其中重點(diǎn)介紹單例模式,舉例說明單例模式的技術(shù)、弊端等,對單例模式進(jìn)行詳細(xì)剖析,感興趣的小伙伴們可以參考一下2015-11-11uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟
本文主要介紹了uni-app?微信小程序授權(quán)登錄的實(shí)現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01拖動Html元素集合 Drag and Drop any item
拖動Html元素集合 Drag and Drop any item...2006-12-12js 針對html DOM元素操作等經(jīng)驗(yàn)累積
這篇文章主要介紹了js 針對html DOM元素操作等經(jīng)驗(yàn)累積,需要的朋友可以參考下2014-03-03怎樣用JavaScript實(shí)現(xiàn)觀察者模式
這篇文章主要介紹了怎樣用JavaScript實(shí)現(xiàn)觀察者模式,想學(xué)習(xí)設(shè)計(jì)模式的同學(xué),可以參考一下2021-04-04Javascript正則控制文本框只能輸入整數(shù)或浮點(diǎn)數(shù)
這篇文章主要介紹Javascript正則如何控制文本框只能輸入整數(shù)或浮點(diǎn)數(shù),需要的朋友可以參考下2014-09-09