当前位置:首页 > 日记 > 正文

Javascript节点和列表操作实例摘要

Javascript节点和列表操作实例摘要
本文的示例总结了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程序设计有所帮助。

相关文章

2015最流行的搞笑签名和搞笑签名

2015最流行的搞笑签名和搞笑签名

搞笑,最流行,电脑软件,浏览器真的很想知道它们是否是默认浏览器。 如果一个女孩喜欢你,不管你喜欢不喜欢她,请好好对待她。毕竟,她是盲人。 不要问我为什么不回你身边,我不冷,只是冰冷的手。 我想这段时期结束时,咸鱼翻过来,谁用力过大,翻过来又回…

PS电影海报超级英雄超级动作片的合

PS电影海报超级英雄超级动作片的合

英雄,动作片,电影海报,电脑软件,PS,本教程是介绍朋友PS合成超级英雄动作片的海报,海报教程出来的真的很好,推荐我希望你能学会制作思路,发挥自己的想象力,学到更多的知识。 在本教程中,我们将教你如何使用PS图象处理软件合成酷超级英雄电影海报…

如何粘贴CAD图到逐字逐句的使用技

如何粘贴CAD图到逐字逐句的使用技

逐字逐句,技术,电脑软件,CAD,有时我们需要把CAD图粘贴到Word中,但是很多朋友不知道怎么做。事实上,这很简单。这里是萧边的一个小例子向你展示如何使用AutoCAD 2010为例做。 1,打开需要粘贴的CAD地图(这里随机绘制3个圆)。 2,按Ctrl + C(复制),框…

美丽的美丽的秋天的橙绿色PS图象处

美丽的美丽的秋天的橙绿色PS图象处

美丽,图象,处理软件,秋天,电脑软件,本文主要介绍了美丽的秋天的橙绿色的风景秀丽的PS图象处理软件,教程是非常简单的,你喜欢可以一起找朋友。 材料图片的主色为黄绿色,当高光区域为黄绿色到橙黄色;绿色稍亮点;然后以图像局部增加高光,整体处理可…

PS图象处理软件设计图酷的魔术风格

PS图象处理软件设计图酷的魔术风格

图象处理,魔术,海报,图酷,风格,用手绘添加到电商可以达到很多有趣的效果,虽然不是做游戏场景的境界,但至少你可以做你想做的,不怕被认为画面不到位。 用手绘添加到电商可以达到很多有趣的效果,虽然不是做游戏场景的境界,但至少你可以做你想做的…

WPS如何建立纵向打印WPS文本教程

WPS如何建立纵向打印WPS文本教程

教程,文本,纵向,电脑软件,WPS,我们经常使用WPS来处理文本并打印它。当我们有一些文章垂直打印时,我们如何设置它这里简要介绍WPS垂直打印设置方法。我希望能帮助你。 1,首先打开WPS,然后输入文本文件,然后单击开始打印页面设置页边距= = =。 2,…

CDR合成简单的绘制和填充颜色的方

CDR合成简单的绘制和填充颜色的方

绘制,方法,填充,颜色,简单,本教程是介绍一个朋友到CDR,只需绘制一个坚实的地图和填写的颜色方法。这个教程很好。值得学习。建议像你这样的朋友可以按照教程学习。 本教程教朋友绘制立体图和填充颜色与CDR。教程很简单。这很简单。这是写给…

PS图象处理软件是非常精致的奶油巧

PS图象处理软件是非常精致的奶油巧

奶油,图象,处理软件,文字效果,精致,正文的写作大致分为两部分:第一部分是巧克力部分。在制作之前,你需要先找出巧克力的方块形状,然后将它定义为一个图案,然后使用图层样式来控制浮雕效果,然后在奶油色效果的底部,利用笔触路径设置,从而可以获得图…

WPS表如何调整线距离WPS表教程

WPS表如何调整线距离WPS表教程

教程,调整,距离,电脑软件,WPS,我们经常使用WPS作为一种形式,有些时候我们输入一个长文本,在输入完成后只显示几个字。这时我们将调整行高,下面的小编辑器分享WPS表如何调整间距。 方法一:首先,我们可以双击列的行。 方法二: 1,单击工具栏行和列;。 …

经典搞笑个性签名搞笑个性签名

经典搞笑个性签名搞笑个性签名

个性签名,搞笑,经典,电脑软件,别以为我不知道。我得到了它.你已经告诉我父母了。 像我这样的简单的人不能用这样的心做这样的数学题。 每次考试我都得了零分,所以我叫它王。 女人是女人,温柔的姐姐。 我希望我的朋友可以冒昧地读书,考上理想的…

WPS中插入对象的方法及常见问题WPS

WPS中插入对象的方法及常见问题WPS

对象,方法,文本,常见问题,教程,WPS中的对象插入方式及其常见问题 1。要注意清盘之道; 插入图像或表格的时候,有些读者不会使用的方式设置在它的周围,所以我们使用硬回车离开某些位置的图片和表格。此方法的布局混乱尽快重新安排。事实上,只要你…

在绿色的树叶的美丽和梦幻般的红棕

在绿色的树叶的美丽和梦幻般的红棕

图象,树叶,处理软件,梦幻般,美丽,我们需要的颜色是红棕色,但是当你能把所有的颜色都变成红棕色时,高光可以增加一点浅黄色;暗一点蓝紫色,这张图片更有层次感。 我们需要的颜色是红棕色,但是当你能把所有的颜色都变成红棕色时,高光可以增加一点浅…