Extjs2的DomHelper

最新推荐文章于 2021-06-18 00:35:01 发布

原创最新推荐文章于 2021-06-18 00:35:01 发布 · 112 阅读

CC 4.0 BY-SA版权

本文详细介绍了JavaScript中创建和操作DOM节点的方法，包括使用innerHTML结合eval()、原始DOM API、JS框架如jQuery和Extjs2的Element/DomHelper等。文章重点探讨了这些方法的优缺点及应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最高效,当然是用innerHTML加eval()了

其次用原始dom的API,传送门:http://www.w3school.com.cn/htmldom/index.asp

在《javascript高级程序设计》一书的6.3.5:创建和操作节点一节中，介绍了几种动态创建html节点的方法，其中有以下几种常见方法：

· crateAttribute(name)：　　　　　　　用指定名称name创建特性节点

· createComment(text)：　　　　　　　创建带文本text的注释节点

· createDocumentFragment()：　　　　创建文档碎片节点,主要是用来解决性能问题,作用类似于eval()但是跟规范,eval是非正规做法

· createElement(tagname)：　　　　　创建标签名为tagname的节点

· createTextNode(text)：　　　　　　创建包含文本text的文本节点

再其次,用js框架生成,例如jquery,prototype等等

最后就是本次要讲的Extjs2里的Element和DomHelper

用js生成dom元素相关的参数

Ext.Element.createChild->

Ext.DomHelper.insertBefore或overwrite或append->

Ext.DomHelper.createHtml->参数格式说明:

createHtml的参数可以是object或者array,数组的话自动会循环处理

{
tag:'标签名称,默认为div',
cls:'对应class属性',
style:'对应style属性',
htmlFor:'对应for属性',
// 如果是非空标签还支持,即br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col之外的标签
html:'生成的dom元素的内容',
children:'嵌套的本配置参数对象',
cn:'是children的简写',
其他未明确列出来的属性会自动生成key="value"
}

DomHelper的方法和属性非常少,主要是用来将html字符串,配置对象转成DOM对象,

其他的设置DOM属性等操作是Ext.Element的职能范围

DOM的筛选则是由Ext.DomQuery包办