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

最新推荐文章于 2024-08-24 06:01:41 发布

龙卷风之家

最新推荐文章于 2024-08-24 06:01:41 发布

阅读量7.4k

点赞数 1

分类专栏： JS 文章标签： input string xhtml html 文档 border

JS 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何利用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>