javascript 操作dom

ECMAScript基础：

numberObject.toFixed(2); 填充到两位小数
var numberObject = new Number(9);
numberObject.toFixed(2);// outputs 9.00
stringObject.lastIndexOf();
"akescript.cn".indexOf("c") = 4;
"akescript.cn".lastIndexOf("c") = 10;
stringObject.localeCompare(stringObject2);stringObject按字母排序排在参数之前则返回负数（-1）；相同返回0 ；反之返回正数（1）var string1= new String("ake");
string1.localeCompare("ke") //outputs -1
string1.localeCompare("ake") //outputs 0
string1.localeCompare("a") // outputs 1
stringObject.slice(sNum,eNum); 类似于substring()方法，不同的是参数为负有效。
"akescript".substring(3); // outputs "script"
"akescript".slice(-6); // outputs "script"
delete object.name 移除已自定义的属性或方法的引用
var o = new Object;
o.name = "ake87";
alert(o.name); // outputs "ake87"
delete o.name;
alert(o.name); // outputs undefined
void对任何值都返回undefined
<a href="javascript:void(window.open('about:blank'));">Open</a>
一元加号"+"将字符串的数字转变为数字
var sNum = "44"; var iNum = +sNum;
alert(typeof iNum) ; //outputs "number"
undefined类型不能用于逻辑与或非的运算
===、!== 在比较之前不进行类型的转换
functionObject.length得到该函数默认的参数个数
于2008-11-25。以后不知道还会不会这么认真。。。

对象基础

数组可根据需要增加或减少项。增加只需要把存放值的项放入下一个未使用的位置即可。
var arr=new Array(3); var arr[4]="ake" // arr.length=5 arr[3]=null;
var str="green"; var arr = str.split(""); // arr = ["g","r","e","e","n"];
arr.slice(sNum,eNum); 同样对数组有效。操作的不是字符而是数组的项。
array.pop(); 删除数组的最后一项，并返回该项的值。
array.push(); 在数组的最后一个位置之后，添加一个数组项,参数为添加的项值
array.shift()/ unshift()；使用方法同上，不同的是操作的不是最后一项，而是第一项。
array.reverse();颠倒数组项的顺序。
array.sort(); 将数组想的值转换为字符串，比较后按“升序”排列数组。
splice(sNum,dNum,items);数组中插入项。sNum：插入的位置，dNum：删除的项的个数，items：插入的项值。
array.splice(0,2);删除数组的前两项。
array.splice(2,0,"ake","script"); 在数组第二项位置插入“ake”和“script”值。
array.splice(2,1,"ake","script"); 删除数组的第二项，并插入项“ake”和“script”。
应该尽量避免使用escape(); 若有需要可是使用encodeURI();
得到一个在2－9之间的随机数。
Math.floor(Math.random()*8 + 2); ==> Math.floor(Math.random()*total_Numbers + first_item_value);
字符串了连接：建议使用join()方法，该方法比使用“+”连接字串更节约时间。
StringBuffer类：
function StringBuffer(){this._strings = new Array;}StringBuffer.prototype.append = function(str){this._strings.push(str);};StringBuffer.prototype.toString = function(){return this._strings.join("");};
类的创建：使用构造函数和原型的方法。this+prototype。
类的继承：使用构造函数和原型链的方法。call()/append() + prototype
构造函数——> 属性；原型——> 方法。

浏览器中的JavaScript

