欢迎光临
梦想从学习开始!

Web自动化测试之DOM| 小熊测试

本文主要介绍 Web自动化测试之DOM| 小熊测试,小熊希望对大家的学习或者工作具有一定的参考学习价值,在测试领域有所提升和发展。

  DOM —–Document Object Model

  文档对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台, 提供了标准的 HTML 和 XML 对象集, 并有一个标准的接口来访问并操

  作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件,如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前,创建前端 Web 应用程序都必须使用

  Java Applet 或 ActiveX 等复杂的组件, 现在基于 DOM 规范, 在支持 DOM 的浏览器环境中,Web开发人员可以很快捷、 安全地创建多样化、 功能强大的Web应用程序。 这里只讨论

  HTML DOM

  一、DOM概述

  1、文档对象模型定义了 JavaScript 可以进行操作的浏览器,描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面:

  1)核心 JavaScript 语言参考(数据类型、运算符、基本语句、函数等)

  2)与数据类型相关的核心对象(String、Array、Math、Date 等数据类型)

  3)浏览器对象(window、location、history、navigator 等)

  4)文档对象(document、images、form 等)

  2、vbs中两种主要的对象模型

  1)浏览器对象模型 (BOM)

  提供了访问浏览器各个功能部件,如浏览器窗口本身、浏览历史等的操作方法。(见前一篇)

  2)文档对象模型 (DOM)

  提供了访问浏览器窗口内容,如文档、图片等各种 HTML 元素以及这些元素包含的文本的操作方法。

  在早期的浏览器版本中,浏览器对象模型和文档对象模型之间没有很大的区别。

  二、主要作用

  主要用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象。

  文档:标记型文档—-标签、文本、属性等

  对象:  封装了属性和方法,可以调用里面的属性和方法。

  模型:所有标记型文档都具备一些共性特征的体现。

  三、一些重要的概念(主要DOM树)

  1、DOM树模型:

  DOM解析将按照标签的层次体现出标签的所属,形成一个树状结构—DOM树。

  标签、属性和文本内容称为节点(node),节点也称为对象,标签通常也称为页面中的元素(element)

  1)DOM技术的核心内容:

  把标记文档变成对象树,通过对树中的对象进行操作,实现对文档内容的操纵。

  2)DOM解析的方式:

  将标记文档解析成一棵DOM对象树,并将树中的内容都封装成对象。—-这些动作由浏览器帮我们完成

  3)DOM解析的好处:

  可以对树中的节点进行任意的操作:增删改查

  4)DOM解析的弊端:

  这种解析需要将整个标记型文档加载进内存,因此,如果标记型文档很,耗内存。

  2、DHTML:动态的HTML,它不是一门语言,是多项技术综合体的简称。

  以HTML+CSS的方式做的是静态网页,要想变成动态的,必须在此基础上加入JS和DOM技术。因此,DHTML包含:HTML+CSS+JS+DOM

  3、HTML:提供标签,封装数据

  4、CSS:提供样式属性,对数据的显示样式进行定义

  5、DOM: 把标记型文档封装成对象,供JS操纵

  6、JS: 提供程序设计语言,通过DOM来操纵文档内容和显示样式

  四、 DOM中获取节点的方法

  节点都具备三个必备属性:节点名称、节点类型、节点值。

  节点的类型: 标签节点的类型值为1,属性节点的类型值为2,文本节点的类型值为3

  节点值:标签型节点是null,没有值的。只有属性和文本节点才可以有值。

  1、getElementById()  :通过节点的id获取该节点对象

  function getNodeDemo1()

  ‘获取id为divid1的节点

  divNode= document.getElementById("divid2")

  ‘获取div节点中的文本  innerHTML innerText 属性

  txtHTML = divNode.innerHTML

  txt = divNode.innerText

  msgbox txtHTML+","+txt

  ‘更改div节点中的文本内容

  ‘divNode.innerHTML="POPTEST测试开发工程师的黄埔军校了…."

  divNode.innerHTML="POPTEST测试开发工程师的黄埔军校了….了…."

  end

  2、getElementsByName()  :通过节点的name属性获取节点集合—-注意,是集合

  function getNodeDemo2()

  node = document.getElementsByName("userName");

  End

  3、getElementsByTagName() :通过节点的标签名字获取节点集合

  1)获取document下的所有

  function getNodeDemo3()

  nodes = document.getElementsByTagName("a")

  ‘nodes.length’5

  ‘nodes[0].innerHTML’获取标签容器封装的内容:城市首页

  ‘给页面当中的所有标签添加 target属性 ‘给对象添加属性并赋值时,若属性不存在则是添加,若存在则是修改

  For  x=0  to  nodes.length -1

  nodes[x].target = "_blank"

  next

  End

  2)获取 标签下的所有节点

  function getNodeDemo4()

  divNode = document.getElementById("mylink")

  nodes = divNode.getElementsByTagName("a")  ‘只获取divNode元素下面的所有子节点

  for x=0  to  nodes.length-1

  nodes[x].target = "_blank";

  end

  End

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

  父节点:parentNode属性

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

  上一个兄弟节点:previousSibling属性

  下一个兄弟节点:nextSibling属性

  1、获取父节点

  tabNode = document.getElementById("tableid1");

  node = tabNode.parentNode;

  2、获取子节点

  var nodes = tabNode.childNodes;

  注意:1)如果后面有回车符,高版本的IE和火狐会识别成 “空白文本”#text,而低版本IE会直接越过—–不光是

您现在正在阅读的是由小熊分享邦为您整理的 Web自动化测试之DOM| 小熊测试。 节点,其它节点也一样

  2)表格的,

标签和标签中间,其实还隐藏着一个标签—-表格体

  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="
"

  divNode.innerHTML="一个超链接 "

  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

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小熊分享邦(www.xxfxb.com),希望大家能坚持软件测试之路,谢谢。

赞(0) 打赏
未经允许不得转载:小熊分享邦 » Web自动化测试之DOM| 小熊测试

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