您的位置：首页 > Web前端 > Node.js

js dom 方法 js中cloneNode()的使用（复制元素）

2012-01-08 22:22 567 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航