moveBy(dx,dy);resizeBy(dw,dh);窗口相对移动或相对改变，参数为改变的值。
moveTo(dx,dy);resizeTo(dw,dh);窗口移动到dx,dy;窗口大小变为宽dw高dh。
IE：window.screenLeft,window.screenTop——判断窗口的位置
document.body.offsetWidth(offsetHeight)获取视窗口的大小（HTML页面的区域）
Mozilla,Opera,safari：window.screenX(screenY) 判断窗口位置。
innerWidth(Height) 判断视窗口的大小。
window.outerWidth(outerHeight) 判断浏览器窗口的大小。
alert（只有OK按钮）——confirm（OK和Cancel按钮）——prompt（OK、Cancel按钮和一个text文本框）
在执行一组指定的代码前等待一段时间，使用暂停（setTimeout）;若要反复执行某些代码，则使用间隔（setInterval）
js暂停方法：var TimeoutId = setTimeout(someFunction,1000);clearTimeout(TimeoutId);
每当浏览器遇到</script>时，它都假定代码块是完整的。（即使它出现在JavaScript字符串中），这时应该截断它："</scr" + "ipt>"。
当页面完全载入后使用write()会抹去当前页面的所有内容。
对window.open打开的窗体写入代码使用命令：document.open();document.write();docuemnt.close();
location.href方法导航页面会将新的URL地址记入“历史”中。location.replace不会（about document.URL??）
location.reload();参数为true时，页面将从服务器重新载入；false时，从缓存中重新载入。
若需要使用，最好把reload()放在最后一行。
cookieEnabled：说明是否启用了cookie的boolean值。javaEnabled(),是否启用了java
注意不同浏览器的可用性
screen.availWidth/availHeight：窗口可使用的屏幕宽／高度，其中包括操作系统元素（如windows的工具栏）
screen.width/height ：屏幕的宽／高度，以像素计
screen.colorDepth：用户表示颜色的位数
2008-11-26

DOM基础

特性／方法        类型／返回类型
nodeName        String
nodeValue        String
nodeType        Number
ownerDocument        Document
firstChild        Node
lastChild        Node
childNodes        NodeList
previousSibling        Node
nextSibling        Node
hasChildNodes()        Boolean
attributes        NamedNodeMap*        包含了代表一个元素的特性的Attr对象；仅用于Element节点
appendChild(node)        Node
removeChild(node)        Node
replaceChild(newnode,oldnode)        Node        在childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode)        Node        在childNodes中的refnode之前插入newnode
*NamedNodeMap——同时用数值和名字进行索引的节点表；用于表示元素特性。
<html/>元素：var oHtml = document.documentElement;
<head/>元素：var oHead = oHtml.firstChild || oHtml.childNodes[0] || oHtml.childNodes.item(0);
<body/>元素：var oBody = oHtml.lastChild || oHtml.childNodes[1] || oHtml.childNodes.item(1);
Mozilla认为元素之间的空白都是Text节点，而IE则会忽略这些空白。
使用nodeType特性检验节点类型。
getNamedItem(name)——返回nodeName属性值等于name的节点；
removeNamedItem(name)——删除nodeName属性值等于name的节点；
setNamedItem(node)——将node添加到列表中，按其nodeName属性进行索引；
item(pos)——像NodeList一样，返回在位置pos的节点；
这些方法都是返回一个Attr节点，而非特性值。——貌似比较复杂的方法。。。
getAttribute(name)——等于attributes.getNamedItem(name).value;
setAttribute(name,newvalue)——等于attributes.getNamedItem(name).value=newvalue;
removeAttribute(name)——等于attributes.removeNamedItem(name)。
相对上一种方法好直观的多，也简洁的多。
document.getElementsByTagName("*")返回document中包含的所有元素。
当参数是一个星号的时候，IE6.0并不返回所有的元素，必须使用document.all来替代它
document.getElementsByName();返回name值等于指定值的所有元素。
但在IE6.0和Opera7.5在这个方法使用上还存在一些错误。它们还会返回id等于指定名称的元素。它们还仅仅检查<input/>和<img/>元素。
对于document.getElementById()方法在IE6.0中会返回与给定的ID匹配的name特性的元素。
方法        描述
createAttribute(name)        用给定名称name创建特性节点
*createCDASection(text)        用包含文本text的文本子节点创建一个CDATASection
createComment(text)        创建包含文本text的注释节点
createDocumentFragment()        创建文档碎片节点（什么东西？？）
createElement(tagname)        创建标签名为tagname的元素
*createEntityReference(name)        创建给定名称的实体引用节点
*createProcessingInstruction(target,data)        创建包含给定target和data的PI节点
createTextNode(text)        创建包含文本text的文本节点
*只有Mozilla浏览器支持此方法。
所有的的DOM操作必须在页面完全载入之后才能进行。当页面正在载入时，要向DOM插入相关代码是不可能的，因为在页面完全下载到客户端机器之前，是无法完全构建DOM树的。
一旦把节点添加到document.body（或者它的后代节点）中，页面就会刷新并反映出这个变化。所以，若要向document添加大量数据时会是页面不断的刷新变化。想要避免这种情况，可以使用创建文档碎片的方法：createDocumentFagment();将要添加的节点先appendChild()添加到这个创建的文档碎片对象上，然后一次性将文档碎片以appendChild方法添加到document.body中。前一个appendChild()的调用实际上并不是把文档碎片节点本身追加到<body/>元素中，而是仅仅追加碎片中的子节点。（？）
Attribute的方法属于核心的DOM方法；而如oA.href的直接引用属性的方法属于HTML DOM的方法。
setAttribute()在IE上有些许问题，因此最好使用HTML DOM的方法，且个人觉得此种方法更直观和简洁。
<table/>元素的方法：
caption——指向<caption/>元素（如果存在）
tBodies——<tbody/>元素的集合
tFoot——指向<tfoot/>元素（如果存在）
tHead——指向<thead/>元素（如果存在）
rows——表格中所有行的集合
createTHead()——创建<thead/>元素并将其放入表格
createTFoot()——创建<tfoot/>元素并将其放入表格
createCaption()——创建<caption/>元素并将其放入表格
deleteTHead()——删除<thead/>元素
deleteTFoot()——删除<tfoot/>元素
deleteCaption()——删除<caption/>元素
deleteRow(position)——删除指定位置上的行
insertRow(position)——在rows集合中的指定位置插入一个新行
<tbody/>元素添加以下内容：
rows——<tbody/>中所有行的集合
deleteRow(position)——删除指定位置上的行
insertRow(position)——在rows集合中的指定位置插入一个新行
<tr/>元素添加以下内容：
cells——<tr/>元素中所有的单元格
deleteCell(position)——删除给定位置上的单元格
insertCell(position)——在cells集合的给定位置插入一个新的单元格
以上方法仅仅属于DOM level1的部分。DOM level2中的功能：DOM遍历（NodeIterator）和TreeWalker方法。
目前只有Mozilla和其他少数浏览器支持DOM level2以上的功能，所以这些方法可以暂时不予以考虑。
implementation对象用来确定给定的DOM实现到底支持DOM的哪些部分。用document.implementation.hasFeature("要检查的特征","特征的版本")方法来检验。
但这个方法有其明显的缺陷——DOM实现是否与DOM标准一致是由去进行实现的人（或公司）决定的。故该方法的结果其实并不一定是完全真实的，包括Mozilla。

