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

Posted 2022-04-13 qyh0902

一、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值