javascript与DOM

Document对象的常用方法1、getElementById(id)通过元素的ID访问元素，这是DOM一个基础的访问页面元素的方法，我们要经常用到它.例如下面的例子，我们可以同DIV的ID迅速的访问到它，而不必通过DOM层层遍历，bodydivid=’divid’ph/pJustfortesting;/divdivid=’divid’Justfortesting;/divscriptvardiv=document.getElementById(‘divid’);alert(div.nodeName);/script/body注意使用这个函数时如果元素的ID不是唯一的，那么会获得第一个符合条件的元素。在IE6中如果input、checkbox,radio.等元素name匹配指定的ID，也会被访问到例如下面的例子中，获得的元素是input：bodyinputname='divid'type=text/divid='divid'Justfortesting;/divscriptvardiv=document.getElementById('divid');alert(div.nodeName);/script/body2、getElementsByName(name)返回名字是name的元素数组，在IE6中元素ID匹配这个名字的话，这个元素也将包括在内，而且getElementsByName()仅用于象input,radio,checkbox等元素对象。象下面例子中georges数组的长度应该是0。bodydivname=georgef/divdivname=georgef/divscripttype=text/javascriptvargeorges=document.getElementsByName(george);alert(georges.length);/script/body3、getElementsByTagName(tagname)getElementByTagName可以用于DOCUMENT也可以用元素。getElementsByTagName返回具有指定tagname的子元素列表（数组）。你可以遍历这个数组获得每一个单独的子元素。当处理很大的DOM结构，使用这种方法可以很容易的所有缩小范围。htmlheadtitle/titlescriptfunctionstart(){//获得所有tagName是body的元素（当然每个页面只有一个）myDocumentElements=document.getElementsByTagName(body);myBody=myDocumentElements.item(0);//获得body子元素种的所有P元素myBodyElements=myBody.getElementsByTagName(p);//获得第二个P元素myP=myBodyElements.item(1);//显示这个元素的文本alert(myP.firstChild.nodeValue);}/script/headbodyonload=start()phi/pphello/p/body/htmlDOMElement常用方法1、appendChild(node)向当前节点对象的追加节点。经常用于给页面动态的添加内容。例如下面给div添加一个文本节点：divid=test/divscripttype=text/javascriptvarnewdiv=document.createElement(div)varnewtext=document.createTextNode(Anewdiv)newdiv.appendChild(newtext)document.getElementById(test).appendChild(newdiv)/script上面的例子中给DIV添加文本，也可以用newdiv.innerHTML=”Anewdiv”实现，不过innerHTML不属于DOM2、removeChild(childreference)移除当前节点的子节点，返回被移除的节点。这个被移除的节点可以被插入document树中别的地方divid=fatherdivid=childAchild/div/divscripttype=text/javascriptvarchildnode=document.getElementById(child)varremovednode=document.getElementById(father).removeChild(childnode)/script3、cloneNode(deepBoolean)复制并返回当前节点的复制节点，这个复制得到的节点是一个孤立的节点，不在document树中。复制原来节点的属性值，包括ID属性，所以在把这个新节点加到document之前，一定要修改ID属性，以便使它保持唯一。当然如果ID的唯一性不重要可以不做处理。这个方法支持一个布尔参数，当deepBoolean设置true时，复制当前节点的所有子节点，包括该节点内的文本。pid=”mypara”11111/pp=document.getElementById(mypara)pclone=p.cloneNode(true);p.parentNode.appendChild(pclone);4、replaceChild(newChild,oldChild)把当前节点的一个子节点换成另一个节点例如：divid=adivspanid=innerspanspan/span/divscripttype=text/javascriptvaroldel=document.getElementById(innerspan);varnewel=document.createElement(p);vartext=document.createTextNode(“ppppp”);newel.appendChild(text);document.getElementById(adiv).replaceChild(newel,oldel);/script5、insertBefore(newElement,targetElement)给当前节点插入一个新节点，如果targetElement被设置为null，那新节点被当作最后一个子节点插入，否则那新节点应该被插入targetElement之前的最近位置。bodyspanid=lovespan熊掌我所欲也!/span/bodyscripttype=text/javascriptvarlovespan=document.getElementById(lovespan)varnewspan=document.createElement(span)varnewspanref=document.body.insertBefore(newspan,lovespan)newspanref.innerHTML=鱼与;/script6、click()执行元素的一次点击，可以用于通过脚本来触发onClick函数scriptfunctionwow(){alert(我好象没有点鼠标啊);}/scriptdivid=testonclick='wow()'hhh/divscripttype=text/javascriptvardiv=document.getElementById(test);div.click();/scriptDOMElement的属性:（下面是常用的。IE5.0以上,mozllia都支持的）1、childeNodes返回所有子节点对象,例如tableid=mylisttrtd一个和尚有水喝。/td/trtrtd两个和尚挑水喝。/td/trtrtd三个和尚没水喝。/td/tr/tablescriptvarmsg=””varmylist=document.getElementById(mylist)for(i=0;imylist.childNodes.length;i++){vartr=mylist.childNodes[i];for(j=0;jtr.childNodes[j].length;j++){vartd=tr.childNodes[j];msg+=td.innerText;}}alert(msg);/script2、innerHTML这是一个事实上的标准，不属于w3cDOM，但是几乎所有支持DOM的浏览器，都支持这个属性。通过这个属性我们很容易修改一个元素的HTML。pb新人类，什么？！/b/pscripttype=text/javascriptwindow.onload=function(){document.getElementsByTagName(p)[0].innerHTML=b新新人类，什么？！/b}/script3、style返回一个元素的style对象的引用，通过它我们可以获得并修改每个单独的样式。例如下面的脚本可以修改一个元素的背景色document.getElementById(test).style.backgroundColor=yellow4、firstChild返回第一个子节点5、lastChild返回最后一个子节点6、parentNode返回父节点的对象。7、nextSibling返回下一个兄弟节点的对象8、previousSibling返回前一个兄弟节点的对象9、nodeName返回节点的HTML标记名称，使用英文的大写字母，如P,FONT例如divid='test'ddd/divscriptif(document.getElementById(test).nodeName==DIV)alert(ThisisaDIV);/script第一个例子：使用DOM1.0的javascript动态地创建一个HTMLtable。headtitleSamplecode/titlescriptfunctionstart(){//获得body的引用varmybody=document.getElementsByTagName(body).item(0);//创建一个table/table元素mytable=document.createElement(TABLE);//创建一个TBODY/TBODY元素mytablebody=document.createElement(TBODY);//创建行列for(j=0;j3;j++){//创建一个TR/TR元素mycurrent_row=document.createElement(TR);for(i=0;i3;i++){//创建一个TD/TD元素mycurrent_cell=document.createElement(TD);//创建一个文本元素currenttext=document.createTextNode(cellisrow+j+,column+i);//把新的文本元素添加到单元TD上mycurrent_cell.appendChild(currenttext);//appendsthecellTDintotherowTR//把单元TD添加到行TR上mycurrent_row.appendChild(mycurrent_cell);}//把行TR添加到TBODY上mytablebody.appendChild(mycurrent_row);}//把TBO