我们经常使用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的情况,函数名isHTMLControl
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;
}
}
分享到:
相关推荐
主要介绍了如何判断元素是否为HTMLElement元素。需要的朋友可以过来参考下,希望对大家有所帮助
确定一个HTMLElement是否为或包含另一个HTMLElement。 这是一个CommonJS的克隆 。 var contains = require ( 'dom-contains' ) ; 包含(元素,针) 返回一个布尔值。 element是否为needle或包含needle 。 元素 ...
确定对象是否为HTMLElement (来自任何Realm )。 安装 >= 10 。 要安装,请在命令行中输入以下命令: npm install is-dom-element 输入 ES模块: import isDOMElement from 'is-dom-element' ; CommonJS模块:...
本节主要介绍了将HTML格式的String转化为HTMLElement的实现方法,需要的朋友可以参考下
NULL 博文链接:https://goodscript.iteye.com/blog/1568639
* HTMLElement.offsetLeft: 只读,返回一个double值,即从此元素的左边界到offsetParent的左边界的距离。* HTMLEle
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元素,但是有一种...
连续操作HTMLElement对象图文解决方法.docx
Object.prototype.***不能用作在HTMLElement对象上,如本后面的抓图所示。
babel-plugin-transform-custom-element-classes, 编译 ES6 HTMLElement类扩展到 ES5 babel-plugin-transform-custom-element-classes编译扩展了ES5环境的HTMLElement的自定义元素类。问题自定义元素是针对原生ES6类...
setData: function (/** DataTransfer */dataTransfer, /** HTMLElement*/dragEl) { dataTransfer.setData('Text', dragEl.textContent); // `dataTransfer` object of HTML5 DragEvent }, // Element is ...
上下文元素 context-element是一个HTMLElement,可以轻松在html页面...为什么要使用上下文元素 因为上下文元素是本机HTMLElement。 因为著名的UI框架削减了带宽预算。 因为它不使用虚拟dom,所以内存使用非常有效。
HTMLElement.offsetLeft HTMLElement.offsetHeight 但 是需要注意的是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其 父...
htmlelement.polyfills库为上一些最常用的DOM交互提供了轻量级的香草JavaScript polyfills。 用法: 安装htmlelement.polyfills包 通过NPM : npm install htmlelement . polyfills -- save 通过纱线: yarn ...
dom-paste 在paste事件中检索剪贴板内容作为HTMLElement 。用法domPaste(event, callback) var domPaste = ...实施细则创建一个临时的 contenteditable 元素,并将输入焦点转移到它。 MutationObserver用于检测临时元
克隆元素 使用样式克隆HTML元素。 安装 npm i -save clone-element 用法 import cloneElement from 'clone-element' document . body . appendChild ( cloneElement ( document .... Chrome / Safari无法为::placehold
应用选择器和 css 为 HTMLElement 设置 id、className 和 css。 对于有时从外部文件或有时从 inline.css 应用 css 的情况很方便用法 var applySelectorAndCss = require ( 'apply-selector-and-css' ) ;var css = { ...