地址: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){
|
4 |
return obj.nodeType==1;
|
以上isHTMLElement(obj)返回true,但obj明显不是一个HTML节点元素。下面通过对象特性及try-catch语句来判断。
01 |
function isHTMLElement(obj){
|
02 |
var d = document.createElement( "div" );
|
04 |
d.appendChild(obj.cloneNode( true ));
|
05 |
return obj.nodeType==1? true : false ;
|
10 |
var obj1 = {nodeType:1};
|
11 |
var obj2 = document.createTextNode( "hello" );
|
12 |
var obj2 = document.createElement( "p" );
|
对于window和document还要特别处理下
01 |
function isHtmlControl(obj) {
|
03 |
var d = document.createElement( "div" );
|
05 |
d.appendChild(obj.cloneNode( true ));
|
06 |
return obj.nodeType==1 ? true : false ;
|
08 |
return obj==window || obj==document;
|
分享到:
相关推荐
在JavaScript中,我们经常需要判断一个对象是否是HTMLElement类型,这在处理DOM操作时尤为重要。HTMLElement是HTML元素的基类,表示所有HTML元素的抽象基类。为了确定一个对象是否属于这个类型,我们通常会检查其`...
确定一个HTMLElement是否为或包含另一个HTMLElement。 这是一个CommonJS的克隆 。 var contains = require ( 'dom-contains' ) ; 包含(元素,针) 返回一个布尔值。 element是否为needle或包含needle 。 元素 ...
这篇博客“如何优雅的迭代htmlElement元素”提供了关于高效且整洁地遍历HTML元素的方法。通过学习这些技巧,开发者可以更好地控制页面上的元素操作,提高代码的可读性和维护性。 在JavaScript中,遍历HTML元素通常...
确定对象是否为HTMLElement (来自任何Realm )。 安装 >= 10 。 要安装,请在命令行中输入以下命令: npm install is-dom-element 输入 ES模块: import isDOMElement from 'is-dom-element' ; CommonJS模块:...
然后,通过设置`el.innerHTML`属性,我们可以将HTML字符串赋值给这个元素,从而将其转化为包含HTML结构的HTMLElement。 ```javascript el.innerHTML = '<html>...</html>'; ``` 在这个过程中,`innerHTML`属性将...
- 利用CSS的`transition`和`animation`属性,可以为HTMLElement对象创建平滑的过渡效果。 - JavaScript库如jQuery提供`.animate()`方法,方便进行复杂的动画操作。 7. **DOM操作注意事项**: - 当在事件处理函数...
总结来说,通过判断JavaScript对象是否具有DOM元素的特定属性或是否为HTMLElement的实例,我们可以有效地判断该对象是否是DOM对象。需要注意的是,由于不同浏览器可能存在不同的实现差异,一个健壮的判断方法应当...
在实际编程中,我们经常需要对`HTMLElement`对象进行一系列的操作,例如添加子元素、设置属性、修改样式等。然而,有些开发者可能尝试在`HTMLElement`对象上使用`Object.prototype`上的方法,却发现这些方法不起作用...
* HTMLElement.offsetLeft: 只读,返回一个double值,即从此元素的左边界到offsetParent的左边界的距离。* HTMLEle
在JavaScript开发中,自定义元素是通过结合使用`document.registerElement()`(旧方法)或`class extends HTMLElement`(现代方法)来创建的。 自定义元素的核心在于它的定义方式。在旧的实现中,我们使用`document...
在JavaScript中,我们可以利用`class extends HTMLElement`来定义一个自定义元素,然后通过`customElements.define()`方法注册这个元素,使其成为浏览器可识别的组件。 要将React组件挂载到自定义元素上,我们需要...
Shadow是从HTMLElement继承的Web组件和自定义元素的基类。 快速开始 编译example/my_example.ts : deno bundle --config example/tsconfig.json example/my_example.ts > example/my_example.js 服务index.html...
确定HTMLElement的最大可伸缩尺寸。 该库的工作方式在目标元素之前添加一个较大,并强制进行。 因此,不支持,因为它们永远不能包含该子。 另外,由于没有渲染光树,因此不自动支持具有shadowRoot元素,但是有一种...
网页元素查看是一个与Visual Basic(VB)相关的项目,旨在帮助用户分析浏览器中的网页元素,并生成引用这些元素的VB代码。这个工具可能对于Web开发者或自动化测试工程师尤其有用,因为他们经常需要与网页元素交互,...
这个名为"用于创建自定义元素的Boilerplate"的项目,显然是一个基础模板,帮助开发者快速上手自定义元素的开发。 在JavaScript开发中,自定义元素通过`class extends HTMLElement`来定义,这是基于ES6的类语法。...
这些属性允许开发者为元素绑定特定类型的事件监听器。例如: ```javascript element.onblur = function() { console.log('元素失去焦点'); }; ``` 通过以上内容可以看出,`HTMLElement`接口提供了丰富的功能...
在JavaScript和Web开发中,`regularElements`是一个实用的工具,它允许开发者将任何DOM节点或者通过CSS选择器选取的节点转换为自定义元素。这个功能对于构建可复用、可扩展的组件以及提高页面性能至关重要。下面我们...
总结,C#中的`WebBrowser`控件为我们提供了在应用程序中嵌入网页浏览功能,并且能够进行元素提取和自动填表。开发者可以通过理解HTML结构,结合`HtmlDocument`对象的方法,实现对网页的控制和自动化操作。然而,对于...
babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5 babel-plugin-transform-custom-element-classes编译扩展了ES5环境的HTMLElement的自定义元素类。问题自定义元素是针对原生ES6类...