JavaScript高级篇之数字正射影像图文档,简单封装及调用、动态添加、删除样式（六)

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html,在回来看这里文章，你一定会有更深刻的认识。因为我在这里介绍概念上的东西比较少，看下面的例子，对初学的朋友可能会有些吃力！1、DOM的架构复制代码代码如下： html标题文档/标题/标题正文h1CSS演示/h1 p我喜欢美女，特别是高个的美女/p /body /html这个文档的数字正射影像图表示如下图

图片表示一个超文本标记语言文档的树。所有数字正射影像图树结构表现为不同种类的结节对象的一个数，第一个孩子，最后一个孩子，下一个兄弟，前一个兄弟和父节点属性提供遍历节点的树的一种办法，appendChild，removeChild，replaceChildh和在.之前插入这样的方法可以像文档中添加节点或者从文档中删除节点。不明白没关系接下来我将用大量的例子让你明白。1、先创建一个使用半铸钢钢性铸铁(铸造半钢)美化的列表复制代码代码如下：样式类型=' text/CSS '正文{ margin :0 pxpadd :0 px } # container { font-family : Tahoma；font-size :14 pxborder:solid 1px # 99ffcc宽度宽度：200像素高度：140 pxfloat:left} #容器ul {列表式：无；padd :1 px 0px 0px 0 pxmargin 33600 px } #集装箱ul Li {边框-底部：实心1px # 99 FCC余量：0px高度：27 px} #集装箱保险商实验所阿利{背景色：灰色；文本装饰：无；显示：块；左边框：实心10px红色；margin :0 pxpadding :5 px 0px 5px 10px } #容器ul阿利：悬停{背景色：红色；color: # 000000} /style 2，加一个差异元素。复制代码代码如下： div id=' container ' ul id=' list ' lia href=' # ' Home/a/Li Li id=' my blog ' a href=' # ' my blog/a/Li lia href=' # ' Sport/a/Li lia href=' # ' News/a/Li lia href=' # ' Contane/a/Li/ul/div 3，你现在应该看到如下图

4、根据上图获取元素总数复制代码代码如下： var Tools={ }；工具。getelementcount=function(e){ var count=0；元素总数(e)；文件。桌子。txt。值='元素： '计数；函数元素总数(e){ if(e . nodetype==1)计数；var children=e . childnodeforf(var I=0；ichildren . lenti){ ElEMENTTotaL(儿童[I])；} } };备注：大家使用可以再身体加入button type=' button ' onclick=' alert(工具。getelementcount(文档))'获取元素个数/按钮5、将文本全部大写复制代码代码如下：工具ModifyElement=函数modify(e){ if(e . nodetype==3)e . data=e . data。touppercase()；else { for(var I=e .第一个孩子；我！=nulli=i.nextSibling)修改；} };备注：大家使用可以再身体加入按钮类型="按钮"点击="工具"。'修改文档'大写/按钮效果

6、给列表排序复制代码代码如下：工具。文档排序=函数(e){ var textArray=[]；if(类型为e==' string ')e=文档。getelementbyid(e)；for(var x=e .第一个孩子；x！=nullx=x . next sibling)if(x . nodetype==1)text array。push(x)；textArray.sort(函数(n，m){ var s=n .第一个孩子。第一个孩子。数据；var t=m .第一个孩子。第一个孩子。数据；if(st)返回-1;否则if(st)返回1;否则返回0;});备注：大家使用可以再身体加入按钮类型=' button ' onclick=' tools。文档排序(“列表”)排序/按钮效果

7、动态插入列表项（子节点)复制代码代码如下：工具。insert element=function(n，e){ if(类型n==' string ')n=document。getelementbyid(n)；var Li=文档。创建元素(e)；var a=文档。创建元素(' a ')；a.setAttribute('href '，' # ')；var txt=文档。create text node(' HotBlog ')；a . append child(txt)；李。append child(a)；var parent=n . ParentNodeParent . insert before(Li，n)；};备注：大家使用可以再身体加入button type=' button ' onclick=' tools。插入元素(“我的博客”、“李”)；”插入/按钮效果

