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

本文介绍如何利用JavaScript中的DOM方法,如getElementById、getElementsByTagName、createElement、createTextNode等,实现动态添加HTML控件,以适应用户输入量的变化。通过实例展示了如何通过用户操作触发函数,自动在页面上添加输入行,包括姓名、性别和年龄字段。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

 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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值