sString:被指定的要匹配的字符串。
var reg=/regstr/gi；创建个RegExp对象。regstr：正则表达式；g：全局匹配；i：不区分大小写。
reg.test(sString);如果给定字串（只有一个参数）匹配该模式，则返回true，否则返回false
reg.exec(sString);返回一个数组。数组中的第一个条目是第一个匹配；其他的反向引用。（？）
sString.match(reg);该方法返回一个包含在字符串中的所有匹配的数组。
sString.search(reg);返回在字符串中出现的一个匹配的位置（int）。
sString.replace(reg,reStrOrFunc);第二个参数可以是字符串或者函数（应该要有返回值吧？）
sString.split(reg);参数可以是正则表达式，如/\,/：“,”
元字符：( [ { ^ $ | ) ? * + .
特殊字符：
         制表符
         换行符
         回车符
f         换页符
a        alert字符
e        escape字符
cx      与X相对应的控制字符
        回退字符
v        垂直制表符
        空字符
字符类：
以下内容是个人的理解，如果您觉得其内容有误导他人的嫌疑，请留言相告，我会修改的。
[abc]，简单类：匹配方括号中任一字符，a或b或c；
^，负向类：是非的意思，如[^ab]表示匹配不包含a或b的情况；
[a-z]，范围类：匹配从a到z的字符。注意该例子不包含A-Z之间的字符，或者你可以使用i选项；
组合类：是由多种类组合而成的字符类。如：[a-k7-8 ]，匹配所有a-k以及7-8的字符，以及一个换行符；
预定义类：等同于：匹配
.                  [^ ]                除了换行和回车之外的任意字符
d                [0-9]                 数字
D               [^0-9]                非数字字符
s                [ x0Bf ]      空白字符
S               [^ x0Bf ]     非空白字符
w               [a-zA-Z_0-9]     单词字符（英文字符、数字和下划线）
W              [^a-zA-Z_0-9]   非单词字符
量词：
简单量词：
?  出现零次或一次
*  出现零次或多次（任意次数）
+  出现一次或多次（至少出现一次）
{n}  出现n次（固定次数）
{n,m} 至少出现n次，但不超过m次
{n,} 至少出现n次
2008.12.1
贪婪的、惰性的和支配性的量词
贪婪量词：先看整个字符串是否匹配。若没有发现匹配，则去掉最后字符串的最后一个字符再尝试匹配，如此循环，直到发现一个匹配或者字符串不剩一个字符。目前为止讨论的都是贪婪的量词。
惰性量词：先看字符串中的第一个字母是否匹配。若没有发现匹配，则读入下一个字符进行匹配尝试，如此循环，直到发下一个匹配或者整个字符串都检查过也没有匹配。它与贪婪量词的工作方式恰好相反。
支配量词：只尝试匹配整个字符串，若没有发现匹配，停止尝试。（返回false）
贪婪         惰性         支配         描述
?               ??            ?+           零次或一次出现
*                *?             *+           零次或多次出现
+               ++            ++           一次或多次出现
{n}            {n}?          {n}+        恰好n次出现
{n,m}       {n,m}?    {n,m}+    至少n次至多m次出现
{n,}           {n,}?        {n,}+       至少n次出现
PS：浏览器对支配量词的支持还很不完善。IE和Opera不支持支配量词，使用会抛出一个错误。Mozilla不会产生错误，但它会将支配量词看作是贪婪的。
分组：通过使用一系列小括号()包围一系列字符、字符类以及量词来使用。
String.prototype.trim = function(){var reg = /^s+(.*?)s+$/;return this.replace(reg,$1);}//该方法与其他语言中的trim()方法一样，用以除去字符串头尾的空格。
.1：在完成表达式计算后，每个分组都被存放在一个特殊的地方以备将来使用。这些存储在分组中的特殊值，称之为反向引用。如：(a?(b?(c?))),第一个反向引用为(a?(b?(c?)))，第二个为(b?(c?))，第三个为(c?)。
.2：在使用正则表达式对象的test()、match()或search()方法后，反向引用的值可以从RegExp构造函数中获得。如：
var sString = "#123456789";
var reg = /#(d+)/;
reg.test(sString);
alert(RegExp.$1);//outputs "123456789"
还可以直接在定义分组的表达式中包含反向引用。如 /dogdog/ === /(dog)1/
.3：反向引用可以用在String对象的replace()方法中：
var sString = "1234 56789";
var reg = /(d{4}) (d{4})/;
var sNew = sString.replace(reg,"$2 $1");
alert(sNew);//outputs "5678 1234";
候选操作符，“|”：类似于或操作。
var reg = /badword|otherbadword/gi;
var sString = "this is a string using badword1 and badword2";
var sNew = sString.replace(reg,"****");
alert(sNew);//outputs "this is a string using ****1 and ****2";//屏蔽敏感字词
创建反向引用的分组称之为捕获性分组，而非捕获性分组则无需存储结果；非捕获性分组创建方法：(?: /*..*/ )
String.prototype.stripHTML = function(){var reg=/<(?:.|s)*?>/g;return this.replace(reg,"");}//剔除字串中的HTML标签
var sTest = "<b>this is a test string</br>";
alert(sTest.stripHTML());//outputs "this is a test string"
前瞻：告诉正则表达式运算器向前看一些字符而不移动其位置，简单讲：当某个特定的字符分组出现在另一个字符串之前时，才去捕获它（或匹配它）。
前瞻存在正向前瞻和负向前瞻。
正向前瞻检查的是接下来出现的是不是某个特定字符集。而负向前瞻则检查接下来的不应该出现的特定字符集。（两则相对是非的关系，相关字符是否相连）
创建正向前瞻要将模式放在(?=和)之间。注意这不是分组，分组不会考虑前瞻的存在。
var sString1 = "bedroom";
var sString2 = "bedding";
var reg = /(bed(?=room))/;
alert(reg.test(sString1));//outputs "true"
alert(RegExp.$1); //outputs "bed"//引用不包含"room"
alert(reg.test(sString2));//outputs "false"
以上为正向前瞻，创建负向前瞻要将模式放在(?!和)之间。上个例子用负向前瞻将匹配bedding。
尽管JavaScript支持正则表达式前瞻，但它不支持后瞻。后瞻可以匹配这种模式：“匹配b当且仅当它前面没有a”。
边界      描述
^            行开头
$           行结尾
         单词的边界
B         非单词的边界
多行模式
在正则表达式后面添加m选项：/(d)/gm。将对每行进行匹配而不是只对全局。多行模式会改变^和&的边界行为。
RegExp对象的实例属性：
global——Boolean值，表示g（全局选项）是否已设置。
ignoreCase——Boolean值，表示i（忽略大小写选项）是否已设置。
lastIndex——整数，代表下次匹配将会从哪个字符位置开始（只有当使用exec()或test()函数才会填入，否则为0）。
multiline——Boolean值，表示m（多行模式选项）是否已设置。
source——正则表达式的源字符串形式。例如，表达式/[ba]*/的source将返回“[ba]*”。
属性lastIndex表示正则表达式在某个字符串中停止之前，查找了多远：
var sString="bbq is short for barbecue";
var reg=/b/g;
reg.exec(sString);
alert(reg.lastIndex);//outputs "1"
reg.exec(sString);
alert(reg.lastIndex);//outputs "2"
reg.exec(sString);
alert(reg.lastIndex);//outputs "18"
reg.exec(sString);
alert(reg.lastIndex);//outputs "21"
可以自行设定lastIndex；
静态的RegExp属性：
长名                短名        描述
input                 $_        最后用于匹配的字符串（传递给exec()或test()的字符串）
lastMatch        $&        最后匹配的字符
lastParen        $+        最后匹配的分组
leftContext       $`        在上次匹配的前面的字串
multiline          $*        用于指定是否所有的表达式都使用多行模式的布尔值
rightContext    $'        在上次匹配之后的字串
这些属性可以告诉你，关于刚使用exec()或test()完成的匹配的一些特定信息
var sString = "this has been a short,short summer";
var reg = /(s)hort/g;
reg.test(sString);
alert(RegExp.input);        //outputs "this has been a short,short summer"
alert(RegExp.leftContext);        //outputs "this has been a"
alert(RegExp.rightContext);        //outputs ", short summer"
alert(RegExp.lastMatch);        //outputs "short"
alert(RegExp.lastParen);        //outpus "s"
IE和Opera并不支持RegExp.multiline，所以最好单独的对每个表达式设置m选项而不要直接设置这个标记。
日期验证函数：
function isValidDate(str){   var reg=/(?:0[1-9]|[12][0-9]|3[01])/(?:0[1-9]|1[0-2])/(?:19|20d{2})/;    return reg.test(str);}
alert(isValidDate("5/5/2004"));        //outputs "true"
alert(isValidDate("5/13/2004"));        //outputs "false"
电子邮件地址验证函数：
function isValidEmail(str){ var reg=/^(?:w+.?)*w+@(?:w+.?)*w+$/; return reg.test(str);}
alert(isValidEmail("ake87#126.com")); //outputs false

Node往往被翻译为节点，在一个对象（可以简单的理解为是HTML页面中），一个属性name="aaa"可以是一个节点，一个< div id="aaa">……< /div>也可以是一个节点，在< body>……< /body>中的，也是一个大大的节点。下面是一些有关Node的属性和方法，并没有包含部分不兼容IE和FF内容的讲解。

Node的属性介绍：

nodeType：显示节点的类型
nodeName：显示节点的名称
nodeValue：显示节点的值
attributes：获取一个属性节点
firstChild：表示某一节点的第一个节点
lastChild：表示某一节点的最后一个子节点
childNodes：表示所在节点的所有子节点
parentNode：表示所在节点的父节点
nextSibling：紧挨着当前节点的下一个节点
previousSibling：紧挨着当前节点的上一个节点
ownerDocument：（不知）

Node有各种各样的节点，我们先花一些时间认识他们，同时一并了解nodeType，nodeName和nodeValue属性：
名称：元素节点
nodeType：ELEMENT_NODE
nodeType值：1
nodeName：元素标记名
nodeValue：null

<body>
<divid = "t" ><span></span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 1 DIV null
</script>

名称：属性节点
nodeType：ATTRIBUTE_NODE
nodeType值：2
nodeName：属性名
nodeValue：属性值

<body>
<divid = "t"name="aaa"><span></span></div>
</body>
<script>
var d = document.getElementById("t").getAttributeNode("name");
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 2 name aaa
</script>

名称：文本节点
nodeType：TEXT_NODE
nodeType值：3
nodeName：#text
nodeValue：文本内容

<body>
<divid = "t">bbb</div>
</body>
<script>
vard = document.getElementById("t").firstChild;
document.write(d.nodeType);
document.write(d.nodeName);
document.write(d.nodeValue);
//显示 3 #text bbb
</script>

名称：CDATA文本节点（XML中传递文本的格式）
nodeType：CDATA_SECTION_NODE
nodeType值：4
nodeName：#cdata-section
nodeValue：CDATA文本内容

（作者省略8个属性，需技术补充）

attributes属性，直接获取一个属性节点，注意这里要使用[]，保持IE和FF的兼容性。

<bodyname="ddd">
<divid = "t"name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").attributes["name"];
document.write(d.name);
document.write(d.value);
//显示 name aaa
</script>

firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点：

<body>
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.firstChild.innerHTML);
document.write(d.lastChild.innerHTML);
//显示 aaa ccc
</script>

childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组：

<bodyname="ddd">
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t");
document.write(d.childNodes[1].innerHTML);
document.write(d.parentNode.getAttribute("name"));
//显示 bbb ddd
</script>

nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点：

<bodyname="ddd">
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").childNodes[1];
document.write(d.nextSibling.innerHTML);
document.write(d.previousSibling.innerHTML);
//显示 ccc aaa
</script>

ownerDocument属性（不知如何使用）

Node的方法介绍：

hasChildNodes()：判定一个节点是否有子节点
removeChild()：去除一个节点
appendChild()：添加一个节点
replaceChild()：替换一个节点
insertBefore()：指定节点位置插入一个节点
cloneNode()：复制一个节点
normalize()：（不知）

hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false

<bodyname="ddd">
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
<divid = "m"></div>
</body>
<script>
alert(document.getElementById("t").hasChildNodes());
alert(document.getElementById("m").hasChildNodes());
// 第一个true，第二个false
</script>

removeChild()方法：去除一个节点

<bodyname="ddd">
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").removeChild(d);
// <span>aaa</span>被去除
</script>

appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入。

<bodyname="ddd">
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var d = document.getElementById("t").firstChild;
document.getElementById("t").appendChild(d);
// <span>aaa</span>成了最后一个节点
</script>

replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它。

<bodyname="ddd">
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var oldd = document.getElementById("t").lastChild;
document.getElementById("t").replaceChild(newd,oldd);
// 最后一项成了 eee
</script>

insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入

<bodyname="ddd">
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>
</body>
<script>
var newd = document.createElement("span");
newd.innerHTML = "eee";
var where = document.getElementById("t").lastChild;
document.getElementById("t").insertBefore(newd,where);
// 在最后一项的前面多了一项 eee
</script>

cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点

<bodyname="ddd">
<divid = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><divid = "m"></div>
</body>
<script>
varwhat = document.getElementById("t").cloneNode(false).innerHTML;
document.getElementById("m").innerHTML = what;
// 增加了一个aaabbbccc
</script>