清华大佬详谈：Web自动化测试之DOM对象和元素查找
Posted 程序员二黑
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了清华大佬详谈：Web自动化测试之DOM对象和元素查找相关的知识，希望对你有一定的参考价值。
大家好，我是二黑，这里赠送一套软件测试相关资源：
- 软件测试相关工具
- 软件测试练习集
- 深入自动化测试
- Python学习手册
- Python编码规范
- 大厂面试题和简历模板
关注我公众号：【程序员二黑】即可免费领取！
交流群：642830685
一、DOM对象
DOM（Document Object Model文档对象模型）：将html的各种元素映射为JS可访问的对象。
HTML文档中的所有内容都是节点，这些东西在HTML中我们称为元素。
整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素的文本是文本节点
每个HTML属性时属性节点
注释是注释节点
DOM时间监听
类似于python中的while循环机制
二、页面元素的操作
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值
最后为方便大家学习测试，特意给大家准备了一份13G的超实用干货学习资源，涉及的内容非常全面。
包括，软件学习路线图，50多天的上课视频、16个突击实战项目，80余个软件测试用软件，37份测试文档，70个软件测试相关问题，40篇测试经验级文章，上千份测试真题分享，还有2021软件测试面试宝典，还有软件测试求职的各类精选简历，希望对大家有所帮助……
关注我公众号：【程序员二黑】即可获取这份资料了！
推荐阅读
以上是关于清华大佬详谈：Web自动化测试之DOM对象和元素查找的主要内容，如果未能解决你的问题，请参考以下文章