第五课 DOM和CSS操作基础

第五课 DOM和CSS操作基础本课目标用脚本操作HTML元素和CSSHTML标签的JavaScript接口所有的HTML标签都可以用js创建简介js的HTMLNode接口常见的方法：createElement()/appendChild()/removeChild()/replaceChild()/insertBefore()等等，总结起来就一句话：凡是你可能用到的那些常用操作，js都是有对应接口的（为什么？你觉得定义js的那些人会比你傻？）HTML标签的JavaScript接口关于innnerHTML，直接插入HTML字符串以上两种方式有何不同？（下一集专门分析，如何高效地操纵HTML。）请同学写示例代码。CSS样式的JavaScript接口可以通过js操纵完整的CSS样式简介js的HTMLNode接口示例代码。1、直接在HTML标签上逐个设置样式；2、先写好CSS样式，然后通过HTML标签的className属性整体设置样式-效率比较高，Ext大量使用这种方式。（效率高的原因在下一集详细分解。）综合以上：Ext.Panel的本质大规模的标签和CSS，效率？效率主要考虑2个方面：CPU使用率和RAM使用量这些操作会大量消耗资源：对HTML标签的CRUD操作、排序，应用CSS样式，事件系统如何保证大规模HTML操作的效率？如何保证CSS操作的效率？如何保证排序效率？大规模的标签和CSS，效率？如何保证事件系统的效率？如何避免内存泄漏？常见问题：Ext.get()和Ext.fly()何时用Ext.fly()?1、只是想拿到元素，查看一下内容；2、你确定fly()出来的东西只是当前位置被使用，其它地方并不会用，那就尽管去fly();3、还有一个Ext.getCmp()-这是专门用来获得Ext封装过的那些组件的，不能用它来获得底层的HTML标签。常见问题：Ext如何操纵HTML与数据库操作类似，对HTML标签的操作也可以简化为CRUD这四个操作；Ext.Element内部封装了dom节点，提供了对这些节点进行操作的大量工具函数Ext.DomHelper用来帮助进行CRUD操作Ext.DomQuery用来进行高效查询Ext.util.CSS用来帮助操纵整体样式表再次看一下Ext.Panel复习完毕，休息10分钟后进行交流谢谢！