如何判斷元素是否為HTMLElement元素
我們經(jīng)常使用nodeType==1判斷元素是否是一個HMTLElement元素。頁面上的元素都是節(jié)點(Node)，有元素節(jié)點(Element Node)、屬性節(jié)點(Attribute Node)、文本節(jié)點(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節(jié)點元素。下面通過對象特性及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)文章
有一個數(shù)n=5，不用for循環(huán)，怎么返回[1,2,3,4,5]這樣一個數(shù)組2010-10-10
這篇文章主要為大家詳細(xì)介紹了layui實現(xiàn)下拉框三級聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家介紹了JavaScript中的聲明提升實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
原生JS實現(xiàn)的多個彩色小球跟隨鼠標(biāo)移動動畫效果示例
這篇文章主要介紹了原生JS實現(xiàn)的多個彩色小球跟隨鼠標(biāo)移動動畫效果,涉及javascript事件響應(yīng)、頁面元素屬性動態(tài)修改及隨機數(shù)應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
JavaScript中的boolean布爾值使用學(xué)習(xí)及相關(guān)技巧講解
JavaScript中的boolean布爾值使用學(xué)習(xí)及相關(guān)技巧講解,特別是Boolean的用法以及適用!!將truthy或falsy值轉(zhuǎn)換為布爾值的用法非常巧妙,需要的朋友可以參考下2016-05-05
JavaScript詳解使用Promise處理回調(diào)地獄與async?await修飾符
這篇文章主要介紹了JavaScript使用Promise處理回調(diào)地獄與async?await修飾符，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
JS驗證控制輸入中英文字節(jié)長度(input、textarea等)具體實例
JS驗證控制輸入中英文字節(jié)長度(input、textarea等)具體實例，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了微信小程序在ios下Echarts圖表不能滑動的解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,下面我們來一起學(xué)習(xí)下吧2019-07-07
這篇文章主要介紹了JS實現(xiàn)日期時間動態(tài)顯示的方法,涉及JavaScript基于時間函數(shù)定時操作頁面元素屬性的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下2015-12-12
本篇文章主要是對JS過濾url參數(shù)特殊字符的實現(xiàn)方法進行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12