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="#" onclick="return false;">列表项目</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=" 添加 " onclick="rdl_fnAppend()">

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[selectedIndex].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=" 删除 " onclick="rdl_doRemove()"></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[oSel.selectedIndex].value=="null") return;
var oNew=document.createElement("li");
eval("oList.insertBefore(oNew,"+oSel.options[oSel.selectedIndex].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="#" onclick="return false;">列表项目</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[0]);
}
i_nowheight=i_nowheight-15;
window.resizeTo(i_nowwidth,i_nowheight);
}

<div id=oParent>
<div>第1个子对象</div>
<div>第2个子对象</div>
<div><a href="#" onclick="return false;">第3个子对象</a></div>
<div>第4个子对象</div>
</div>
<br><input type=button value=" 删除第一个子对象 " onclick="rdl_doRemove()">

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=" 切换 "  onclick="rdl_replaceElement();">

createElement
语法：
    oElement = document . createElement ( sTagName )

参数：
    sTagName :必选项。字符串(String)。

返回值：
    oElement :对象(Element)。返回新建对象的引用。

function rdl_fnCreate(){
oData.innerHTML="";
with (oSel) var oOption=options[selectedIndex];
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[selectedIndex].value=="") return;
oFont.setAttribute(options[selectedIndex].innerText,options[selectedIndex].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[m].specified){
var oOption=document.createElement("option");
oSel.options.add(oOption,1); 
with (oOption) {value=innerText=oFont.attributes[m].nodeName}
}
}
oFont.title=oCodeDiv.innerText=oFont.outerHTML;
}

function doGetAttribute(){
with (oSel) {if (options[selectedIndex].value=="") return;
var sAttribute=options[selectedIndex].value;};
oCodeDiv.innerText=sAttribute+" = "+oFont.getAttribute(sAttribute,2);;
}

<input type=button color=red style="font-weight:bold" name=rdl case=died onmouseover="this.style.color='blue';" onmouseout="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[0].childNodes[0].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";}
}

<ul onclick="rdl_getTags();" style="cursor:default;" onmouseover="rdl_hoverLI();" 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>