1.DOM document object model

dom的查詢：
（1）直接查詢：

var obj=document.getElementById('id1')

（2）間接查詢：

• 檔案內容操作：

(1)
innerText 僅文字
innerHTML 僅內容
(2) value
input value 獲取當前標籤中的值
select 獲取選中的value值 （selectedIndex）
搜尋框的示例

• 樣式操作：

（1）className
（2） classList
classList.add
classList.remove

• 屬性操作：

obj.setAttribute(‘value’,‘yang’)
obj.attributes 獲取所有屬性
obj.removeAttribute

• 建立標籤，並新增到html中

a.字串形式
b.物件的形式
document.createElement(‘div’)

• 提交表單

任何標籤通過dom都可以提交表單
document.getElementById(‘form’).submit()

• 其他

console.log 輸出
alter 彈窗
var f=confirm(資訊) 確認框 f為true flase
location.href 獲取當前url
location.href="" 重定向 跳轉
location.reload() 頁面重新整理

setInterval(func,5000) 定時器
clearInterval(obj)
setTimeout(func,5000) 5s之後執行引用

（3）事件
onclick onblur onfocus

繫結事件的三種方式：

• 直接標籤繫結 onclick=…

  <input type='button' onclick='clickOn(this)'>

      function ClickOn(self){
         // self 當前點選的標籤
          }
       }

• 先獲取dom物件 然後進行繫結

document.getElementById('xx').onclick=function(){
   //this 代表當前點選標籤 不是this 會因為作用域 function先放在記憶體 
   //但是每次調 都不一定是這個obj來調
              }

作用域例項：

 var myTrs = document.getElementsByTagName("tr");
 var len =myTrs.length;
 for (var i=0;i<length;i++){
    myTrs[i].onmouseover=function{
       this.style.back.... //必須要用this 不能用myTrs[i]
              }}
  }

c.第三種繫結方式（面試題）
addEventListener(true/false)

事件的捕捉與冒泡（具體百度有圖 這裡不列出來了）
true 捕捉 false 冒泡 預設false
捕捉 那個上到下 冒泡 從下到上

小示例：完成需求，點選click完成兩個行為

 <div id="i1">
        <div id="i2"></div>
 </div>

    

var obj1=document.getElementById('i1')
    var obj2=document.getElementById('i2')
    obj1.addEventListener('click',function{console.log('1')},false)
    obj2.addEventListener('click',function{console.log('2')},false)
    冒泡：false 先列印 2 再列印1
    捕捉：true 先列印1 再列印2

（4）重點 JS詞法分析（核心） 面試考

瀏覽器執行函式的時候 並沒有馬上執行 而是先進行詞法分析

詞法分析示例：

function t1(age){
    console.log(age)
    var age=27
    console.log(age)
    function age(){}
    console.log(age)
}
t1(3);

列印結果是 function age{} ,27, 27

詞法分析順序
active object AO
1.形式引數
2.函式內區域性變數
3.函式內宣告表示式

對於上面的示例 我們按照詞法分析順序的規則來進行詞法分析：
分析流程：

1.形式引數 AO.age=undefined AO.age=3
2.區域性變數 AO.age=undefined(之前有AO.age=3 但是不會做任何改變)
3.函式宣告表示式 AO.age=function() 因為函式優先順序比較高 不用undefined 所以執行的時候 age=function(){}
所以結果就是 function 然後age被27覆蓋 就是27 最後function呼叫 輸出27