POPTEST培训：web自动化测试之DOM 2

五、利用节点的层次关系(level)获取节点的方法

父节点：parentNode属性

子节点：childNodes集合,  firstChild() , lastChild()

上一个兄弟节点：previousSibling属性

下一个兄弟节点：nextSibling属性

1、获取父节点

 tabNode = document.getElementById("tableid1");

node = tabNode.parentNode;

2、获取子节点

var nodes = tabNode.childNodes; 

注意：1）如果<table>后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text，而低版本IE会直接越过-----不光是<table>节点，其它节点也一样

    2）表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体

3、获取兄弟节点

node = tabNode.previousSibling.previousSibling ‘上一个兄弟

msgbox node.nodeName ‘div

node = tabNode.nextSibling.nextSibling;’上一个兄弟

msgbox node.nodeName ‘dl

六、DOM中的一些操作

1、创建文本对象

function createAndAdd1(){

                            ‘1利用createTextNode()创建一个文本对象

                            oTextNode = document.createTextNode("新的文本，很好！");

                            ‘2获取div对象

                            divNode = document.getElementById("div1");

                            ‘3把oTextNode添加成div对象的孩子

                            divNode.appendChild(oTextNode);

end

2、创建标签对象

function createAndAdd2()

                            ‘1利用createElement()创建一个标签对象

                            oBtnNode = document.createElement("input")

                            oBtnNode.type="button"

                            oBtnNode.value="新建的按钮"

                           

                            ‘2获取div对象

                            divNode = document.getElementById("div1")

                            ‘3把oTextNode添加成div对象的孩子

                            divNode.appendChild(oBtnNode)

end

3、直接利用容器标签中的一个属性：innerHTML-----本质上改该标签容器中的“html代码”，不是我们认为的对象树的操作

 

function createAndAdd3()

                            divNode = document.getElementById("div1");

                            ‘divNode.innerHTML="<input type='button' value='一个新按钮'/> "

                            divNode.innerHTML="<a href='http:’www.sina.com'>一个超链接</a> "

end

4、删除节点 利用标签容器对象中的removeChild()和removeNode(),前者删子节点，后者删自己----不建议使用

function deleteNode()

                            oDivNode = document.getElementById("div2")

                            ‘自杀式----不建议

                            ‘oDivNode.removeNode();’默认false,不删除子节点集合

                            ‘oDivNode.removeNode(true);’true,删除子节点集合

                           

                            ‘通过父节点去删除它的孩子

                            oDivNode.parentNode.removeChild(oDivNode)

end

5、替换节点(移除替换) 利用标签容器对象中的replaceChild()和replaceNode(),前者替换子节点，后者替换自己----不建议使用

function updateNode()

                            oDivNode = document.getElementById("div2")

                            oDivNode4 = document.getElementById("div4")

                            ‘自杀式----不建议

                            ‘oDivNode.replaceNode(oDivNode4)

                           

                            ‘通过父节点去替换它的孩子：用oDivNode4去替换oDivNode

                            oDivNode.parentNode.replaceChild(oDivNode4,oDivNode)

end

6、替换节点(克隆替换)

function updateNode2()

                            oDivNode = document.getElementById("div2")

                            oDivNode4 = document.getElementById("div4")

                           

                            oDivNode4_2 = oDivNode4.cloneNode(true);’克隆一个对象,默认参数为false。参数为true时，连子节点一起克隆

                           

                            ‘通过父节点去替换它的孩子：用oDivNode4_2去替换oDivNode

                            oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode)

end