DOM方法和属性 使用范例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>DOM方法和属性</title>
<script language="javascript">
function AddElement()
{
var para = document.createElement("p");
para.setAttribute("title","My paragraph");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.getElementById("container").appendChild(para);
//alert(para.nodeName); //P
//alert(message.nodeName); //#text
//alert(para.nodeType); //1
//alert(message.nodeType); //3
//var value = para.getAttribute("title");
//alert(value);
}
function CloneNode()
{
var para = document.createElement("p");
para.setAttribute("id","p1");
para.setAttribute("title","My paragraph");
var message = document.createTextNode("hello world");
para.appendChild(message);
document.getElementById("container").appendChild(para);
var newpara = para.cloneNode(true);
//alert(newpara.getAttribute("id"));
newpara.setAttribute("id","p2");
//alert(newpara.childNodes[0].nodeValue);
document.getElementById("container").appendChild(newpara);
}
function Analyse()
{
var sel = document.getElementById("sel2");
alert(sel.childNodes.length); //6
var NodesArray = sel.childNodes;
for(var i=0;i<NodesArray.length;i++)
{
//alert(sel.childNodes[i].nodeName);
if(i%2 != 0) // 1 3 5
{
//var _value = sel.childNodes[i].childNodes[0].nodeValue;
//var _value = sel.childNodes[i].getAttribute("value");
//var _value = NodesArray[i].childNodes[0].nodeValue;
var _value = NodesArray.item(i).childNodes[0].nodeValue;
alert(_value);
}
else
{
//var value = sel.childNodes[i].nodeValue;
//alert(value);
}
}
}
function RemoveChild()
{
var sel2 = document.getElementById("sel2");
if(sel2.hasChildNodes)
{
var firstoption = sel2.childNodes[1];
if(firstoption)
{
var removednode = firstoption.parentNode.removeChild(firstoption);
alert(removednode.childNodes[0].nodeValue);
}
}
}
function ReplaceChild()
{
var sel2 = document.getElementById("sel2");
var newoption = document.createElement("option");
newoption.setAttribute("value","4");
var text = document.createTextNode("4");
newoption.appendChild(text);
var oldoption = sel2.replaceChild(newoption,sel2.childNodes[1]);//返回oldoption
//alert(oldoption.getAttribute("value"));
}
function CycleSelect1()//遍历下拉列表各个选项 从第一个开始
{
var sel2 = document.getElementById("sel2");
//alert(sel2.tagName);
var tempChild = null;
tempChild = sel2.firstChild;
while(tempChild)
{
if(tempChild.tagName == "OPTION")
{
//alert(tempChild.tagName);
alert(tempChild.getAttribute("value"));
}
tempChild = tempChild.nextSibling;
}
}
function CycleSelect2()//遍历下拉列表各个选项 从最后一个开始
{
var sel2 = document.getElementById("sel2");
//alert(sel2.tagName);
var tempChild = null;
tempChild = sel2.lastChild;
while(tempChild)
{
if(tempChild.tagName == "OPTION")
{
//alert(tempChild.tagName);//OPTION
//alert(tempChild.nodeName);//OPTION
alert(tempChild.getAttribute("value"));
}
tempChild = tempChild.previousSibling;
}
}
function GetElementsByTagName()
{
var sel2 = document.getElementById("sel2");
var _array = sel2.getElementsByTagName("OPTION");
for(var i=0;i<_array.length;i++)
{
var _value = _array.item(i).childNodes[0].nodeValue;
alert(_value);
}
}
function appendChildCutPaste()//剪切粘贴
{
var sel2 = document.getElementById("sel2");
var child1 = sel2.getElementsByTagName("OPTION").item(0);
sel2.appendChild(child1);
}
function InsertBefore()
{
var sel2 = document.getElementById("sel2");
var _text = sel2.options.length.toString();
var newoption = document.createElement("option");
newoption.setAttribute("value",_text);
var text = document.createTextNode(_text);
newoption.appendChild(text);
sel2.insertBefore(newoption,sel2.lastChild);
}
function InsertBeforeCutPaste()
{
var sel2 = document.getElementById("sel2");
sel2.insertBefore(sel2.options[0],sel2.lastChild);
}
function insertAfter(newElement,targetElement)//把给定节点插入到给定子节点的后面
{
var parent = targetElement.parentNode;
if(parent.lastChild == targetElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function InsertAfter()
{
var sel2 = document.getElementById("sel2");
var _text = sel2.options.length.toString();
var newoption = document.createElement("option");
newoption.setAttribute("value",_text);
var text = document.createTextNode(_text);
newoption.appendChild(text);
insertAfter(newoption,sel2.lastChild);
}
function InsertAfterCutPaste()
{
var sel2 = document.getElementById("sel2");
insertAfter(sel2.options[0],sel2.lastChild);
//insertAfter(sel2.options[0],sel2.options[2]);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="提交" onclick="AddElement();" />
<input type="button" value="CloneNode" onclick="CloneNode();" />
<div id="container">
</div>
<hr />
<select id="sel1" multiple size=1>
<option selected value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
</select>
<hr />
<select id="sel2" size="1">
<option selected value=0>0</option>
<option value=1>1</option>
<option value=2>2</option>
</select><br />
<input type="button" value="分析" onclick="Analyse();" />
<input type="button" value="RemoveChild" onclick="RemoveChild();" />
<input type="button" value="ReplaceChild" onclick="ReplaceChild();" />
<input type="button" value="遍历下拉列表各个选项 从第一个开始" onclick="CycleSelect1();" />
<input type="button" value="遍历下拉列表各个选项 从最后一个开始" onclick="CycleSelect2();" />
<input type="button" value="GetElementsByTagName" onclick="GetElementsByTagName();" />
<br />
<input type="button" value="appendChild剪切粘贴" onclick="appendChildCutPaste();" />
<input type="button" value="insertBefore" onclick="InsertBefore();" />
<input type="button" value="insertBefore剪切粘贴" onclick="InsertBeforeCutPaste();" />
<input type="button" value="insertAfter" onclick="InsertAfter();" />
<input type="button" value="insertAfter剪切粘贴" onclick="InsertAfterCutPaste();" />
</form>
</body>
</html>
