JavaScript笔记之对象和DOM
来源:互联网 发布:客如云餐饮软件 编辑:程序博客网 时间:2024/05/22 03:46
W3C建议符合标准的浏览器采用节点操纵(node manipulation)的方式支持网页,使页面表现得更像应用程序,而不是一般的静态页面。
今天学习了一些关于节点和DOM的知识;添加、删除和操作特定的节点;以及在页面上插入和替换节点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Manipulating Nodes</title><script type="text/javascript" src="script01.js"></script></head><body><form action="#"><p><textarea id="textArea" rows="5" cols="30"></textarea></p><p><label><input type="radio" name="nodeAction" />Add node</label><label><input type="radio" name="nodeAction" />Delete node</label><label><input type="radio" name="nodeAction" />Insert before node</label><label><input type="radio" name="nodeAction" />Replace node</label></p>Paragraph #: <select id="grafCount"></select><input type="submit" value="Submit" /></form><div id="modifiable"> </div></body></html>
用户可以在页面上添加、删除和替换任何文本
window.onload = initAll;var nodeChgArea;function initAll() {document.getElementsByTagName("form")[0].onsubmit = nodeChanger;nodeChgArea = document.getElementById("modifiable");}function addNode() {var inText = document.getElementById("textArea").value;var newText = document.createTextNode(inText); //首先使用createTextNode方法创建一个新的文本节点var newGraf = document.createElement("p");newGraf.appendChild(newText);//将文本添加到新段落中nodeChgArea.appendChild(newGraf);}function delNode() {var grafChoice = document.getElementById("grafCount").selectedIndex;var allGrafs = nodeChgArea.getElementsByTagName("p");//收集页面上所有段落标签var oldGraf = allGrafs.item(grafChoice);nodeChgArea.removeChild(oldGraf);}function insertNode() {var grafChoice = document.getElementById("grafCount").selectedIndex;var inText = document.getElementById("textArea").value;var newText = document.createTextNode(inText);var newGraf = document.createElement("p");newGraf.appendChild(newText);var allGrafs = nodeChgArea.getElementsByTagName("p");var oldGraf = allGrafs.item(grafChoice);nodeChgArea.insertBefore(newGraf,oldGraf);//新节点插入到这个节点前面}function replaceNode() {var grafChoice = document.getElementById("grafCount").selectedIndex;var inText = document.getElementById("textArea").value;var newText = document.createTextNode(inText);var newGraf = document.createElement("p");newGraf.appendChild(newText);var allGrafs = nodeChgArea.getElementsByTagName("p");var oldGraf = allGrafs.item(grafChoice);nodeChgArea.replaceChild(newGraf,oldGraf);}function nodeChanger() {var actionType = -1;var pGrafCt = nodeChgArea.getElementsByTagName("p").length;var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;for (var i=0; i<radioButtonSet.length; i++) {if (radioButtonSet[i].checked) {actionType = i;}}switch(actionType) {case 0:addNode();break;case 1:if (pGrafCt > 0) {delNode();break;}case 2:if (pGrafCt > 0) {insertNode();break;}case 3:if (pGrafCt > 0) {replaceNode();break}default:alert("No valid action was chosen");}document.getElementById("grafCount").options.length = 0;for (i=0; i<nodeChgArea.getElementsByTagName("p").length; i++) {document.getElementById("grafCount").options[i] = new Option(i+1);}return false;}
以上代码用对象字面值来编写,则表现为:
window.onload = initAll;function initAll() {document.getElementsByTagName("form")[0].onsubmit = nodeChanger;//进行初始化chgNodes.init();}function nodeChanger() {return chgNodes.doAction();}var chgNodes = {//chgNodes对象的开头actionType : function() {var radioButtonSet = document.getElementsByTagName("form")[0].nodeAction;for (var i=0; i<radioButtonSet.length; i++) {if (radioButtonSet[i].checked) {return i;}}return -1;},//actionType()是chgNodes的一个方法allGrafs : function() {return this.nodeChgArea.getElementsByTagName("p");},pGrafCt : function() {return this.allGrafs().length;},inText : function() {return document.getElementById("textArea").value;},newText : function() {return document.createTextNode(this.inText());},grafChoice : function() {return document.getElementById("grafCount").selectedIndex;},newGraf : function() {var myNewGraf = document.createElement("p");myNewGraf.appendChild(this.newText());return myNewGraf;},oldGraf : function () {return this.allGrafs().item(this.grafChoice());},doAction : function() {switch(this.actionType()) {case 0:this.nodeChgArea.appendChild(this.newGraf());break;case 1:if (this.pGrafCt() > 0) {this.nodeChgArea.removeChild(this.oldGraf());break;}case 2:if (this.pGrafCt() > 0) {this.nodeChgArea.insertBefore(this.newGraf(),this.oldGraf());break;}case 3:if (this.pGrafCt() > 0) {this.nodeChgArea.replaceChild(this.newGraf(),this.oldGraf());break;}default:alert("No valid action was chosen");}document.getElementById("grafCount").options.length = 0;for (var i=0; i<this.pGrafCt(); i++) {document.getElementById("grafCount").options[i] = new Option(i+1);}return false;},//除了最后一个语句之外,每个语句都应该以逗号结尾(函数本质上是一个扩展的语句)init : function() {this.nodeChgArea = document.getElementById("modifiable");}//init()函数的作用只是初始化nodeChgArea供以后使用,且这个例程的末尾不加逗号}
使用对象字面值时要注意几点差异:
使用 :设置属性而不是 = 。
行以 ,结尾而不是 ;。
在对象中的最后一个语句上不需要逗号。
程序员为什么要使用对象字面值而不是过程式方法来编写JavaScript的原因如下:
首先,因为每个对象(包括方法和属性)都包含在一个父对象中,所以不会遇到无意间覆盖别人的代码问题。如果你在你和你的同事各自负责的.js文件中都有一个名为myText的变量,一些页面会加载这两个文件,那么页面后加载的文件优先——它会直接覆盖另一个变量,就像根本没有加载过原来的代码一样。解决方案是确保不使用全局变量,而实现这一点最简单的方法就是把所有代码都放在一个对象字面值中。
其次,对象字面值的一个子集被称为JavaScript Object Notation,简称为JSON。JSON是Ajax中最常用的数据格式之一,因此在使用Ajax时经常会遇到这种格式。
最后,与所有东西一样,编程语言的风格也在随着潮流变化。JavaScript本身正在经历第二次飞跃,业界重新唤起了对脚本编程的兴趣。当前的潮流倾向于使用对象字面值,所以用对象字面值编写的代码会越来越多。
(源《JavaScript基础教程》)
- JavaScript笔记之对象和DOM
- JavaScript之DOM对象和内置对象
- javascript之Dom对象
- javascript之DOM对象
- javascript之DOM对象
- JavaScript之DOM对象
- JavaScript学习笔记(3)DOM对象和内置对象
- Javascript / jQuery 笔记 DOM 对象和jQuery对象的转换
- JavaScript之DOM笔记
- JavaScript学习笔记(09)之文档对象模型DOM
- JavaScript学习笔记之DOM对象操作html元素
- JavaScript学习笔记7 之DOM文档对象模型
- jQuery学习笔记之jQuery对象和DOM对象
- javascript之XML DOM对象
- javascript之XML DOM对象
- javascript之XML DOM对象
- JavaScript 之 XML DOM 对象
- Javascript学习笔记之DOM
- 论IT从业人员知识的学习方法以及学习技巧II
- 经典算法
- 我的csdn第二学期第一课感想
- 笔记本电脑 音频输出 杂音 问题的解决方案
- cpu signature
- JavaScript笔记之对象和DOM
- 建立博客,开始认真解析数理世界
- 关于 android 蓝牙
- 失败后的从容离开,无意之中也许会再次点亮希望之光
- Qt中QJson的编译+开发心得
- Spring中常见的各种通知
- 职场管理中的蝴蝶效应-离职的蝴蝶效应,修改版
- .NET知识
- MySQL 5.5(rpm格式)server 和client 在Linux 上安装