開學了系列前面講了element元素定位以及elements元素組定位，有不少的小伙伴問我，這個元素定位不到，那個元素定位不到，該怎么辦，今天講到的可以幫你解決一部分問題，剩下的就需要靠個人檢查一下，你自己真的學會元素定位了嗎？
你是否認為JS元素定位就跟前面所講的element以及elements元素定位一樣，在這兒就可以告訴各位，用法上確實有些類似，但是用途上就有很明顯的差別，我們直接看正文吧！
目錄
Windows物件：
獲取視窗尺寸
獲取內部寬高屬性
獲取外部寬高屬性
操作視窗
Location物件
location屬性
location方法
HTML DOM節點
元素定位
更改元素屬性值
控制滾動條
JS全名：JavaScript，是WEB網頁組成的三部分之一，JavaScript 代碼放在位于<script>標簽與<script>標簽之間，先看一段JS代碼認識一下JS：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p>我的第一個段落，</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html> 它通常會嵌在HTML中，以<script></script>的形式存在，有時候你看到的并非文中這樣的，而是類似于鏈接的形式存在，那是因為吧JS代碼寫在的外面，通過鏈接形式引入，原則上是一樣的，顯得美觀一些，如下：
這里運行的話就很簡單了，直接復制到txt檔案，保存后重命名將后綴改為.html即可，雙擊直接打開就可以看到效果了，
看完JS代碼，我們先了解一下瀏覽器物件模型BOM，方便后面更好的學習，BOM全名Browser Object Mode，允許JS與瀏覽器互動，本章主要介紹BOM模型里面的Windows物件以及location物件，
Windows物件：
1. 獲取瀏覽器視窗的尺寸
2. 操作其他視窗方法：如打開新視窗，關閉視窗等
3. 操作當前視窗，如：獲取當前頁面的地址，重新加載一個新頁面，重繪當前頁面
獲取視窗尺寸
獲取內部寬高屬性
innerHeight，innerWidth 單位：px(像素)
內部寬高：是指除去選單欄、工具列、邊框等占位元素后，用于顯示網頁的凈寬高
? window.innerHeight - 瀏覽器視窗的內高度（以像素計）
? window.innerWidth - 瀏覽器視窗的內寬度（以像素計）
獲取外部寬高屬性
outerHeight，outerWidth 單位：px(像素)
? window.outerHeight 瀏覽器視窗的外部高度（以像素計）
? window.outerWidth 瀏覽器視窗的外部寬度（以像素計）
from selenium import webdriver
# 獲取內寬，內高
fox = webdriver.Firefox()
fox.get('https://baidu.com')
js_ih = 'return window.innerHeight'
js_iw = 'return window.innerWidth'
i = fox.execute_script(js_ih)
o = fox.execute_script(js_iw)
#也可以寫成
# i = fox.execute_script(js_ih,js_iw)
# print(i)
print(f"內高是：{i},內寬是：{o}")
# 外寬，外高
js_oh = 'return window.outerHeight'
js_ow = 'return window.outerWidth'
j = fox.execute_script(js_oh)
s = fox.execute_script(js_ow)
print(f"外高是：{j},外寬是：{s}")
fox.quit()看到這是不是詫異，JS代碼寫在python中還有有點復雜程度的或者說是有點麻煩的，如果你想獲取寬高，你必須要加return不然是沒有回傳值的，并且沒個JS陳述句你想執行的話都必須fox.execute_script()帶上這么一個執行陳述句，不然寫了跟沒寫一個樣，引號內的代碼都需要靠純手寫，所以考驗鍵盤能力的時候到了，
操作視窗
1. window.open(url) - 打開新視窗，并打開指定的url
2. window.close() - 關閉當前視窗
3. selenium執行js陳述句 -fox.execute_script(js)
from selenium import webdriver
fox = webdriver.Firefox()
fox.implicitly_wait(5)
fox.get('https://baidu.com')
# 打開新視窗
js = "window.open('https://www.csdn.net/')"
fox.execute_script(js)
# 關閉新視窗
js_c = 'window.close()'
fox.execute_script(js_c)
fox.quit()Location物件
location屬性
1. window.location.href 回傳當前頁面的 href (URL)
2. window.location.hostname 回傳 web 主機的域名
3. window.location.pathname 回傳當前頁面的路徑或檔案名
4. window.location.protocol 回傳使用的 web 協議（http: 或 https:）
這里的主機域名可能獲取不到，還有就是協議，這里只做了解即可，
from selenium import webdriver
fox = webdriver.Firefox()
# 獲取地址
fox.get('https://baidu.com')
js_href = "return location.href"
js_host = "return location.hostname"
js_path = "return location.pathname"
js_port = "return location.protocol"
i = fox.execute_script(js_href, js_host, js_path, js_port)
print(i)
fox.quit()location方法
1. location.assign(url) 加載新頁面
2. location.reload() 重新加載當前頁面，重繪
3. location.replace(url) 用輸入的url替換當前的url
值得注意的是：
assign與replace的區別：
1. location.assign(url) ： 加載 URL 指定的新的 HTML 檔案，就相當于一個鏈接，跳轉到指定的url，當前頁 面會轉為新頁面內容，可以點擊后退回傳上一個頁面，
2. location.replace(url) ： 通過加載 URL 指定的檔案來替換當前檔案，這個方法是替換當前視窗頁面，前 后兩個頁面共用一個視窗，所以是沒有后退回傳上一頁的
這些都是小練手，記得自己上手，提示：不需要得到值的就不需要添加return了，可以直接使用，舉例：
from selenium import webdriver
fox = webdriver.Firefox()
fox.implicitly_wait(5)
# 獲取地址
fox.get('https://baidu.com')
js = "return location.href"
i = fox.execute_script(js)
print(i)
# 打開一個新的視窗
fox.execute_script("location.assign('https://baidu.com')")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的特點這里也有份，網頁中有部分的屬性是隱藏的，有些屬性只讀不可寫讓我們具體看看，
1. document.getElementById('kw').autocomplete= 'off' --常用元素屬性修改；百度
2. 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，便于練習，原始碼給到各位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.news{
width: 600px;
height: 240px;
border: 1px solid #333;
line-height: 160%;
margin: 50px auto;
position: relative;
padding-right: 30px;
overflow: hidden;
}
.news .content{
position: relative;
padding: 20px;
}
.news .content p{
margin-bottom: 20px;
}
.news .bar{
width: 20px;
height: 240px;
background-color: #eee;
position: absolute;
right:10px;
top: 0;
}
.news .bar b{
position: absolute;
width: 20px;
height: 104px;
top: 0;
left: 0;
border-radius: 6px;
box-shadow: 1px 1px 1px black;
}
@-webkit-keyframes faguang{
0%{
box-shadow: 0px 0px 0px red;
}
100%{
box-shadow: 0px 0px 20px red;
}
}
@-moz-keyframes faguang{
0%{
box-shadow: 0px 0px 0px red;
}
100%{
box-shadow: 0px 0px 20px red;
}
}
</style>
</head>
<body>
<div class="news" id="news">
<div class="bar">
<b id="barb"></b>
</div>
<div class="content" id="contentBox">
<p>人們常說，猶豫一萬次，不如實踐一次，一個人越猶豫不決，就越容易患得患失.</p>
<p> 西雨斜風作小寒，淡煙疏柳媚晴灘.</p>
<p>入淮清洛漸漫漫，雪沫乳花浮午盞，</p>
<p>蓼茸蒿筍試春盤，人間有味是清歡</p>
<p>個人微信號qing_an_an</p>
</div>
</div>
<script type="text/javascript">
var barb = document.getElementById("barb");
var contentBox = document.getElementById("contentBox");
var news = document.getElementById("news");
var newsJingTop = getAllY(news);
var contentBoxHeight = parseInt(contentBox.clientHeight);
var rate = 240 / contentBoxHeight;
if(rate > 1) {
box.style.display = "none";
}
var barbheight = 240 * rate;
barb.style.height = barbheight + "px";
//公共信號量，不管是滑塊，都在操作它們兩個數值
var contentBoxTop = 0;
var barbTop = 0;
//滑塊的拖曳
//在滑塊中按下的時候
barb.onmousedown = function(event) {
var dy = event.offsetY;
//注冊移動事件
document.onmousemove = function(event) {
var y = event.pageY - newsJingTop - dy;
//驗收
if(y < 0) {
y = 0;
}else if(y>240 - barbheight) {
y = 240 - barbheight;
}
//滑塊的移動
//改變信號量
barbTop = y;
contentBoxTop = -y / rate;
barb.style.top = barbTop + "px";
//內容的移動
contentBox.style.top = contentBoxTop + "px";
return false;
}
return false;
}
document.onmouseup = function() {
document.onmousemove = null;
}
//滾輪事件
news.onmousewheel = mousewheelhandler;
news.addEventListener("DOMMouseScroll",mousewheelhandler,true);
function mousewheelhandler(event) {
event = event|| window.event;
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = true;
}
if(event.wheelDelta) {
var direction = event.wheelDelta>0?1:-1;
}else{
var direction = event.detail>0?-1:1;
}
contentBoxTop += direction * 20;
if(contentBoxTop > 0) {
contentBoxTop = 0;
}else if(contentBoxTop < 240 - contentBoxHeight) {
contentBoxTop = 240 - contentBoxHeight;
}
barbTop = -contentBoxTop * rate;
contentBox.style.top = contentBoxTop + "px";
barb.style.top = barbTop + "px";
}
function getAllY(o) {
var allY = o.offsetTop;
while(o == o.offsetParent) {
allY += o.offsetTop + Number(getComputedStyle(o)["border-top-width"]);
}
return allY;
}
</script>
</body>
</html>
先定位到元素
1. ele.scrollHeight # 獲取滾動條高度
2. ele.scrollWidth # 獲取橫向滾動條寬度
這里提供思路，就是，定位到元素通過滑鼠事件去拖拽即可，頁面內的元素都可這樣使用，
大家對于獲取高度寬度可以在控制臺操作，也就是瀏覽器F12，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/304347.html
標籤：其他
上一篇：vuex的常見面試題