2020-07-07
目錄
一、HTML屬性
二、Javascript在網頁中的角色
三、JS語法
四、DOM對象
正文
一、HTML屬性
1.HTML中比較重要的屬性： name、value、href、src、id、class、disabled、readonly
① id：重要！！！id是唯一的
----在同一個頁面中：id是唯一的
----在不同的頁面中，id是可以重復的
②class:幾乎每個標簽都有class屬性，使用最頻繁的屬性
-----在定位元素時，就極大可能使用class進行元素定位（標簽里有class,就可以進行定位）
③disabled(不能進行元素定位)，將元素置灰，無法傳遞數據的
比如下面input密碼輸入框，disabled后，就無法對輸入框進行操作了（置灰顯示）
disabled 可以將True省略，下面兩種用法一樣。
<input name = "username" type="password" placeholder="請輸入密碼" disabled> <input name = "username" type="password" placeholder="請輸入密碼" disabled="True">
④readonly 只讀
input輸入框，只能讀，不能輸入數據
<input name = "username" type="password" placeholder="請輸入密碼" readonly>
♥當定位某些輸入框的時候，發現某個元素不能讀寫時，檢查源代碼，是否有disabled、readonly這兩個屬性，有的話，可以修改為可以讀寫的。
實戰操作：
先通過F12，定位到disabled的input框
再在console中，用JavaScript修改disabled=false,讓input框可以輸入數據
二、Javascript在網頁中的角色
1.一個網頁的需要以下3種語言
HTML：負責顯示靜態頁面，超文本標記語言
CSS:進行排版、美化
JavaScript：動態展示、特效、交互，編程語言
2.用JS的原理
webdriver通過一個js bot將python或者Java的請求轉化給瀏覽器能夠識別的js語言，才能夠驅動瀏覽器。
那么，為什么只有js才能操作瀏覽器？-----目前所有的瀏覽器都只內置JS的解釋器
三、JS語法
1.如何在HTML種寫JS
在body種增加<script></script>標簽，在標簽內就可以寫JS的代碼了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>study JS</title> </head> <body> <p>hello world</p> <script> //輸出控制台信息，類似於python的print("hello world") console.log("hello world"); //let a = 5;也可以表示變量 var a = 5; console.log(a); </script> </body> </html>
頁面console輸出結果：
2.js函數的定義和調用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>study JS</title> </head> <body> <p>hello world</p> <script> //輸出控制台信息，類似於python的print("hello world") console.log("hello world"); //let a = 5;也可以表示變量 var a = 5; console.log(a); //函數的定義和調用 function add(a) { if(a > 10){ console.log("大於10"); } else if(a == 10) { console.log("等於10"); } else { console.log("小於10"); } } add(11); </script> </body> </html>
頁面console顯示:
四、DOM對象----- Document Object Model
1.什么是dom對象---js通過dom對象,實現對瀏覽器中的HTML的控制
只要能把一個文檔轉變為一個對象,都可以叫做dom對象-----本質
2.頁面對象document-------整個頁面都放在document這個對象里面
JS中,整個一個頁面對象,就是一個document
在console中查看document對象,輸出的源碼,就是網頁的源碼
2.DOM樹 --------對文檔的結構化表述
①什么是dom樹
2.節點 -----dom對象中,一切皆節點
HTML中的所有的內容都是節點---可以將節點看成樹枝,一個節點就是一個樹枝
寫東西在HTML中,稱為元素
♥整個文檔就是一個文檔節點
♥<html>是根節點
♥每個HTML元素就是元素節點
♥HTML元素內的文本就是文本節點
♥每個HTML屬性就是屬性節點
舉例:<a href://www.baidu.com>"text=這里是個文本"</a> ======> <a>是元素節點; href就是屬性節點; text就是文本節點
面試題:dom對象中有哪些節點?
3.dom對象進行元素定位
①document對象調用方法,進行元素定位
getElementById ---單數,id唯一性
getElementsByName---復數,可以重復出現(除了id,其他的任何元素都是可以重復的)
舉例:定位查看input的id是看kw,用id去定位
e = document.getElementById("kw");
②輸入或者修改內容----.value
e.value
上面例子中的value值只有一個,存在列表中,用索引e[0]查看,跟e = document.getElementById("kw")的結果是一樣的.
對e[0]的value值賦值,input框直接顯示value值
同樣可以對input輸入框進行其他屬性的修改
①背景顏色:
>e[0].style.backgroundColor = "yellow";
< "yellow"
②修改整個網頁為子網頁
document.body.innerHTML= "<h1>python</h1>";
"<h1>python</h1>"
整個網頁都被改為一個只有標題的網頁了.
注意:修改網頁顯示,只是暫時修改,刷新后,就沒了.
4.window操作
window作為全局變量，代表了腳本正在運行的窗口，暴露給javascript代碼。
--window.location
--window.href
--window.name
--window.alert("hello") 表示彈框
--windoe.scrollTo()
例如：
5.DOM事件監聽
①什么是事件？
網頁上，點擊、光標懸浮等出現的動畫等效果，都叫做事件
②事件監聽
on....的都是事件（一種動作），不是屬性了
onclick = "red_element"(this) this表示這個元素自己（可以類似self)理解
舉例：點擊頁面中的python autotest文本，變成紅色；光標懸浮在文本上，顯示綠色。
<html> <head> </head> <body> <p onclick = "red_element(this)" onmouseover = "green_element(this)" onmouseout = "black_element(this)">
python autotest</p>
<script>
function red_element(elem){
elem.style.color = "red";
};
function green_element(elem) {
elem.style.color = "green";
};
function black_element(elem) {
elem.style.color = "black";
};
</script> </body> </html>
6.selenium原理-----面試題
python發送定位元素的操作
面試：python發送定位元素的操作，它經歷了什么？---selenium的原理
python 封裝的函數發送的指令是發送給webdriver服務器,webdriver服務器接收到請求以后，解析傳過來的數據，然后執行對應的JS命令（最終得到的效果，是通過JS去執行的。）