- 浏览: 251678 次
- 性别:
- 来自: 上海
最新评论
-
lazyox_2008:
多谢楼主配对那一段,解决了我的大问题啊
android蓝牙主动发起配对实例 -
yandol:
这个反射的createBond用法很有意思 这个代码能像非an ...
android蓝牙主动发起配对实例 -
hzxlb910:
例子还是短小看着一目了然。不错
初识AOP -
lteb2002:
在WEB中,是使用WebApplicationContext的 ...
[转]Spring中WebApplicationContext的研究 -
Mark_dev:
请问一下楼主,这个UUID是不是和设备有关啊,我使用你的 co ...
android蓝牙主动发起配对实例
在前端展现越来越丰富的今天,DOM对象可以说变得非常重要(其实一直都重要),下面转摘一篇写的不错的文档,供大家以后查阅:
使用data、nodeValue和src属性 DOM 提供了2个属性用于修改文本节点的内容,它们是data和nodeVaule。2个属性实现的功能相同,语法是:object.data="new value"或者object.nodeVaule="new value",其中object代表页面中的文本项节点。如果修改图形文件的内容,语法是:object.src="new value",其中object表示页面中的img标记节点。来看看下面的例子:
上述代码首先显示页面的初始内容以及节点p1Node的相关属性值,然后对节点bodyNode的第1个孩子节点的nodeValue属性进行赋值修改其文本内容,对节点p3Node的第2个孩子节点(也就是了img标记)的src属性进行赋值修改图形的内容。 使用createElement方法 createElement 方法的功能是在文档中创建一个孤立HTML标记节点。孤立节点既没有孩子节点也没有双亲节点,而且与文档中的现存节点也互不关联。被创建的孤立HTML标记节点的唯一信息就是它代表的HTML标记,比如< P>、< FONT>和< TABLE>。CreateElement的语法为document.createElement(HTMLTag),HTMLTag表示要创建的 HTML标记,返回值是创建的孤立HTML标记节点。来看看下面的例子:
上述代码在文档中创建了4个孤立HTML标记节点tableObj、tbodyObj、trObj和tdObj,它们就象太空中4颗人造卫星一样,彼此间以及和文档中的现有节点间都互不关联。创建孤立节点的目的不是为了让它真正孤立,随后我们会介绍如何将创建的孤立节点彼此相连,并添加到文档的DOM Tree结构中。 使用cloneNode方法 cloneNode方法的功能是通过克隆(也就是复制)文档中一个现存节点的方式创建文档的一个孤立节点。根据被克隆节点的类型,新创建的孤立节点或者是HTML标记节点,或者是包含字符串信息的文本项节点。 cloneNode的语法为oldNode.createNode(false)或者oldNode.createNode(true),oldNode 表示被克隆的节点,返回值是新创建的节点,false表示仅仅克隆oldNode,true表示克隆oldNode并包含其下属节点。来看看下面的例子:
上述代码中值得注意的是对文本项节点的处理方式: 1、首先,使用语句row1cell1Obj = document.createTextNode("This is row 1, cell 1")创建单元格(1,1)所在节点; 2、然后使用语句row1cell1Obj.cloneNode(false)分别创建其他单元格节点; 3、最后,使用语句node.nodeValue = string分别为不同单元格赋值。使用appendChild方法 appendChild 方法的功能是在2个节点间建立起父子关系,如果作为父亲的节点已经具有了孩子节点,那么新添加的孩子节点被追加为最后一个孩子,也就是 lastChild。appendChild的语法是fatherObj.appendChild(childObj),返回值是被追加的孩子节点。来看看下面的例子:
上面的代码演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点,然后使用appendChild将这些节点进行连接形成一个Table,最后通过语句bodyNode.appendChild(tableObj)将Table装载进文档中。 使用applyElement方法 applyElement 方法的功能是将一个节点与它的孩子节点和父亲节点脱离,然后将另外一个节点连接到这个节点,最终使它们成为父子关系。applyElement的语法是 childObj.applyElement(fatherObj),返回值是被连接的孩子节点。 我们注意到,applyElement和appendChild实现的目的基本相同,都是在2个节点间建立父子关系,但有2个区别: 1、applyElement方法只能操纵HTML标记节点,不能处理文本项节点。appendNode则能处理2种节点。 2、appendNode对2个节点的连接方式是从父到子,applyElement则是从子到父。 来看看下面的例子:
上面的代码同样演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点,然后混合使用applyElement和 appendChild将这些节点进行连接形成一个Table,最后通过语句bodyNode.appendChild(tableObj)将Table 装载进文档中 使用insertBefore方法 insertBefore方法的功能和 appendChild相似,都是将一个孩子节点连接到一个父亲节点,但insertBefore方法允许我们指定孩子节点的位置。 insertBefore的语法是fatherObj.insertBefore(childObj, brotherObj),返回值是被连接的孩子节点。执行后,childObj的位置在brotherObj之前。来看看下面的例子:
上面的代码又一次演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点,然后混合使用insertBefore将这些节点进行连接形成一个Table,最后通过语句bodyNode. insertBefore (tableObj)将Table装载进文档中。可以看到,如果省略掉第2个参数brotherObj采用fatherObj.insertBefore (childObj)方式,那么一定是在要连入的父亲节点还没有孩子节点的情况下,这时,就和appendNode方法的功能完全一样了。 使用removeNode方法 removeNode 方法的功能是删除一个节点,语法为node.removeNode(false)或者node.removeNode(true),返回值是被删除的节点。removeNode(false)表示仅仅删除指定节点,然后这个节点的原孩子节点提升为原双亲节点的孩子节点。removeNode(true)表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点,不再具有有孩子节点和双亲节点。来看看下面的例子:
上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后仅仅删除p3Node。删除p3Node前, bodyNode有6个孩子节点,p3Node有4个孩子节点。删除p3Node后,节点p3Node的4个孩子节点提升为bodyNode的孩子节点,这样bodyNode就有了9个节点。p3Node被删除后返回值为deletedNode,它的nodeName属性值为P,孩子节点数为0,也就是说,它成为一个孤立节点。 现在我们将上述代码中的deletedNode = p3Node.removeNode(false)修改为deletedNode = p3Node.removeNode(true),你会看到,删除p3Node后,bodyNode的孩子节点数变为5。使用replaceNode方法 replaceNode方法的功能是用新创建的节点替换一个节点及其下属节点,语法为oldNode.replaceNode(newNode),返回值是被替换的节点。来看看下面的例子:
上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后用新创建的文本项节点替换p3Node。替换后, bodyNode的孩子节点数目没有变,原来的P节点替换为文本项节点。变量replaceNode表示被替换的节点p3Node,它仍包含原来的4个孩子节点。 replaceNode方法的另一个功能是删除节点及其下属节点,就象前面介绍的removeNode(true)一样。这时,我们只需将replaceNode方法的参数设置为一个现存的节点就可以。现在,我们将上述代码中的b = document.createTextNode("New Body Page")修改为b = p2Node,你会看到,p3Node及其下属节点被删除了,没有替换节点生成,bodyNode的孩子节点数变为5。 如果replaceNode方法的参数为空,也就是执行replaceNode(),那么将导致浏览器脚本运行错误。 使用swapNode方法 swapNode方法的功能是交换2个节点(包括其下属节点)在文档Tree中的位置,语法为firstNode.swapNode(secondNode),返回值是节点firstNode。来看看下面的例子:
上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后交换p3Node和p2Node的位置。交换后,bodyNode的孩子节点数目没有变,变量swappedNode表示p3Node,它仍包含原来的4个孩子节点。 swapNode 方法的另一个功能是替换节点及其下属节点,就象前面介绍的replaceNode方法一样。这时,我们只需将replaceNode方法的参数设置为一个新创建的节点就可以。现在,我们将上述代码中的b = p2Node修改为b = document.createTextNode("This is a swapped in text"),你会看到,p3Node及其下属节点被新创建的文本项节点所替换,原来的节点类型P变为了文本项节点类型#text。
转摘自http://bbs.javascript.com.cn/simple/index.php?t180.html
使用data、nodeValue和src属性 DOM 提供了2个属性用于修改文本节点的内容,它们是data和nodeVaule。2个属性实现的功能相同,语法是:object.data="new value"或者object.nodeVaule="new value",其中object代表页面中的文本项节点。如果修改图形文件的内容,语法是:object.src="new value",其中object表示页面中的img标记节点。来看看下面的例子:
<HTML><HEAD><TITLE> DOM Demo </title></HEAD> <BODY ID="bodyNode"> This is the document body <P ID = "p1Node">This is paragraph 1.</P> <P ID = "p2Node">This is paragraph 2.</P> <P ID = "p3Node">This is paragraph 3. <IMG ID = "imgNode" SRC="myexam.gif">This text follows the image <TABLE ID="tableNode"> <TR><TD BGCOLOR=yellow>This is row 1, cell 1</TD><TD BGCOLOR=orange>This is row 1, cell 2</TD></TR> <TR><TD BGCOLOR=red>This is row 2, cell 1</TD><TD BGCOLOR=magenta>This is row 2, cell 2</TD></TR> <TR><TD BGCOLOR=lightgreen>This is row 3, cell 1</TD><TD BGCOLOR=beige>This is row 3, cell 2</TD></TR> </TABLE> </P> <P ID = "p4Node">This is paragraph 4.</P> <SCRIPT LANGUAGE="JavaScript"> <!-- alert( "页面初始状态" + "\n\n" + "bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "\n" + "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" ); bodyNode.firstChild.nodeValue = "This is the new document body, set by the nodeValue property"; p3Node.childNodes[1].src = "myexam2.gif"; alert( "对页面内容进行修改后" + "\n\n" + "bodyNode.firstChild.nodeValue = " + bodyNode.firstChild.nodeValue + "\n" + "bodyNode.firstChild.data = " + bodyNode.firstChild.data + "\n" + "p3Node.childNodes[1].src = " + p3Node.childNodes[1].src ); // --> </SCRIPT></BODY></HTML>
上述代码首先显示页面的初始内容以及节点p1Node的相关属性值,然后对节点bodyNode的第1个孩子节点的nodeValue属性进行赋值修改其文本内容,对节点p3Node的第2个孩子节点(也就是了img标记)的src属性进行赋值修改图形的内容。 使用createElement方法 createElement 方法的功能是在文档中创建一个孤立HTML标记节点。孤立节点既没有孩子节点也没有双亲节点,而且与文档中的现存节点也互不关联。被创建的孤立HTML标记节点的唯一信息就是它代表的HTML标记,比如< P>、< FONT>和< TABLE>。CreateElement的语法为document.createElement(HTMLTag),HTMLTag表示要创建的 HTML标记,返回值是创建的孤立HTML标记节点。来看看下面的例子:
<HTML><HEAD><TITLE> DOM Demo </title></HEAD> <BODY ID="bodyNode"> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("页面初始状态"); tableObj = document.createElement("TABLE"); tbodyObj = document.createElement("TBODY"); trObj = document.createElement("TR"); tdObj = document.createElement("TD"); alert( "对页面内容进行修改后" + "\n" + "bodyNode.firstChild = " + bodyNode.firstChild + "\n" + "tableObj.nodeName = " + tableObj.nodeName + "\n" + "tbodyObj.nodeName = " + tbodyObj.nodeName + "\n" + "trObj.nodeName = " + trObj.nodeName + "\n" + "tdObj.nodeName = " + tdObj.nodeName + "\n" + "tableObj = " + tableObj + "\n" ); // --> </SCRIPT> </BODY> </HTML>
上述代码在文档中创建了4个孤立HTML标记节点tableObj、tbodyObj、trObj和tdObj,它们就象太空中4颗人造卫星一样,彼此间以及和文档中的现有节点间都互不关联。创建孤立节点的目的不是为了让它真正孤立,随后我们会介绍如何将创建的孤立节点彼此相连,并添加到文档的DOM Tree结构中。 使用cloneNode方法 cloneNode方法的功能是通过克隆(也就是复制)文档中一个现存节点的方式创建文档的一个孤立节点。根据被克隆节点的类型,新创建的孤立节点或者是HTML标记节点,或者是包含字符串信息的文本项节点。 cloneNode的语法为oldNode.createNode(false)或者oldNode.createNode(true),oldNode 表示被克隆的节点,返回值是新创建的节点,false表示仅仅克隆oldNode,true表示克隆oldNode并包含其下属节点。来看看下面的例子:
<HTML><HEAD><TITLE> DOM Demo </title></HEAD> <BODY ID="bodyNode"> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("页面初始状态"); tableObj = document.createElement("TABLE"); tbodyObj = document.createElement("TBODY"); tr1Obj = document.createElement("TR"); tr2Obj = tr1Obj.cloneNode(false); tr3Obj = tr1Obj.cloneNode(false); tr1td1Obj = document.createElement("TD"); tr1td2Obj = tr1td1Obj.cloneNode(false); tr2td1Obj = tr1td1Obj.cloneNode(false); tr2td2Obj = tr1td1Obj.cloneNode(false); tr3td1Obj = tr1td1Obj.cloneNode(false); tr3td2Obj = tr1td1Obj.cloneNode(false); row1cell1Obj = document.createTextNode("This is row 1, cell 1"); row1cell2Obj = row1cell1Obj.cloneNode(false); row2cell1Obj = row1cell1Obj.cloneNode(false); row2cell2Obj = row1cell1Obj.cloneNode(false); row3cell1Obj = row1cell1Obj.cloneNode(false); row3cell2Obj = row1cell1Obj.cloneNode(false); row1cell2Obj.nodeValue = "This is row 1, cell 2"; row2cell1Obj.nodeValue = "This is row 2, cell 1"; row2cell2Obj.nodeValue = "This is row 2, cell 2"; row3cell1Obj.nodeValue = "This is row 3, cell 1"; row3cell2Obj.nodeValue = "This is row 3, cell 2"; alert( "对页面内容进行修改后" + "\n" + "row1cell2Obj.firstChild = " + row1cell2Obj.firstChild+ "\n" + "row1cell2Obj = " + row1cell2Obj + "\n" + "row3cell2Obj.nodeValue = " + row3cell2Obj.nodeValue + "\n" + "tr3td2Obj.nodeName = " + tr3td2Obj.nodeName + "\n" ); // --> </SCRIPT></BODY></HTML>
上述代码中值得注意的是对文本项节点的处理方式: 1、首先,使用语句row1cell1Obj = document.createTextNode("This is row 1, cell 1")创建单元格(1,1)所在节点; 2、然后使用语句row1cell1Obj.cloneNode(false)分别创建其他单元格节点; 3、最后,使用语句node.nodeValue = string分别为不同单元格赋值。使用appendChild方法 appendChild 方法的功能是在2个节点间建立起父子关系,如果作为父亲的节点已经具有了孩子节点,那么新添加的孩子节点被追加为最后一个孩子,也就是 lastChild。appendChild的语法是fatherObj.appendChild(childObj),返回值是被追加的孩子节点。来看看下面的例子:
<HTML><HEAD><TITLE> DOM Demo </title></HEAD> <BODY ID="bodyNode"> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("页面初始状态"); tableObj = document.createElement("TABLE"); tbodyObj = document.createElement("TBODY"); tr1Obj = document.createElement("TR"); tr2Obj = tr1Obj.cloneNode(); tr3Obj = tr1Obj.cloneNode(); tr1td1Obj = document.createElement("TD"); tr1td2Obj = tr1td1Obj.cloneNode(); tr2td1Obj = tr1td1Obj.cloneNode(); tr2td2Obj = tr1td1Obj.cloneNode(); tr3td1Obj = tr1td1Obj.cloneNode(); tr3td2Obj = tr1td1Obj.cloneNode(); row1cell1Obj = document.createTextNode("This is row 1, cell 1"); row1cell2Obj = row1cell1Obj.cloneNode(); row2cell1Obj = row1cell1Obj.cloneNode(); row2cell2Obj = row1cell1Obj.cloneNode(); row3cell1Obj = row1cell1Obj.cloneNode(); row3cell2Obj = row1cell1Obj.cloneNode(); row1cell2Obj.nodeValue = "This is row 1, cell 2"; row2cell1Obj.nodeValue = "This is row 2, cell 1"; row2cell2Obj.nodeValue = "This is row 2, cell 2"; row3cell1Obj.nodeValue = "This is row 3, cell 1"; row3cell2Obj.nodeValue = "This is row 3, cell 2"; returnValue = tableObj.appendChild(tbodyObj); tbodyObj.appendChild(tr1Obj); tbodyObj.appendChild(tr2Obj); tbodyObj.appendChild(tr3Obj); tr1Obj.appendChild(tr1td1Obj); tr1Obj.appendChild(tr1td2Obj); tr2Obj.appendChild(tr2td1Obj); tr2Obj.appendChild(tr2td2Obj); tr3Obj.appendChild(tr3td1Obj); tr3Obj.appendChild(tr3td2Obj); tr1td1Obj.appendChild(row1cell1Obj); tr1td2Obj.appendChild(row1cell2Obj); tr2td1Obj.appendChild(row2cell1Obj); tr2td2Obj.appendChild(row2cell2Obj); tr3td1Obj.appendChild(row3cell1Obj); tr3td2Obj.appendChild(row3cell2Obj); bodyNode.appendChild(tableObj); alert("对页面内容进行修改后"); // --> </SCRIPT></BODY></HTML>
上面的代码演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点,然后使用appendChild将这些节点进行连接形成一个Table,最后通过语句bodyNode.appendChild(tableObj)将Table装载进文档中。 使用applyElement方法 applyElement 方法的功能是将一个节点与它的孩子节点和父亲节点脱离,然后将另外一个节点连接到这个节点,最终使它们成为父子关系。applyElement的语法是 childObj.applyElement(fatherObj),返回值是被连接的孩子节点。 我们注意到,applyElement和appendChild实现的目的基本相同,都是在2个节点间建立父子关系,但有2个区别: 1、applyElement方法只能操纵HTML标记节点,不能处理文本项节点。appendNode则能处理2种节点。 2、appendNode对2个节点的连接方式是从父到子,applyElement则是从子到父。 来看看下面的例子:
<HTML><HEAD><TITLE> DOM Demo </title></HEAD> <BODY ID="bodyNode"> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("页面初始状态"); tableObj = document.createElement("TABLE"); tbodyObj = document.createElement("TBODY"); tr1Obj = document.createElement("TR"); tr2Obj = tr1Obj.cloneNode(); tr3Obj = tr1Obj.cloneNode(); tr1td1Obj = document.createElement("TD"); tr1td2Obj = tr1td1Obj.cloneNode(); tr2td1Obj = tr1td1Obj.cloneNode(); tr2td2Obj = tr1td1Obj.cloneNode(); tr3td1Obj = tr1td1Obj.cloneNode(); tr3td2Obj = tr1td1Obj.cloneNode(); row1cell1Obj = document.createTextNode("This is row 1, cell 1"); row1cell2Obj = row1cell1Obj.cloneNode(); row2cell1Obj = row1cell1Obj.cloneNode(); row2cell2Obj = row1cell1Obj.cloneNode(); row3cell1Obj = row1cell1Obj.cloneNode(); row3cell2Obj = row1cell1Obj.cloneNode(); row1cell2Obj.nodeValue = "This is row 1, cell 2"; row2cell1Obj.nodeValue = "This is row 2, cell 1"; row2cell2Obj.nodeValue = "This is row 2, cell 2"; row3cell1Obj.nodeValue = "This is row 3, cell 1"; row3cell2Obj.nodeValue = "This is row 3, cell 2"; tr1td1Obj.appendChild(row1cell1Obj); tr1td2Obj.appendChild(row1cell2Obj); tr2td1Obj.appendChild(row2cell1Obj); tr2td2Obj.appendChild(row2cell2Obj); tr3td1Obj.appendChild(row3cell1Obj); tr3td2Obj.appendChild(row3cell2Obj); tr1td1Obj.applyElement(tr1Obj); tr1Obj.appendChild(tr1td2Obj); tr2td1Obj.applyElement(tr2Obj); tr2Obj.appendChild(tr2td2Obj); tr3td1Obj.applyElement(tr3Obj); tr3Obj.appendChild(tr3td2Obj); tr1Obj.applyElement(tbodyObj); tbodyObj.appendChild(tr2Obj); tbodyObj.appendChild(tr3Obj); returnValue = tbodyObj.applyElement(tableObj); bodyNode.appendChild(tableObj); alert("对页面内容进行修改后"); // --> </SCRIPT></BODY></HTML>
上面的代码同样演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点,然后混合使用applyElement和 appendChild将这些节点进行连接形成一个Table,最后通过语句bodyNode.appendChild(tableObj)将Table 装载进文档中 使用insertBefore方法 insertBefore方法的功能和 appendChild相似,都是将一个孩子节点连接到一个父亲节点,但insertBefore方法允许我们指定孩子节点的位置。 insertBefore的语法是fatherObj.insertBefore(childObj, brotherObj),返回值是被连接的孩子节点。执行后,childObj的位置在brotherObj之前。来看看下面的例子:
<HTML><HEAD><TITLE> DOM Demo </title></HEAD> <BODY ID="bodyNode"> <SCRIPT LANGUAGE="JavaScript"> <!-- alert("页面初始状态"); tableObj = document.createElement("TABLE"); tbodyObj = document.createElement("TBODY"); tr1Obj = document.createElement("TR"); tr2Obj = tr1Obj.cloneNode(); tr3Obj = tr1Obj.cloneNode(); tr1td1Obj = document.createElement("TD"); tr1td2Obj = tr1td1Obj.cloneNode(); tr2td1Obj = tr1td1Obj.cloneNode(); tr2td2Obj = tr1td1Obj.cloneNode(); tr3td1Obj = tr1td1Obj.cloneNode(); tr3td2Obj = tr1td1Obj.cloneNode(); row1cell1Obj = document.createTextNode("This is row 1, cell 1"); row1cell2Obj = row1cell1Obj.cloneNode(); row2cell1Obj = row1cell1Obj.cloneNode(); row2cell2Obj = row1cell1Obj.cloneNode(); row3cell1Obj = row1cell1Obj.cloneNode(); row3cell2Obj = row1cell1Obj.cloneNode(); row1cell2Obj.nodeValue = "This is row 1, cell 2"; row2cell1Obj.nodeValue = "This is row 2, cell 1"; row2cell2Obj.nodeValue = "This is row 2, cell 2"; row3cell1Obj.nodeValue = "This is row 3, cell 1"; row3cell2Obj.nodeValue = "This is row 3, cell 2"; returnValue = tableObj.insertBefore(tbodyObj); tbodyObj.insertBefore(tr3Obj); tbodyObj.insertBefore(tr2Obj, tr3Obj); tbodyObj.insertBefore(tr1Obj, tr2Obj); tr1Obj.insertBefore(tr1td2Obj); tr1Obj.insertBefore(tr1td1Obj, tr1td2Obj); tr2Obj.insertBefore(tr2td2Obj); tr2Obj.insertBefore(tr2td1Obj, tr2td2Obj); tr3Obj.insertBefore(tr3td2Obj); tr3Obj.insertBefore(tr3td1Obj, tr3td2Obj); tr1td2Obj.insertBefore(row1cell2Obj); tr1td1Obj.insertBefore(row1cell1Obj); tr2td2Obj.insertBefore(row2cell2Obj); tr2td1Obj.insertBefore(row2cell1Obj); tr3td2Obj.insertBefore(row3cell2Obj); tr3td1Obj.insertBefore(row3cell1Obj); bodyNode.insertBefore(tableObj); // --> </SCRIPT></BODY></HTML>
上面的代码又一次演示了一个Table的动态创建过程。首先创建Table的各个行、列以及单元格的节点,然后混合使用insertBefore将这些节点进行连接形成一个Table,最后通过语句bodyNode. insertBefore (tableObj)将Table装载进文档中。可以看到,如果省略掉第2个参数brotherObj采用fatherObj.insertBefore (childObj)方式,那么一定是在要连入的父亲节点还没有孩子节点的情况下,这时,就和appendNode方法的功能完全一样了。 使用removeNode方法 removeNode 方法的功能是删除一个节点,语法为node.removeNode(false)或者node.removeNode(true),返回值是被删除的节点。removeNode(false)表示仅仅删除指定节点,然后这个节点的原孩子节点提升为原双亲节点的孩子节点。removeNode(true)表示删除指定节点及其所有下属节点。被删除的节点成为了孤立节点,不再具有有孩子节点和双亲节点。来看看下面的例子:
<HTML><HEAD><TITLE>DOM Demo</TITLE></HEAD> <BODY id=bodyNode>This is the document body <P id=p1Node>This is paragraph 1.</P> <P id=p2Node>This is paragraph 2.</P> <P id=p3Node>This is paragraph 3. <IMG id=imgNode src="myexam.gif">This text follows the image <TABLE id=tableNode> <TBODY> <TR> <TD bgColor=yellow>This is row 1, cell 1</TD> <TD bgColor=orange>This is row 1, cell 2</TD></TR> <TR> <TD bgColor=red>This is row 2, cell 1</TD> <TD bgColor=magenta>This is row 2, cell 2</TD></TR> <TR> <TD bgColor=lightgreen>This is row 3, cell 1</TD> <TD bgColor=beige>This is row 3, cell 2</TD></TR></TBODY></TABLE></P> <P id=p4Node>This is paragraph 4.</P> <SCRIPT language=JavaScript> <!-- var msg = ""; function printChildren() { childCount = bodyNode.childNodes.length; msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ; for(var i = 0; i < childCount; i++) { msg += "bodyNode.childNodes.nodeName = " + bodyNode.childNodes.nodeName + "\n"; } alert(msg); } msg="页面初始状态" + "\n\n" printChildren(); msg="对页面内容进行修改后" + "\n\n" msg += "Deleting Paragraph 3\n"; var deletedNode = p3Node.removeNode(false); msg += "deletedNode.nodeName = " + deletedNode.nodeName + "\n"; msg += "deletedNode.childNodes.length = " + deletedNode.childNodes.length + "\n"; printChildren(); // --> </SCRIPT></BODY></HTML>
上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后仅仅删除p3Node。删除p3Node前, bodyNode有6个孩子节点,p3Node有4个孩子节点。删除p3Node后,节点p3Node的4个孩子节点提升为bodyNode的孩子节点,这样bodyNode就有了9个节点。p3Node被删除后返回值为deletedNode,它的nodeName属性值为P,孩子节点数为0,也就是说,它成为一个孤立节点。 现在我们将上述代码中的deletedNode = p3Node.removeNode(false)修改为deletedNode = p3Node.removeNode(true),你会看到,删除p3Node后,bodyNode的孩子节点数变为5。使用replaceNode方法 replaceNode方法的功能是用新创建的节点替换一个节点及其下属节点,语法为oldNode.replaceNode(newNode),返回值是被替换的节点。来看看下面的例子:
<HTML><HEAD><TITLE> DOM Demo </title></HEAD> <BODY ID="bodyNode"> This is the document body <P ID = "p1Node">This is paragraph 1.</P> <P ID = "p2Node">This is paragraph 2.</P> <P ID = "p3Node">This is paragraph 3. <IMG ID = "imgNode" SRC="myexam.gif">This text follows the image <TABLE ID="tableNode"> <TR><TD BGCOLOR=yellow>This is row 1, cell 1</TD><TD BGCOLOR=orange>This is row 1, cell 2</TD></TR> <TR><TD BGCOLOR=red>This is row 2, cell 1</TD><TD BGCOLOR=magenta>This is row 2, cell 2</TD></TR> <TR><TD BGCOLOR=lightgreen>This is row 3, cell 1</TD><TD BGCOLOR=beige>This is row 3, cell 2</TD></TR> </TABLE> </P> <P ID = "p4Node">This is paragraph 4.</P> <SCRIPT LANGUAGE="JavaScript"> <!-- var msg = ""; function printChildren() { childCount = bodyNode.childNodes.length; msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ; for(var i = 0; i < childCount; i++) { msg += "bodyNode.childNodes.nodeName = " + bodyNode.childNodes.nodeName + "\n"; } alert(msg); } msg="页面初始状态" + "\n\n" printChildren(); msg="对页面内容进行修改后" + "\n\n" msg += "Replacing Paragraph 3\n"; var b = document.createTextNode("New Body Page"); var replacedNode = p3Node.replaceNode(b); msg += "replacedNode.nodeName = " + replacedNode.nodeName + "\n"; msg += "replacedNode.childNodes.length = " + replacedNode.childNodes.length + "\n"; msg += "p2Node.nodeName = " + p2Node.nodeName + "\n"; printChildren(); // --> </SCRIPT></BODY></HTML>
上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后用新创建的文本项节点替换p3Node。替换后, bodyNode的孩子节点数目没有变,原来的P节点替换为文本项节点。变量replaceNode表示被替换的节点p3Node,它仍包含原来的4个孩子节点。 replaceNode方法的另一个功能是删除节点及其下属节点,就象前面介绍的removeNode(true)一样。这时,我们只需将replaceNode方法的参数设置为一个现存的节点就可以。现在,我们将上述代码中的b = document.createTextNode("New Body Page")修改为b = p2Node,你会看到,p3Node及其下属节点被删除了,没有替换节点生成,bodyNode的孩子节点数变为5。 如果replaceNode方法的参数为空,也就是执行replaceNode(),那么将导致浏览器脚本运行错误。 使用swapNode方法 swapNode方法的功能是交换2个节点(包括其下属节点)在文档Tree中的位置,语法为firstNode.swapNode(secondNode),返回值是节点firstNode。来看看下面的例子:
<HTML><HEAD><TITLE>DOM Demo</TITLE></HEAD> <BODY id=bodyNode>This is the document body <P id=p1Node>This is paragraph 1.</P> <P id=p2Node>This is paragraph 2.</P> <P id=p3Node>This is paragraph 3. <IMG id=imgNode src="myexam.gif">This text follows the image <TABLE id=tableNode> <TBODY> <TR> <TD bgColor=yellow>This is row 1, cell 1</TD> <TD bgColor=orange>This is row 1, cell 2</TD></TR> <TR> <TD bgColor=red>This is row 2, cell 1</TD> <TD bgColor=magenta>This is row 2, cell 2</TD></TR> <TR> <TD bgColor=lightgreen>This is row 3, cell 1</TD> <TD bgColor=beige>This is row 3, cell 2</TD></TR></TBODY></TABLE></P> <P id=p4Node>This is paragraph 4.</P> <SCRIPT language=JavaScript> <!-- var msg = ""; function printChildren() { childCount = bodyNode.childNodes.length; msg += "bodyNode.childNodes.length = " + bodyNode.childNodes.length + "\n" ; for(var i = 0; i < childCount; i++) { msg += "bodyNode.childNodes.nodeName = " + bodyNode.childNodes.nodeName + "\n"; } alert(msg); } msg="页面初始状态" + "\n\n" printChildren(); msg="对页面内容进行修改后" + "\n\n" msg += "Swapping Paragraph 3 with Paragraph 2\n"; var b = p2Node; var swappedNode = p3Node.swapNode(b); msg += "swappedNode.nodeName = " + swappedNode.nodeName + "\n"; msg += "swappedNode.childNodes.length = " + swappedNode.childNodes.length + "\n"; msg += "p2Node.nodeName = " + p2Node.nodeName + "\n"; printChildren(); // --> </SCRIPT></BODY></HTML>
上述代码首先显示页面的初始内容以及bodyNode的每个孩子节点的nodeName属性值,然后交换p3Node和p2Node的位置。交换后,bodyNode的孩子节点数目没有变,变量swappedNode表示p3Node,它仍包含原来的4个孩子节点。 swapNode 方法的另一个功能是替换节点及其下属节点,就象前面介绍的replaceNode方法一样。这时,我们只需将replaceNode方法的参数设置为一个新创建的节点就可以。现在,我们将上述代码中的b = p2Node修改为b = document.createTextNode("This is a swapped in text"),你会看到,p3Node及其下属节点被新创建的文本项节点所替换,原来的节点类型P变为了文本项节点类型#text。
转摘自http://bbs.javascript.com.cn/simple/index.php?t180.html
发表评论
-
用dhtmlHistory解决ajax带来的问题(浏览器不能使用后退按钮)
2006-12-04 21:07 3128百事通信息网 dhtmlHistory应用其实很简单.当页面 ... -
DWR小结DWRUtil篇
2006-11-28 11:46 11529百事通信息网 $();<o:p>< ... -
js时间格式化工具类
2006-11-10 00:01 6178百事通信息网 function DateUtil(){} ... -
js添加Flash方法
2006-10-27 19:43 2646百事通信息网 function Common() {} ... -
注册验证代码整理(dwr+js)
2006-10-27 19:38 4839百事通信息网 1、校验工具类 function ChkUt ... -
js客户端验证的工具类
2006-10-26 22:28 3180common.js //扩展String类功能 //删除 ... -
[转]js常用代码
2006-10-26 17:17 1613click() 对象.click() 使对象被点击。 clos ... -
[转]AJAX:如何处理书签和后退按钮
2006-10-26 13:32 3105时间:2006-05-26 作者:Brad Neuberg 浏 ... -
[转]为AJAX实现互斥
2006-10-26 11:46 1724为AJAX实现互斥 时间:2 ...
相关推荐
第 2部分: 使用JavaScript和Ajax发出异步请求 10 第 3 部分: Ajax 中的高级请求和响应 26 第 4 部分: 利用 DOM 进行 Web 响应 40 第 5 部分: 操纵 DOM 51 第 6 部分: 建立基于 DOM 的 Web 应用程序 65 第 7 部分: 在...
9.2.3 操纵DOM文档 9.3 处理事件 9.3.1 注册事件 9.3.2 自定义事件 9.4 访问和操纵样式 9.5 通信 9.6 小结 第10章 添加效果增强用户体验 10.1 自己动手实现效果 ...
DOM中有很多对象,其中一些是用户可以操纵的,如urI,location,refelter等。 客户端的脚本程序可以通过DOM动态地检查和修改页面内容,它不依赖于提交数据到服务器端,而从客户端获得DOM中的数据在本地执行。 DOM ...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
9.2.3 操纵DOM文档 9.3 处理事件 9.3.1 注册事件 9.3.2 自定义事件 9.4 访问和操纵样式 9.5 通信 9.6 小结 第10章 添加效果增强用户体验 10.1 自己动手实现效果 ...
9.2.3 操纵DOM文档 9.3 处理事件 9.3.1 注册事件 9.3.2 自定义事件 9.4 访问和操纵样式 9.5 通信 9.6 小结 第10章 添加效果增强用户体验 10.1 自己动手实现效果 ...
本系列的上一篇文章中考察了文档对象模型(DOM)编程中涉及到的...本期教程将把这些知识用于实践,建立一个简单的包含一些特殊效果的Web页面,所有这些都使用JavaScript操纵DOM来创建,不需要重新加载或者刷新页面。
在本课程中,您将学习如何使用JavaScript使网页动态和交互式,以与文档对象模型连接以及影响和操纵页面元素。 文档对象模型是一个庞大的对象,代表您的页面元素及其属性。 JavaScript可以轻松地在DOM中选择对象,并...
使用DOM操作XML文档 XMLHttpRequest对象 XMLHttpRequest对象与Ajax XMLHttpRequest对象的属性和方法 Ajax编程 如何使用Ajax 初始化对象 指定响应处理函数 发出http请求 处理服务器返回的信息 一个初步的Ajax开发框架...
12.5 访问和操纵DOM节点 12.5.1 打开每一个盒子--遍历节点 12.5.2 弄清层级关系--父子与兄弟 12.5.3 如何搜索特定节点 12.5.4 克隆节点--一个使用cloneNode()复制表格的例子 12.5.5 移动节点...
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本系列的作者是一位 Ajax 专家,他演示了这些技术如何协同工作 —— 从总体概述到细节的...
第1章 JavaScript简介 1 1.1 JavaScript是什么 1 1.2 JavaScript不是什么 2 1.3 JavaScript的用处 3 1.4 JavaScript及其在Web页面中的位置 3 1.5 Ajax是什么 5 1.6 JavaScript是什么样子的 6 1.7 ...
《JavaScript基础教程(第8版)》循序渐进地讲述了JavaScript及相关的CSS、DOM、Ajax、jQuery等技术。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上...
为了能够操纵浏览器和文档,JavaScript使用分层的父对象和子对象,这就是“文档对象模型”。这些对象的组织类似一个树型结构,并表示一个Web文档的所有内容和组件。 注意:”文档对象模型”不是JavaScript语言的一...
使用用户js和PIN 1111伪造“登录”) (高级DOM和事件) (OOP,地理位置,项目计划) 在我的网站上上的 (最终高级项目)。 您可以订阅更新 :winking_face: 什么是DOM和DOM操作文档对象模型:HTML文档的结构化表示...
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。 JavaScript 是因特网上最流行的脚本语言。 下文重点给大家介绍js组成,引入,输出,运算符基础知识,具体详解如下...
压缩包“ajax.rar”内含:“《掌握Ajax....掌握 Ajax,第 2 部分: 使用 JavaScript 和 Ajax 发出异步请求 http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro2/ 掌握 Ajax,第 3 部分: Ajax 中的高级请求和响应 ...
Javascript_weather_app 一个简单的Web应用... 2)innerHTML属性是文档对象模型(DOM)的一部分,该文档对象模型允许Javascript代码操纵显示的网站。 具体来说,它允许读取和替换给定DOM元素(HTML标记)中的所有内
本文档对象模型允许访问所有的文档内容和...此外,这里是文档属性,可以使用W3C DOM访问列表: 文档方法在W3C DOM: 此模型支持所有传统DOM提供的方法。此外,这里是由W3C DOM支持的方法列表: 示例: 这是(访问