JavaScript DOM编程艺术中的技巧代码
来源:互联网 发布:没有美工怎么做游戏 编辑:程序博客网 时间:2024/06/05 07:30
1、将多个JS函数绑定在onload事件处理函数上,每个事件处理函数只能绑定一条指令。
function addLoadEvent(func){var oldonload = window.onload;//将现有的window.onload事件处理函数的值存入变量if(typeof window.onload !='function'){//如果在该处理函数上未绑定任何函数,就像平时那样把新函数添加给它window.onload = func; }else{window.onload = function(){//如果该处理函数上已绑定了函数,则将新函数追加到现有指令的末尾。oldonload(); func(); } }}
相当于把页面加载完毕时执行的函数创建为一个队列,当需要加入新函数时写出 addLoadEvent(firstFunction)。
2、动态方式创建HTML内容
浏览器看来,DOM节点树才是文档,浏览器实际显示的就是DOM树。当以动态方式创建HTML内容时,实际是在改变DOM节点树。若在节点树上添加内容,必须插入新的节点,若把HTML内容添加到文档里,就必须在相应的DOM节点树上插入元素节点。
向后插入新元素:(DOM中有像前插入insertBefore,无向后插入的直接指令)
function insertAfter(newElement,targetElement) {var parent = targetElement.parentNode;if (parent.lastChild == targetElement) {parent.appendChild(newElement); } else {parent.insertBefore(newElement,targetElement.nextSibling); }}
3、动态地收集和/或创建一些有用的辅助信息,并动态地呈现在网页上:
(1)把隐藏在属性里的信息检索出来;
常用方法:getElementById();
getElementsByTagName();
getAttribute();
(2)把这些信息动态地创建为一些HTML内容;
(3)把这些HTML内容插入到文档里。
常用方法:createElement();
createTextNode();
appendChild();
insertBefore();
setAttribute();
编写DM脚本时,想当然地认为某个节点是一个元素节点是一种常见的错误。如果没有百分百把握,就一定要检查nodeType属性值。有些DOM方法只能用于元素节点;如果用在文本节点身上,会产生一个错误。
var quoteChildren = quotes[i].getElementsByTagName("*");var elem = quoteChildren[quoteChildren.length-1];
把通配符*作为参数传递给getElementByTagName()方法,它就会把所有的元素不管具体HTML标记是什么返回。
上面例子中,blockquote元素包含最后一个元素节点对应着quoteElements数组中的最后一个元素。数组中的最后一个元素的下标等于数组的长度减去1.
重要的一点:JS脚本应该是用来充实文档内容,要避免使用DOM技术来直接插入核心内容。
4、获取“下一个元素节点“
function getNextElement(node){ if(node.nodeType ==1){ return node; } if(node.nextSibling){ retrun getNextElement(node.nextSibiling);}return null;}
5、利用className属性设置或添加css效果
先在css文件中添加声明,例如:
.odd { background-color:#ffc;}
然后在JS中创建函数addClass()函数:
function addClass(element,value){if(!element.className){ element.className = value;//如果className为NULL则直接进行设置 }else {newClassName = element.className;//否则进行添加效果newClassName += "";//注意中间要有空格newClassName += value; element.className = newClassName; }}
6、在编写用来检查表单数据的JS脚本时,必须注意:
糟糕的表单检查还不如根本没有检查;
不要完全依赖JS,它代替不了服务器端的数据合法性检查,如果已经用JS对表单数据进行检查,绝不意味着在那些数据到达服务器时用不着再对它们进行检查。
- JavaScript DOM编程艺术中的技巧代码
- JavaScript DOM编程艺术中的几个方法
- JavaScript Dom编程艺术
- 《Javascript DOM 编程艺术》
- JavaScript Dom 编程艺术
- Javascript Dom 编程艺术
- JavaScript DOM编程艺术
- Javascript DOM编程艺术
- JavaScript DOM编程艺术
- 【JavaScript DOM编程艺术】- DOM
- 《JavaScript Dom 编程艺术》: 优美 DOM 编程
- JavaScript DOM编程艺术中的工具函数源码
- 推荐:《JavaScript DOM编程艺术》
- 《JavaScript DOM编程艺术》读书笔记
- DHTML (JavaScript Dom 编程艺术)
- JavaScript DOM编程艺术 笔记
- 读书笔记--javascript DOM 编程艺术
- 《JavaScript DOM 编程艺术》 读书笔记
- 理解 Python 中的线程
- Java虚拟机之字节码执行引擎
- Android-带有切换动画的CheckBox
- 嵌入式linux常用命令
- 2016年01月25日
- JavaScript DOM编程艺术中的技巧代码
- 从一台机器给另一台机器tomcat发请求,查看各个环节的耗时时间
- 【转】单例模式的七种写法
- 通过RadioGroup 和ViewPager 以及Handler 实现图片的轮播
- jdk+MyEclipse+Tomcat 的安装教程和分析
- Spring4 MVC 整合Hibernate5 附源码下载
- ListView始终显示垂直滚动条设置
- 浏览器缩放时,页面布局发生变化
- 关于环信集成报错问题之一