一、概念
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')
- 使用.getElementsByClassName()，可以獲取列表
- 優點：如果沒有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、操縱行內標簽、塊級標簽
（1）獲取元素值
- 通過.value方法來獲取元素值
var tmp=document.getElementById('inner1') tmp tmp.lastElementChild.value
（2）修改元素值
- 通過給獲取到的元素賦值來修改
tmp.lastElementChild.value='lrx'
（3）獲取到標簽內容再修改
（a）.innerText方法獲取標簽名
- 通過.innerText方法只能獲取到標簽名
var tmp=document.getElementById('inner1') tmp tmp.innerText
通過賦值進行修改
- innerText用來修改標簽內的文本內容，也就是說，它只修改標簽與標簽之間夾着的內容，必須是閉合標簽。
（b）獲取標簽中所有內容
- 通過.innerHTML方法獲取到標簽中的所有內容
var tmp=document.getElementById('inner1') tmp tmp.innerHTML
（c）區別與聯系
- innerText修改目標元素的文本內容，如果賦值的內容是<p></p>這種包含標簽的字符串，則修改后依舊會以字符串的形式存儲；
- innerHTML如果賦值的內容包含是包含標簽的字符串，會直接轉成標簽。
2、操縱select標簽
（1）獲取元素值
（a）通過.value方法
- select標簽賦值元素值，可以根據頁面上元素內容的變化而變化：
- 必須要賦值選項中存在的值，不存在的賦值完了也是空：
（b）通過.selectedIndex方法
- 輸入已有元素的下標值，可以定位到元素：
3、操縱樣式
（1）.className方法
- 通過.className方法，可以定位到同時有兩個樣式的元素：
var tmp=document.getElementById('clst') tmp tmp.className='tmp2 inner'
（2）.classList方法
- 通過.classList方法，可以獲取到樣式列表（這個列表不是真的列表，但可以用列表方式進行操作）：
- 缺點：只能操作已經存在樣式的元素
（a）刪除樣式
- 使用.classList.remove('樣式名')方法
（b）添加樣式
- 使用.classList.add('樣式名')方法
（3）.style方法
- 優點：可以直接添加原來沒有的樣式。
- 在工作中，經常會遇到display屬性=none的情況，開發會在上面再蓋一層好看的樣式，這樣我們會定位不到，此時就要使用這個方法了，將最下面那層定位到。
- .style方法操作的是標簽中的屬性。
（a）直接添加沒有的樣式：
添加前：
由於tmp.style是操作的標簽中的屬性，而標簽此時沒有width這個屬性，所以定位不到：
添加后：
實際上是將屬性添加到標簽上了：
（b）定位到被隱藏的元素：
隱藏元素：
var tmp=document.getElementById('clst') tmp tmp.style.display='none'
還原被隱藏的元素：
var tmp=document.getElementById('clst') tmp tmp.style.display=''
（c）css與js的一點區別
- 在css中，style=background-color屬性是-color，而js無法解析-，所以會將css中有-的屬性都變成-后面的第一個字母大寫，變成backgroundColor。
- 如果在js中仍然按照css中的寫法去寫，會報錯：
正確寫法：
var tmp=document.getElementById('clst') tmp tmp.className='tmp1 inner' tmp.style.backgroundColor='green'
tip：
1、簡便方法，直接看提示：從下圖紅框中的提示中可以看出：select為標簽名，#代表這個標簽有名為s1的id屬性，如果有.代表這個標簽有名為xxx的class屬性，定位的時候就不用特意去點進去看了。
2、同時使用多個class樣式時，使用空格分隔，即：
#偽代碼： <header> .c1{} .c2{} </header> <body> <div class="c1 c2"></div> </body>