一、概念

javascript

• javascript是一種指令碼語言，可以被瀏覽器解析，所以它可以稱之為前端的三把利器之一。
• javascript跟java沒有半毛錢關係。
• 宣告區域性變數：使用關鍵字var
• 應用場景：當Selenium定位不到元素時，就要使用js程式碼來定位了。

Dom

• Document object model文件物件模型
• 它就是把死板的標籤變成可以通過方法呼叫的物件，物件裡面囊括了頁面裡的所有元素、功能。
• 通過Dom提供的呼叫方式，來操縱這個頁面當中的元素。類似於物件，它可以呼叫裡面任何的東西。
• dom想操作頁面，是因為有一套定位功能。

js+dom

• 是有邏輯性的操作頁面
• js是指令碼語言，可以寫邏輯性程式碼
• dom是文件物件模型，可以直接操作頁面
• js與dom的關係，就類似於python之與物件

js區域性變數的使用：

二、DOM的具體功能

（一）定位元素

1、直接定位

（1）通過id進行定位

document.getElementById('inner1')

• 缺點：如果這個元素沒有id就無法定位到了。

（2）通過class屬性定位

document.getElementsByClassName('inner')

• 使用.getElements
  ByClassName()，可以獲取列表
• 優點：如果沒有id屬性，可以使用class屬性定位到。
• 缺點：費事，如果有直接能定位到的方法，絕對不要用加s的這種方式。

（3）通過標籤進行定位

document.getElementsByTagName('input')

• 使用.getElementsByTagName()，可以獲取列表
• 優點：如果沒有id屬性，可以使用標籤屬性定位到。
• 缺點：費事，如果有直接能定位到的方法，絕對不要用加s的這種方式。

（4）通過標籤的name屬性進行定位

document.getElementsByName('username')

• 使用.getElementsByClassName()，可以獲取列表
• 優點：如果沒有id屬性，可以使用標籤屬性定位到。
• 缺點：費事，如果有直接能定位到的方法，絕對不要用加s的這種方式。

2、從能定位到的相鄰的元素來定位

（1）獲取子標籤元素

• 通過.children[]方法來定位子標籤元素

var tmp=document.getElementById('inner1')
tmp
tmp.children[1]

（2）獲取第一個子標籤元素、最後一個子標籤元素

• 通過.firstElementChild方法來定位第一個子標籤元素
• 通過.lastElementChild方法來定位最後一個子標籤元素

var tmp=document.getElementById('inner1')
tmp
tmp.firstElementChild
tmp.lastElementChild

（3）獲取父元素

通過.parentElement方法獲取父節點標籤元素

var tmp=document.getElementById('inner1')
tmp 
tmp.parentElement

（4）獲取下一個兄弟標籤元素

• 通過.nextElementSibling方法獲取下一個兄弟標籤元素

var tmp=document.getElementById('inner1')
tmp 
tmp.nextElementSibling

（5）獲取上一個兄弟標籤元素

• 通過.previousElementSibling方法獲取上一個兄弟標籤元素

var tmp=document.getElementById('inner1')
tmp 
tmp.previousElementSibling

（二）操縱元素

• 在dom中，只要能操縱的元素，就能修改。

1、獲取元素值

• 通過.value方法來獲取元素值

var tmp=document.getElementById('inner1')
tmp
tmp.lastElementChild.value

2、修改元素值

• 通過給獲取到的元素賦值來修改

tmp.lastElementChild.value='lrx'