小小千想和您聊一聊

当前位置: 首页> 技术分享> Web测试之DOM

Web测试之DOM

  DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。

  DOM中查找元素

  W3C提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作。分别为:getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

  元素节点方法

  1.getElementById()方法

  getElementById()方法,接受一个参数:获取元素的ID。如果找到相应的元素则返回该元素的HTMLDivElement对象,如果不存在,则返回null。

  当我们通过getElementById()获取到特定元素节点时,这个节点对象就被我们获取到了,而通过这个节点对象,我们可以访问它的一系列属性。

  元素节点属性

  HTML属性的属性

  2.getElementsByTagName()方法

  getElementsByTagName()方法将返回一个对象数组HTMLCollection(NodeList),这个数组保存着所有相同元素名的节点列表。

  document.getElementsByTagName('*'); //获取所有元素

  3.getElementsByName()方法

  getElementsByName()方法可以获取相同名称(name)的元素,返回一个对象数组HTMLCollection(NodeList)。

  document.getElementsByName('add') //获取input元素

  document.getElementsByName('add')[0].value //获取input元素的value值

  document.getElementsByName('add')[0].checked //获取input元素的checked值

  4.getAttribute()方法

  getAttribute()方法将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有一定区别。

  5.setAttribute()方法

  setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数:属性名和值。如果属性本身已存在,那么就会被覆盖。

  6.removeAttribute()方法

  removeAttribute()可以移除HTML属性。

  document.getElementById('box').removeAttribute('style');//移除属性

  DOM节点

  1.node节点属性

  节点可以分为元素节点、属性节点和文本节点,而这些节点又有三个非常有用的属性,分别为:nodeName、nodeType和nodeValue。

  信息节点属性

  2.层次节点属性

  节点的层次结构可以划分为:父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点。

  层次节点属性

上一篇:HTML5工具初识之网页编辑器

下一篇:软件回归测试

QQ技术交流群

千锋软件测试官方①群
858327674

加入群聊