8、使用爪哇岛描述语言类动态创建文档1、样式表复制代码代码如下：工具提示{背景： URL(' 2。jpg’)；border:solid 1px # 99ffcc宽度宽度：200像素高度：200 px}//这里的图片大家要该一下工具内容{底色： # ffffffborder : solid 1px # 99ff 00 padd :5 pxfont : Tahoma 12pxcolor 3360 # 00000 } 2、javascript类复制代码代码如下：函数Tooltip(){ this。工具提示=文档。create element(' div ')；这个。工具提示。风格。位置='绝对'；这个。工具提示。类名=' tooltip这个。内容=文档。创建元素(' div ')；这个。内容。风格。position=“相对”；这个。内容。类名='工具内容'；这个。工具提示。appendchild(这个。内容)；}工具提示。原型。show=函数(text，x，y){ this。内容。innerhtml=文本；这个。工具提示。风格。left=x ' px这个。工具提示。风格。top=y ' px这个。工具提示。风格。可见性='可见'；if(this.tooltip.parentNode！=文档。正文)文档。尸体。appendchild(这个。工具提示)；};工具提示。原型。hide=function(){ this。工具提示。风格。可见性='隐藏'；};var t=新工具提示();函数hide(){ t . hide()；}函数show() { t.show('hello '，300，0)；}函数init(){文档。操作员。展示。onclick=show文件。操作员。藏起来。onclick=hide} 备注：配合上面使用必须还完成以下步骤：1、将身体中的onload=init()；2在身体中添加：表单名称='运算符'输入类型='按钮'值='隐藏name=' hide '/input type=' button ' value='显示name='show' /form效果：(隐藏看到什么了)9505.163.com

9、动态添加样式和删除样式1、样式表复制代码代码如下：容器{ font-family : Tahomafont-size :14 pxborder:solid 1px # 99ffcc宽度宽度：200像素高度：140 pxfloat:left}。容器ul {列表式：无；padd :1 px 0 px 0 px 0 pxmargin :0 px }。集装箱ul Li {边框-底部：实心1px # 99 FCC余量：0px高度：27 px} .集装箱保险商实验所阿利{背景色：灰色；文本装饰：无；显示：块；左边框：实心10px红色；margin :0 pxpadding :5 px 0px 5px 10px }。容器ul阿利：悬停{背景色：红色；color: # ffffff} 2、工具函数（动态添加、删除样式)复制代码代码如下： var CSS class={ }；CSSclass.is=function(e，c){ if(类型为e==' string ')e=document。getelementbyid(e)；var class=e . class name if(！班级)返回假声返回真实的返回e.className.search('\\b' c '\\b* ')！=-1;};CSSclass.add=function(e，c){ if(类型为e==' string ')e=document。getelementbyid(e)；if(CSSclass.is(e，c))返回；//if(e .类名)c=' ce . CLaSS name=c；};CSSclass.remove=function(e，c){ if(类型为e==' string ')e=document。getelementbyid(e)；//e . id=e . id。替换(新的RegExp(' \ \ b ' e . id ' \ \ b \ \ s * '，' g '，' ')；类名。替换(新的RegExp('\\b' c '\\b\\s* '，' g '，' ')；};3、在身体中加入如下元素复制代码代码如下： div id=' con ' ul id=' list ' lia href=' # ' Home/a/Li Li id=' my blog ' a href=' # ' my blog/a/Li lia href=' # ' Sport/a/Li lia href=' # ' News/a/Li lia href=' # ' Content/a/Li/ul按钮类型=' button ' name=' add ' onclick=' CSS类。添加(' con '，' container ')；'动态添加样式/button button type=' button ' name=' remove ' onclick=' CSS类。移除(' con '，' container ')；'动态删除样式/按钮效果

没添加样式的样子

加了样式之后。小结：Dom文档操作、内联样式、动态设置样式等就给大家分享到这里吧！其实还有很多细节没给大家呈现。下一篇我将分享我学习事件的历程。 (很多没有备注，大家有问题可以给我留言！)