JavaScript节点总结及列表操作示例

总结了JavaScript节点和列表操作的方法。分享给大家参考。具体如下：

(1)创建新节点

CreateDocumentFragment() //创建一个DOM片段createElement() //创建一个具体元素createTextNode() //创建一个文本节点(2)添加、删除、替换和插入

append child()remove child()replace child()insert before()(3)搜索

GetElementsByName() //通过标记Name GetElementsByName()//通过元素getelementsbyId()的Name属性的值//通过元素Id，本节使用的html示例的唯一性

ul id=' my list ' Li project one/Lili project two/Lili project three/Lili/ul1。创建元素节点

document.createElement()方法用于创建一个元素，接受一个参数，即要创建的元素的标签名，并返回创建的元素节点

var div=document . create element(' div ')；//创建div元素div.id=' myDiv//设置div的id div . class name=' box '；//设置div的类来创建元素，然后将它们添加到文档树中。

2.添加元素节点

appendChild()方法用于将节点添加到childNodes列表的末尾，并返回要添加的元素节点

var ul=document . getelementbyid(' my list ')；//get ul var Li=document . create element(' Li ')；//创建lili.innerHTML=' item 4//添加文字ul。附赠李；//添加：后，在ul子节点的末尾添加li

Ul id=' mylist' liproject一/liliproject二/liliproject三/liliproject四/lili/ulappendchild()方法还可以添加现有元素，这将把它们从原始位置移动到新位置

var ul=document . getelementbyid(' my list ')；//获取ul。附录(ul。长子)；//将ul的第一个元素节点移动到ul子节点(IE)的末尾后：

ul id=' my list ' Li project 2/Lili project 3/Lili project 1/Lili/ulinsertbefore()方法，如果没有在末尾插入节点，则希望将其放在特定位置。使用此方法，此方法接受两个参数，第一个是要插入的节点，第二个是引用节点，并返回要添加的元素节点

var ul=document . getelementbyid(' my list ')；//get ul var Li=document . create element(' Li ')；//创建lili.innerHTML=' item 4//添加文字ul。插入前(li，ul。第一个孩子)给李；//在ul :的第一个子节点前后添加li

ul id=' my list ' Li project 4/Lili project 1/Lili project 2/Lili project 3/Lili/ulvar ul=document . getelementbyid(' my list ')；//get ul var Li=document . create element(' Li ')；//创建lili.innerHTML=' item 4//添加文字ul。插入前(li，ul。最后一个孩子)给李；//在ul的子节点末尾加上li，然后加上：

ul id=' my list ' Li project 1/Lili project 2/Lili project 3/Lili project 4/Lili/ulvar ul=document . getelementbyid(' my list ')；//get ul var Li=document . create element(' Li ')；//创建lili.innerHTML=' item 4//添加文本var lis=ul。getelementsbytagname ('li ')到li//获取ul.insertBefore(li，lis[1])中所有Li的集合；//在ul :的第二个li节点前后添加li

Ul id=' mylist项目一/Li项目四/Li项目二/Li项目三/Li/ul3。移除元素节点

removeChild()方法用于移除节点，接受参数，即要移除的节点，并返回移除的节点。请注意，移除的节点仍在文档中，但它在文档中的位置已消失。

var ul=document . getelementbyid(' my list ')；//从第一个孩子处获取ul var=ul。移除孩子(ul。第一个孩子)；//移除ul var ul=document . getelementbyid(' my list ')的第一个子节点；//获取ul var lis=ul。getelementsbytagname(' li ')//获取ul.removeChild(lis[0])中所有Li的集合；//去掉第一个li。与上面不同的是，考虑浏览器之间的差异。4.替换元素节点。

replaceChild()方法用于替换节点，接受两个参数，第一个参数是要插入的节点，第二个参数是要替换的节点，并返回被替换的节点

var ul=文档。getelementbyid('我的列表')；//获得第一个孩子的ulvar=ul。替换孩子(ul。第一个孩子)；//替换保险商实验所第一个子节点var ul=文档。getelementbyid('我的列表')；//获得ul；var Li=文档。创建元素(“李”)；//创建lili.innerHTML='项目四；//向里内添加文本var lis=ul。getelementsbytagname(' Li ')//获取保险商实验所中所有里的集合var returnNode=ul。替换子项(李，lis[1])；//用创建的里替换原来的第二个li5 .复制节点

克隆编号()方法，用于复制节点，接受一个布尔值参数，真的表示深复制（复制节点及其所有子节点),假的表示浅复制（复制节点本身，不复制子节点)

var ul=文档。getelementbyid('我的列表')；//获得ulvar deepList=ul.cloneNode(真);//深复制定义变量浅水列表=ul。克隆诺得(假)；//浅复制下面再给大家一个Java脚本语言建立列表项目，复制子节点的完整实例：

这段Java脚本语言代码显示和建立列表项目，复制子节点、复制节点树，是相当有用的一个例子，在建立树形菜单的时候尤其有用处。

运行效果如下图所示：

具体代码如下：

htmlheadtitle建立列表项目/title脚本语言=' JAVAScript '函数打印孩子(ObjNode){ var STrmsg='节点名称=' ObjNode . nodename ' \ nif(ObjNode。HasChildNodes()){ var nodeCount=Objnode。子节点。长度；'' strMsg='子节点数=' ObjNode。子节点。长度' \ n '；for(var I=0；i nodeCounti ) strMsg='标记名称=' objNode.childNodes[i].节点名' \ n警报(STrmsg)；} }函数copyNode(objNode，objDupNode，deep){ var tempNode=Objdupnode。克隆节点(深层)；objnode。append child(tempNode)；}/script/haedbody id='myBody'h2建立列表项目/h2hrul id='myUL' li项目一里项目2 ol id='myOL' li次项目一里次项目2 /ol li项目3/ulforminput type=' button ' value='显示列表的子节点onclick='printChilds(myUL)'输入类型='按钮'值='复制节点onclick='copyNode(myUL，myUL.childNodes[1]，false)'输入类型='按钮'值='复制节点树onclick=' copy node(myul。最后一个孩子，myOL，true)'/表单/正文/html希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。