Web自动化测试 三 ----- DOM对象和元素查找

一、DOM对象

DOM(Document Object Model文档对象模型):将HTML的各种元素映射为JS可访问的对象。
HTML文档中的所有内容都是节点,这些东西在HTML中我们称为元素。

  • 整个文档是一个文档节点
  • 每个HTML元素是元素节点
  • HTML元素的文本是文本节点
  • 每个HTML属性时属性节点
  • 注释是注释节点

DOM时间监听

类似于python中的while循环机制

事件

描述
onclick  用户点击HTML元素
onmouseover  用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素开移动鼠标
onkeydown  用户按下键盘按键
onload  浏览器已完成页面的加载
onchange  HTML元素改变

二、页面元素的操作

document表示整个HTML页面,window表示HTML页面上面的整个部分(窗口部门)。

1、元素查找 

  • e = document.getElementById(“kw”) 
  • e = document.getElementsByClassName
  • document.getElementsByName
  • document.getElementsByTagName

说明:e是一个对象

获取文本e.textContent

e.outerhtml 对应HTML的双引号的字符串,可以修改HTML

通过ByID查找获取的是单个元素,后三者获取的值是列表(获取元素用e[0]方式获取),因为ID是唯一的,其他的是有可能不唯一的。

CSS查找:

  • document.querySelector(“#kw”)#表示ID 获取的是单个元素
  • document.querySelectorAll(“#kw”) 获取的也是一个列表

2、元素获取

  • document.title
  • document.URL
  • e = document.getElementById(“kw”)
    •   e.herf
    •   e.maxLength
    •   e.getAttribute("maxLength")

3、元素修改

  • a = document.getElementByTagName('html')
  • b = a[0]
  • b.innerHTML = 'hello' 改变整个页面
  • c = document.getElementById(“kw”)
  • c.id = 'qqq'
  • c.setAttribute('id', 'hello')

修改中用的做多的是修改disable,readonly和input里的value值

猜你喜欢

转载自www.cnblogs.com/qyh0902/p/11184964.html