HTML DOM节点
==========
HTML DOM (Document Object Model) 中 , 每一个元素都是节点。
Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
元素定位
这里才是重点,JS元素定位其实说的就是Document元素定位。
查找元素,最常用的查找是根据ID和Tag Name ,注意:除id,css选择器以外是元素组定位
1. document.getElementById(id属性值) --》唯一的
2. document.getElementsByClassName(class属性值) --》可以定位一组元素
• document.getElementsByClassName(class属性值)[索引值] 对一组元素中的单个元素的获取
3. document.getElementsByName(name属性值)
4. document.getElementsByTagName(标签名)
5. document.querySelector(css选择器) --》对于没有id/name/classname属性,可以使用这个定位元 素
这里与普通的元素定位没有什么太大的区别,元素组定位索引取值,元素定位。还有就是value与send_keys区别。
from selenium import webdriver
fox = webdriver.Firefox()
fox.implicitly_wait(5)
fox.get(‘https://baidu.com’)
js_input = “document.getElementById(‘kw’).value=‘python’”
fox.execute_script(js_input)
jx_click = “document.getElementById(‘su’).click()”
fox.execute_script(jx_click)
fox.quit()
from selenium import webdriver
fox = webdriver.Firefox()
fox.implicitly_wait(5)
fox.get(‘https://baidu.com’)
js_input = “document.getElementsByClassName(‘mnav’)[0].click()”
fox.execute_script(js_input)
sleep(2)
fox.quit()
这里看到区别了吧,JS中元素定位方式类似,写法还是有一定的区别的。我个人举得还是挺繁琐的。其他的元素定写法与上述类似,这里就不做全部的代码展示了。自行练习!
更改元素属性值
看到这是不是很意外,还能更改元素属性值,JS的特点这里也有份,网页中有部分的属性是隐藏的,有些属性只读不可写让我们具体看看。
-
document.getElementById(‘kw’).autocomplete= ‘off’ --常用元素属性修改;百度
-
document.getElementById(‘vip’).style.visibility= ‘visible’ --设置元素的隐藏属性,是否显示;
隐藏的元素:利用javascript更改元素属性值,让元素可见
例如:visibility:hidden(隐藏),visible(显示)
display : none(隐藏),block(显示)
看这个例子,我们可以通过更改属性值直接隐藏掉这个烦人的东西。
from time import sleep
from selenium import webdriver
fox = webdriver.Firefox()
fox.implicitly_wait(5)
fox.get(‘https://www.tmall.com/’)
js = “document.querySelector(‘.j_doodleLink’).style.display=‘none’”
fox.execute_script(js)
sleep(3)
fox.quit()
还可以更改很多东西,比如text值,定位元素后.text=’ '想要修改的值,具体的用法很多很多,对于测试而言,这部分其实也差不多,但是你想技多不压身就去研究研究。
控制滚动条
======
控制滚动条有什么好处,如果页面没有完全显示,element如果是在下拉之后才能显示出来,只能先滚动到该元素才能进 行click,否则是不能click。
对于纵向滚动条,我们要获取滚动条的高度;
对于横向滚动条则需要获取他的宽度
1. document.body.scrollHeight 获取对象的滚动高度
2. document.body.scrollWidth 获取对象的滚动宽度
滑动滚动条:
window.scrollTo(x,y) 方法可把内容滚动到指定的坐标。
滑动到页面底部:
1. 左下角:window.scrollTo(0,document.body.scrollHeight)
2. 右下角:
window.scrollTo(document.body.scrollWidth,document.body.scrollHeight)
3. 指定位置:window.scrollTo(0,数值)
4. 滑动到指定元素:ele.srollIntoView() true:与元素顶部对其,false:与元素底部对其 document.querySelector(‘’).scrollIntoView()
document.querySelector(‘’).scrollIntoView(false)
这里直接拿淘宝的例子来跑,先下拉到指定举例,再下拉到最底部:
from selenium import webdriver
from time import sleep
fox = webdriver.Firefox()
fox.get(‘https://www.taobao.com/’)
fox.maximize_window()
获取高度
js_height = “return document.body.scrollHeight”
height = fox.execute_script(js_height)
print(height)
获取宽度
js_width = “return document.body.scrollWidth”
width = fox.execute_script(js_width)
print(width)
下滑1000px
js_left = “window.scrollTo(0,1000)”
fox.execute_script(js_left)
sleep(2)
下滑最底部
jx_left_down = “window.scrollTo(0,document.body.scrollHeight)”
fox.execute_script(jx_left_down)
下滑到指定元素
jx_left_zd = “document.querySelector(‘ul.list > a:nth-child(3) > div:nth-child(1) > div:nth-child(2)’).scrollIntoView(false)”
fox.execute_script(jx_left_zd)
上述是浏览器滚动条。接下来给到各位一个界面元素滚动条。自己写了一个JS,便于练习,源码给到各位:
人们常说,犹豫一万次,不如实践一次。一个人越犹豫不决,就越容易患得患失.
西雨斜风作小寒,淡烟疏柳媚晴滩.
入淮清洛渐漫漫,雪沫乳花浮午盏。
蓼茸蒿笋试春盘,人间有味是清欢
个人微信号qing_an_an
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数同学面临毕业设计项目选题时,很多人都会感到无从下手,尤其是对于计算机专业的学生来说,选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结,更是展示自己能力的重要机会。
因此收集整理了一份《2024年计算机毕业设计项目大全》,初衷也很简单,就是希望能够帮助提高效率,同时减轻大家的负担。
既有Java、Web、PHP、也有C、小程序、Python等项目供你选择,真正体系化!
由于项目比较多,这里只是将部分目录截图出来,每个节点里面都包含素材文档、项目源码、讲解视频
如果你觉得这些内容对你有帮助,可以添加VX:vip1024c (备注项目大全获取)
r(getComputedStyle(o)[“border-top-width”]);
}
return allY;
}
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数同学面临毕业设计项目选题时,很多人都会感到无从下手,尤其是对于计算机专业的学生来说,选择一个合适的题目尤为重要。因为毕业设计不仅是我们在大学四年学习的一个总结,更是展示自己能力的重要机会。
因此收集整理了一份《2024年计算机毕业设计项目大全》,初衷也很简单,就是希望能够帮助提高效率,同时减轻大家的负担。
[外链图片转存中…(img-Isfg3g4r-1712578295979)]
[外链图片转存中…(img-TRNwPNzM-1712578295980)]
[外链图片转存中…(img-FWyJfHlI-1712578295980)]
既有Java、Web、PHP、也有C、小程序、Python等项目供你选择,真正体系化!
由于项目比较多,这里只是将部分目录截图出来,每个节点里面都包含素材文档、项目源码、讲解视频
如果你觉得这些内容对你有帮助,可以添加VX:vip1024c (备注项目大全获取)
[外链图片转存中…(img-2KZQaXtB-1712578295980)]