Javascript节点和列表操作实例摘要
(1)创建新节点
(createdocumentfragment) / /创建一个DOM片段
(createElement) / /创建一个特定的元素
(createTextNode) / /创建一个文本节点
(2)添加、删除、替换、插入
appendChild()
removechild()
作用()
InsertBefore()
(3)查找
(getElementsByTagName) / /标签名称
(getelementsbyname) / /元素的name属性值
(包括) / /元素ID唯一性
本节中使用的HTML示例
项目1
第二
项目三
1。创建元素节点
的document.createelement()方法来创建一个元素,接受一个参数,即要创建的元素的标记名称,并返回创建的元素节点
var div = document.createelement(div); / /创建一个DIV元素
div.id =mydiv ; / /套div ID
div.classname =盒子; / /套DIV类
创建元素后将元素添加到文档树中
2。添加元素节点
的作用是:()方法用于对子的末端添加一个节点列表返回的元素节点被添加。
VaR UL = document.getelementbyid(mylist ); / / UL
Var Li = document.createelement(礼); / /创建李
li.innerhtml =四工程; / /将文本添加到李
ul.appendchild(李); / /李加入到UL在子节点的结束
在加入:
项目1
第二
项目三
项目四
的作用是:()方法可以将元素从原来的位置到新的位置添加一个现有的元素。
VaR UL = document.getelementbyid(mylist ); / / UL
ul.appendchild(UL。firstChild); / /首元结点UL UL在子节点的结束
手术后(IE):
第二
项目三
项目1
InsertBefore()方法,如果不是在最后插入,但是要把它放在一个特定的位置,使用这种方法,该方法接受2个参数,第一个是要插入的节点,二是参考节点,并返回元素节点被添加。
VaR UL = document.getelementbyid(mylist ); / / UL
Var Li = document.createelement(礼); / /创建李
李。innerHTML =四工程; / /将文本添加到李
ul.insertbefore(李,UL,firstChild); / /李加入到UL在第一个子节点
在加入:
项目四
项目1
第二
项目三
VaR UL = document.getelementbyid(mylist ); / / UL
Var Li = document.createelement(礼); / /创建李
李。innerHTML =四工程; / /将文本添加到李
ul.insertbefore(李,UL认证。lastchild); / /李加入到UL端节点
在加入:
项目1
第二
项目三
项目四
VaR UL = document.getelementbyid(mylist ); / / UL
Var Li = document.createelement(礼); / /创建李
李。innerHTML =四工程; / /将文本添加到李
VaR LIS = ul.getelementsbytagname(礼) / /李UL集合所有
ul.insertbefore(李,LIS { 1 }); / /加李在UL二李节点之前
在加入:
项目1
项目四
第二
项目三
三.删除元素节点
的removechild()方法用于删除节点,接受一个参数,即要移除的节点,返回被删除的节点,注意,删除节点仍然是文档,而文档中没有位置。
VaR UL = document.getelementbyid(mylist ); / / UL
无功fromfirstchild = ul.removechild(UL。firstChild); / / UL去除第一个子节点
VaR UL = document.getelementbyid(mylist ); / / UL
VaR LIS = ul.getelementsbytagname(礼) / /李UL集合所有
ul.removechild(LIS { 0 }); / /删除第一李,与上述不同,考虑浏览器之间的差异
4。置换元素节点
()方法的作用是用来取代节点,接受两个参数。第一个参数是要插入的节点,第二个参数是要替换的节点,并返回替换节点。
VaR UL = document.getelementbyid(mylist ); / / UL
无功fromfirstchild = ul.replacechild(UL。firstChild); / / UL取代第一个子节点
VaR UL = document.getelementbyid(mylist ); / / UL;
Var Li = document.createelement(礼); / /创建李
李。innerHTML =四工程; / /将文本添加到李
VaR LIS = ul.getelementsbytagname(礼) / /李UL集合所有
无功returnnode = ul.replacechild(李,LIS { 1 }); / /替换原有的二里创建李
5。复制节点
cloneNode()方法用于复制节点和接受一个布尔参数。true表示深层复制(复制节点及其所有子节点)。false表示浅复制(复制节点本身,而不是复制子节点)。
VaR UL = document.getelementbyid(mylist ); / / UL
无功deeplist = ul.clonenode(true); / /深拷贝
无功shallowlist = ul.clonenode(假); / /浅拷贝
接下来,给您一个Javascript列表项目,以复制子节点的完整实例:
这个Javascript代码显示和构建列表项,复制子节点和复制节点树,这非常有用,在构建树菜单时特别有用。
运行效果如下图所示:
具体代码如下:
建立一个清单项目
功能printchilds(objnode){
无功strmsg =节点名称=+ objnode.nodename + ;
如果(objnode.haschildnodes()){
无功nodecount = objnode.childnodes.length;
strmsg =子节点=+ objnode.childnodes.length +;
对于(var i = 0;i < nodecount;i++)
strmsg =标签名称=+ objnode。子{我}形式+。;
警报(strmsg);
}
}
功能copynode(objnode,objdupnode,深){
无功tempnode = objdupnode.clonenode(深);
objnode.appendchild(tempnode);
}
建立一个清单项目
项目1
项目2
子项目1
子项目2
项目3
希望本文能对大家的javascript程序设计有所帮助。