JS操作DOM
参考资料：文档对象模型中文手册 苏昱作品cloneNode
语法：
oElement = object . cloneNode ( bCloneChildren )
参数：
bCloneChildren :可选项。布尔值(Boolean)。false | true false :默认值。克隆 object 时不包括 object 的 childNodes 集合。即其所有子对象。true :克隆 object 时包括 object 的 childNodes 集合。即其所有子对象。返回值：
oElement: 对象(Element)。返回克隆后的新对象的引用。
function rdl_fnClone(){var oCloneNode=oList.cloneNode(true);cloneArea.appendChild(oCloneNode);}
<table width=98%><tr><td><ul id=oList><li>第1个列表项目<li>第2个<a href="#" >列表项目</a><li style="font-weight:bold;">第3个列表项目</ul></td><td id=cloneArea></td></tr></table><input type=button value=" 克隆 " onclick= "rdl_fnClone();">
hasChildNodes
语法：
bChildNodes = object . hasChildNodes()
参数：
无
返回值：
bChildNodes :布尔值(Boolean)。false | true
false :object 不包含网页元素( HTML Elements )或 TextNode 对象。
true :object 包含网页元素( HTML Elements )或 TextNode 对象。
function rdl_eventHandle(e){var sHasChild;event.cancelBubble=true;if (event.srcElement.hasChildNodes()==true) sHasChild="有";else sHasChild="没有";switch (event.srcElement.id) {case "oParent" : oCode.innerText="我"+sHasChild+"子对象";break;case "oChild1" : oCode.innerText="我"+sHasChild+"子对象";break;case "oChild2" : oCode.innerText="我"+sHasChild+"子对象";break;default : oCode.innerText="请将鼠标移动到上面的色块中。";break;}}document.onmouseover=rdl_eventHandle;
<div id=oParent style="border:1px solid #000000;background:#6699CC;padding:6px;">第1个DIV<br><br><div id=oChild1 style="border:1px solid #000000;background:#999999;width:80%;">第2个DIV</div><br><div id=oChild2 style="border:1px solid #000000;background:#CC9966;width:80%;"></div></div><br><div id=oCode>请将鼠标移动到上面的色块中。</div>
appendChild
语法：
oElement = object . appendChild ( oNode )
参数：
oNode :必选项。对象(Element)。要被添加的对象。
返回值：
oElement :对象(Element)。返回被添加对象的引用。
var i_nowline=1;var i_nowwidth=320;var i_nowheight=200;function rdl_fnAppend(){var oNewNode=document.createElement("li");oList.appendChild(oNewNode);i_nowline=i_nowline+1;i_nowheight+=15;oNewNode.innerText="第"+i_nowline.toString()+"个列表项目";window.resizeTo(i_nowwidth,i_nowheight);}
<ul id=oList><li>第1个列表项目</ul><input type=button value=" 添加 " >
removeNode
语法：
oElement = object . removeNode ( bRemoveChildren )
参数：
bRemoveChildren :可选项。布尔值(Boolean)。false | true false :默认值。删除 object 时保留 object 的 childNodes 集合。即其所有子对象。true :删除 object 时也删除 object 的 childNodes 集合。即其所有子对象。
返回值：
oElement :对象(Element)。返回被删除对象的引用。
function rdl_doRemove(){var bRemoveChildren,sRemoveChildren;with (document.all("oSelect")) sRemoveChildren=options.value;eval("bRemoveChildren="+sRemoveChildren);document.all("oTextarea").removeNode(bRemoveChildren);}
<textarea id=oTextarea>子对象</textarea><br><br><table><tr><td>是否删除子对象: </td><td><select style="width:80px;" id=oSelect><option value="true">true</option><option value="false" selected>false</option></select></td><td><input type=button value=" 删除 " ></td>
insertBefore
语法：
oElement = object . insertBefore ( oNewNode , oChildNode )
参数：
oNewNode :必选项。对象(Element)。要被插入文档结构的对象。oChildNode :可选项。对象(Element)。定位插入点。 oNewNode 被插入到紧贴这个子对象的前面。
返回值：
oElement :对象(Element)。返回插入的对象的引用。
var iNow=3;var i_nowheight=240;function rdl_insert(){if (oSel.options.value=="null") return;var oNew=document.createElement("li");eval("oList.insertBefore(oNew,"+oSel.options.value+");");iNow++;i_nowheight+=15;oNew.innerText="第"+iNow.toString()+"个列表项目";oNew.style.color="#FF3300";window.resizeTo(320,i_nowheight);}
<ul id=oList><li id=oLI1>第1个列表项目<li id=oLI2>第2个<a href="#" >列表项目</a><li id=oLI3>第3个列表项目</ul><table><tr><td>插入到</td><td><select id="oSel" onchange="rdl_insert();"><option value="null">---请选择---<option value="oLI1">第1个列表项目<option value="oLI2">第2个列表项目<option value="oLI3">第3个列表项目</select></td><td>之前</td></tr></table>
removeChild
语法：
oElement = object . removeChild ( oChild )
参数：
oChild :必选项。对象(Element)。要被删除的子对象。
返回值：
oElement :对象(Element)。返回被删除对象的引用。
var i_nowwidth=320;var i_nowheight=240;function rdl_doRemove(){with (document.all("oParent")) {if (children.length<1) return;removeChild(children);}i_nowheight=i_nowheight-15;window.resizeTo(i_nowwidth,i_nowheight);}
<div id=oParent><div>第1个子对象</div><div>第2个子对象</div><div><a href="#" >第3个子对象</a></div><div>第4个子对象</div></div><br><input type=button value=" 删除第一个子对象 " >
replaceChild
语法：
oElement = object . replaceChild ( oNewNode , oChild )
参数：
oNewNode :必选项。对象(Element)。用于替换 oChild 的对象。oChild :必选项。对象(Element)。被 oNewNode 替换的对象。
返回值：
oElement :对象(Element)。返回被替换对象的引用。
function rdl_replaceElement(){var oChild=Div1.children(0);var sInnerHTML=oChild.innerHTML;if (oChild.tagName.toLowerCase()=="b"){oNewChild=document.createElement("i");Div1.replaceChild(oNewChild, oChild);oNewChild.innerHTML=sInnerHTML;} else {oNewChild=document.createElement("b");Div1.replaceChild(oNewChild, oChild);oNewChild.innerHTML=sInnerHTML;}}
<div id=Div1>点击下方的按钮将导致<b>这里的文字</b>在粗体和斜体之间切换。</div><br><input type=button value=" 切换 ">
createElement
语法：
oElement = document . createElement ( sTagName )
参数：
sTagName :必选项。字符串(String)。
返回值：
oElement :对象(Element)。返回新建对象的引用。
function rdl_fnCreate(){oData.innerHTML="";with (oSel) var oOption=options;if(oOption.text.length<1) return;var aElement=document.createElement(oOption.text);eval("aElement."+oOption.value+"='"+oText.value+"'");oView.innerText="document.createElement('"+oOption.text+"');"if(oOption.text=="A") {aElement.href="#"; aElement.onclick=new Function("return false;");}if(oOption.text=="<FORM>") {aElement.border="1px solid #CCCCCC";var oReset=document.createElement("<input type=reset id=shit>");aElement.appendChild(oReset);}oData.appendChild(aElement);}
<div id="oData"></div><br><table width=98%><tr><td><select id="oSel"><option value="innerText">A<option value="value">&lt;INPUT TYPE="button"&gt;<option value="innerText">&lt;FORM&gt;</select></td><td><input type="text" id="oText" value="示范文字" size=12></td><td><input type=button value=" 建立 " onclick= "rdl_fnCreate();"></td></tr></table><br><div id=oView style="font-size:10px;line-height:16px;background:#DFDFDF;padding:8px;"></div>
setAttribute
语法：
object . setAttribute ( sName , vValue , iFlags )
参数：
sName :必选项。字符串(String)。指定属性的名称。vValue :必选项。要赋给属性的值。可以是任何需要的变量类型。iFlags :可选项。整数值(Integer)。0 | 1 0 :当属性被设置的时候，对象任何已有的同名属性设置都会被覆盖，而不会考虑它们的大小写。1 :默认值。执行严格考虑字母大小写的属性设置。假如此方法的 iFlags 参数设置为 1 ，则执行 iFlags 参数设置为 0 的 getAttribute 方法时，满足 sAttrName 指定的特性名称不一定能被找到。
返回值：
无
var oCodeDiv;var oFont;var oSel;function window.onload(){oCodeDiv=document.all("idCodeDiv");oFont=document.all("idFont");oSel=document.all("idSel");oCodeDiv.innerText=oFont.outerHTML;}function doSetAttribute(){with (oSel) {if (options.value=="") return;oFont.setAttribute(options.innerText,options.value);};oCodeDiv.innerText=oFont.outerHTML;}
<input type=button id=idFont onmouseout="this.style.color='black';" value="这里有一些文字"><br><br><br><select id="idSel" onchange="doSetAttribute();"><option value="" style="font-weight:bold;">---请选择属性---<option value="font-weight:bold">style<option value="this.style.color='blue'">onmouseover<option value="rdl">name<option value="text">type</select><br><br><div id=idCodeDiv></div>
getAttribute
语法：
vAttrValue = object . getAttribute ( sAttrName , iFlags )
参数：
sAttrName :必选项。字符串(String)。指定属性的名称。iFlags :可选项。整数值(Integer)。0 | 1 | 2 0 :默认值。执行不考虑字母大小写的搜索，假如特性被找到了返回一个以内插值替换的值。假如 setAttribute 方法的 iFlags 参数设置为 1 而此方法的 iFlags 参数设置为 0 ， 则满足 sAttrName 指定的特性名称不一定能被找到。1 :执行严格考虑字母大小写的搜索。2 :严格的按照脚本或源文档里的设置返回值。
返回值：
vAttrValue :返回属性的值。可能是任意类型的变量。假如属性没有被呈递，则返回 null 。
var oCodeDiv;var oFont;var oSel;function window.onload(){oCodeDiv=document.all("idCodeDiv");oFont=document.all("idFont");oSel=document.all("idSel");for (m=0;m<oFont.attributes.length;m++) {if (oFont.attributes.specified){var oOption=document.createElement("option");oSel.options.add(oOption,1); with (oOption) {value=innerText=oFont.attributes.nodeName}}}oFont.title=oCodeDiv.innerText=oFont.outerHTML;}function doGetAttribute(){with (oSel) {if (options.value=="") return;var sAttribute=options.value;};oCodeDiv.innerText=sAttribute+" = "+oFont.getAttribute(sAttribute,2);;}
<input type=button color=red style="font-weight:bold" name=rdl case=diedonmouseout="this.style.color='black';" id=idFont value="这里有一些文字"></input><br><br><br><select id="idSel" onchange="doGetAttribute();"><option value="" style="font-weight:bold;">---请选择属性---<option value="case" style="font-weight:bold;">case</select><br><br><div id=idCodeDiv></div>
getElementsByTagName
语法：
arrElements = object . getElementsByTagName ( sTagName )
参数：
sTagName :必选项。字符串(String)。
返回值：
arrElements :数组(Array)。如果无符合条件的对象，则返回空数组。
function rdl_getTags(){event.cancelBubble=true;var oWorkItem=event.srcElement;var aReturn=oWorkItem.parentElement.getElementsByTagName("li");document.all("id_info").innerHTML="您选定的列表内有项目: <span style=\"color:#FF3300;\">"+aReturn.length.toString()+"<\/span> 个<br>"+"它的第一个列表项目是: <span style=\"color:#FF3300;\">"+aReturn.childNodes.nodeValue+"<\/span>";window.resizeTo(436,360);}function rdl_hoverLI(){event.cancelBubble=true;with (event.srcElement) {if (tagName.toLowerCase()=="li") style.color="#003399";}}function rdl_outsideLI(){event.cancelBubble=true;with (event.srcElement) {if (tagName.toLowerCase()=="li") style.color="#000000";}}
<ulstyle="cursor:default;"onmouseout="rdl_outsideLI();"><li>列表项目1<ul><li>列表项目1-1<ul><li>列表项目1-1-1<li>列表项目1-1-2</ul><li>列表项目1-2<li>列表项目1-3</ul><li>列表项目2<ul><li>列表项目2-1<li>列表项目2-2</ul><li>列表项目3</ul><span id=id_info></span>
页:
[1]