js dom 方法 js中cloneNode()的使用(复制元素)
document方法:
getElementById(id)
Node
返回指定结点的引用
getElementsByTagName(name)
NodeList
返回文档中所有匹配的元素的集合
createElement(name)
Node
Node
createTextNode(text)
Node
创建一个纯文本结点
ownerDocument
Document
指向这个节点所属的文档
documentElement
Node
返回html节点
document.body
Node
返回body节点
element方法:
getAttribute(attributeName)
String
返回指定属性的值
setAttribute(attributeName,value)
String
给属性赋值
removeAttribute(attributeName)
String
移除指定属性和它的值
getElementsByTagName(name)
NodeList
返回结点内所有匹配的元素的集合
node方法:
appendChild(child)
Node
给指定结点添加一个新的子结点
removeChild(child)
Node
移除指定结点的子结点
replaceChild(newChild,oldChild)
Node
替换指定结点的子结点
insertBefore(newChild,refChild)
Node
在同一层级的结点前面插入新结点
hasChildNodes()
Boolean
如果结点有子结点则返回true
node属性:
nodeName
String
以字符串的格式存放结点的名称
nodeType
String
以整型数据格式存放结点的类型
nodeValue
String
以可用的格式存放结点的值
parentNode
Node
指向结点的父结点的引用
childNodes
NodeList
指向子结点的引用的集合
firstChild
Node
指向子结点结合中的第一个子结点的引用
lastChild
Node
指向子结点结合中的最后一个子结点的引用
previousSibling
Node
指向前一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null
nextSibling
Node
指向后一个兄弟节点;如果这个节点就是兄弟节点,那么该值为null
在web页面中经常需要出现许多完全一样的控件项,而需要控件的多少完全由用户输入量决定,在js中可
以很容易的实现这点,效果展示大多时候比语言来得更有魅力。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>控件cloneNode()方法的使用</title>
<script language="javascript">
i=1;
function AddRow()
{
var tableObject=new Object();
var isneed=true;
tableObject=document.getElementById("CloneNodeShow");
//判断是否有必要添加新的输入行
for(var j=0;j<tableObject.all.tags("input").length;j++)
{
var inputs = tableObject.all.tags("input")[j];
if(inputs.type=="text" && inputs.value=="")
{
isneed=false;
}
}
if(isneed)
{
//添加一行
var newTR=tableObject.insertRow();
var td0=newTR.insertCell();
var td1=newTR.insertCell();
var td2=newTR.insertCell();
var td3=newTR.insertCell();
td0.innerHTML=(++i)+'.';
td1.innerHTML='<input type="text" name="username"/>';
//true表示深度克隆
var newSelect=document.getElementById("sexType").cloneNode(true);
newSelect.id="sexType"+i;
td2.appendChild(newSelect);
td3.innerHTML='<input type="text" name="age" onchange="AddRow()"/>';
}
}
</script>
</head>
<body>
<form>
<table id="CloneNodeShow" border="2" bordercolor="#000000">
<tr><th></th><th>姓名</th><th>性别</th><th>年龄</th></tr>
<tr id="signTR" >
<td>1.</td>
<td><input type="text" name="username"/></td>
<td>
<select name="sexType" id="sexType">
<option value="%">请选择性别</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
</td>
<td><input type="text" name="age" onchange="AddRow()"/></td>
</tr>
</table>
</form>
</body>
</html>