Web自動化測試 三 ----- DOM對象和元素查找

1、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元素改變

 

 

 

 

 

 

2、頁面元素的操做

document表示整個HTML頁面，window表示HTML頁面上面的整個部分（窗口部門）。

一、元素查找 

• 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」） 獲取的也是一個列表

二、元素獲取

• document.title
• document.URL
• e = document.getElementById（「kw」）
  • 　　e.herf
  • 　　e.maxLength
  • 　　e.getAttribute("maxLength")

三、元素修改

• 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值