`

判断元素是否为HTMLElement元素【转载】

阅读更多

地址:http://www.cnblogs.com/snandy/archive/2011/03/12/1981516.html

我们经常使用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属性呢?如

1 var obj = {nodeType:1};
2 function isHTMLElement(obj){
3     if(obj.nodeType){
4         return obj.nodeType==1;
5     }
6 }
7 isHTMLElement(obj);//true

以上isHTMLElement(obj)返回true,但obj明显不是一个HTML节点元素。下面通过对象特性及try-catch语句来判断。

01 function isHTMLElement(obj){
02     var d = document.createElement("div");
03     try{
04         d.appendChild(obj.cloneNode(true));
05         return obj.nodeType==1?true:false;
06     }catch(e){
07         return false;
08     }
09 }
10 var obj1 = {nodeType:1};
11 var obj2 = document.createTextNode("hello");
12 var obj2 = document.createElement("p");
13 isHTMLElement(obj1);//false
14 isHTMLElement(obj2);//false
15 isHTMLElement(obj3);//true

对于window和document还要特别处理下

01 function isHtmlControl(obj) { 
02   
03     var d = document.createElement("div");
04     try{
05         d.appendChild(obj.cloneNode(true));
06         return obj.nodeType==1 ? true : false;
07     }catch(e){
08         return obj==window || obj==document;
09     }
10 }  
分享到:
评论

相关推荐

    如何判断元素是否为HTMLElement元素

    在JavaScript中,我们经常需要判断一个对象是否是HTMLElement类型,这在处理DOM操作时尤为重要。HTMLElement是HTML元素的基类,表示所有HTML元素的抽象基类。为了确定一个对象是否属于这个类型,我们通常会检查其`...

    dom-contains:确定一个HTMLElement是否为或包含另一个HTMLElement

    确定一个HTMLElement是否为或包含另一个HTMLElement。 这是一个CommonJS的克隆 。 var contains = require ( 'dom-contains' ) ; 包含(元素,针) 返回一个布尔值。 element是否为needle或包含needle 。 元素 ...

    如何优雅的迭代htmlElement元素

    这篇博客“如何优雅的迭代htmlElement元素”提供了关于高效且整洁地遍历HTML元素的方法。通过学习这些技巧,开发者可以更好地控制页面上的元素操作,提高代码的可读性和维护性。 在JavaScript中,遍历HTML元素通常...

    is-dom-element2:确定对象是否为HTMLElement(来自任何领域)

    确定对象是否为HTMLElement (来自任何Realm )。 安装 >= 10 。 要安装,请在命令行中输入以下命令: npm install is-dom-element 输入 ES模块: import isDOMElement from 'is-dom-element' ; CommonJS模块:...

    将HTML格式的String转化为HTMLElement的实现方法

    然后,通过设置`el.innerHTML`属性,我们可以将HTML字符串赋值给这个元素,从而将其转化为包含HTML结构的HTMLElement。 ```javascript el.innerHTML = '<html>...</html>'; ``` 在这个过程中,`innerHTML`属性将...

    连续操作HTMLElement对象图文解决方法.docx

    - 利用CSS的`transition`和`animation`属性,可以为HTMLElement对象创建平滑的过渡效果。 - JavaScript库如jQuery提供`.animate()`方法,方便进行复杂的动画操作。 7. **DOM操作注意事项**: - 当在事件处理函数...

    如何判断出一个js对象是否一个dom对象

    总结来说,通过判断JavaScript对象是否具有DOM元素的特定属性或是否为HTMLElement的实例,我们可以有效地判断该对象是否是DOM对象。需要注意的是,由于不同浏览器可能存在不同的实现差异,一个健壮的判断方法应当...

    连续操作HTMLElement对象图文解决方法

    在实际编程中,我们经常需要对`HTMLElement`对象进行一系列的操作,例如添加子元素、设置属性、修改样式等。然而,有些开发者可能尝试在`HTMLElement`对象上使用`Object.prototype`上的方法,却发现这些方法不起作用...

    WindrunnerMax#EveryDay#HTMLElement对象1

    * HTMLElement.offsetLeft: 只读,返回一个double值,即从此元素的左边界到offsetParent的左边界的距离。* HTMLEle

    所有关于HTML自定义元素

    在JavaScript开发中,自定义元素是通过结合使用`document.registerElement()`(旧方法)或`class extends HTMLElement`(现代方法)来创建的。 自定义元素的核心在于它的定义方式。在旧的实现中,我们使用`document...

    react-使用自定义元素将React组件挂载到DOM

    在JavaScript中,我们可以利用`class extends HTMLElement`来定义一个自定义元素,然后通过`customElements.define()`方法注册这个元素,使其成为浏览器可识别的组件。 要将React组件挂载到自定义元素上,我们需要...

    shadow:Shadow是从HTMLElement继承的Web组件和自定义元素的基类

    Shadow是从HTMLElement继承的Web组件和自定义元素的基类。 快速开始 编译example/my_example.ts : deno bundle --config example/tsconfig.json example/my_example.ts > example/my_example.js 服务index.html...

    dom-max-size:确定HTMLElement的最大可伸缩尺寸

    确定HTMLElement的最大可伸缩尺寸。 该库的工作方式在目标元素之前添加一个较大,并强制进行。 因此,不支持,因为它们永远不能包含该子。 另外,由于没有渲染光树,因此不自动支持具有shadowRoot元素,但是有一种...

    网页元素查看

    网页元素查看是一个与Visual Basic(VB)相关的项目,旨在帮助用户分析浏览器中的网页元素,并生成引用这些元素的VB代码。这个工具可能对于Web开发者或自动化测试工程师尤其有用,因为他们经常需要与网页元素交互,...

    用于创建自定义元素的Boilerplate

    这个名为"用于创建自定义元素的Boilerplate"的项目,显然是一个基础模板,帮助开发者快速上手自定义元素的开发。 在JavaScript开发中,自定义元素通过`class extends HTMLElement`来定义,这是基于ES6的类语法。...

    HTML5 元素通用DOM接口

    这些属性允许开发者为元素绑定特定类型的事件监听器。例如: ```javascript element.onblur = function() { console.log('元素失去焦点'); }; ``` 通过以上内容可以看出,`HTMLElement`接口提供了丰富的功能...

    regularElements将任何节点或通过CSS选择器选中的节点作为自定义元素

    在JavaScript和Web开发中,`regularElements`是一个实用的工具,它允许开发者将任何DOM节点或者通过CSS选择器选取的节点转换为自定义元素。这个功能对于构建可复用、可扩展的组件以及提高页面性能至关重要。下面我们...

    [网络]WebBrowser网页操作(提取元素,自动填表)

    总结,C#中的`WebBrowser`控件为我们提供了在应用程序中嵌入网页浏览功能,并且能够进行元素提取和自动填表。开发者可以通过理解HTML结构,结合`HtmlDocument`对象的方法,实现对网页的控制和自动化操作。然而,对于...

    babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5.zip

    babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5 babel-plugin-transform-custom-element-classes编译扩展了ES5环境的HTMLElement的自定义元素类。问题自定义元素是针对原生ES6类...

Global site tag (gtag.js) - Google Analytics