DOM操作

• DOM，Document Object Model，文件物件模型
• 將HTML中的元素當做JS中的物件進行操作，稱為DOM操作
• window物件表示瀏覽器中開啟的視窗，document物件整個文件
• DOM操作核心：找到物件、新增事件、修改樣式、……
• 在JS中樣式的名字採用的是小駝峰的命名規則，如：backgroundColor
• console.log可以將資料輸出到控制檯，不會影響頁面內容

查詢元素

• getElementById：根據ID，獲取的是一個元素
• getElementsByClassName：根據class屬性查詢元素，返回的是陣列
• getElementsByTagName：根據標籤名查詢元素，返回的是陣列
• getElementsByName：根據name屬性查詢元素，返回的是陣列

JS事件

• onclick：單擊
• ondbclick：雙擊
• onfocus：獲取焦點
• onblur：失去焦點
• onmouseover：滑鼠移入
• onmouseout：滑鼠移出

定時器

• 說明：所謂定時器就是在指定的時間做指定的事情
• 分類：
  • 一次性定時器：設定一個時間，時間一到，做指定的事情，之後就銷燬了。
    • 設定：var timer = setTimeout(函式,時間)，時間單位是毫秒
    • 清除定時器：clearTimeout(timer)
  • 週期性定時器：設定一個時間間隔，時間一到，做指定的事情，然後重新計時
    • 設定：var timer = setInterval(函式,時間)，時間單位是毫秒
    • 清除：clearInterval(timer)

獲取樣式

• 相容獲取方式

  var oDiv=document.getElementsByTagName('div')[0]
          //這種方式只能獲取行內樣式
          //alert(oDiv.style.width)
          //低階瀏覽器
          //alert(oDiv.currentStyle['width'])
          //高階瀏覽器
          //alert(getComputedStyle(oDiv,null)['width'])
          alert(getStyle(oDiv,'width'))
          
          //封裝相容獲取樣式的方法
          function getStyle(obj,attr)
          {
              if (typeof(obj.currentStyle)=='undefined'){
                  return getComputedStyle(obj,null)[attr]
              }else{
                  return obj.currentStyle[attr]
              }
          }
   
  

   

window物件

• 時間：

  • onload：頁面載入完成（包括資源）

  • onscroll：頁面滾動

  • onresize：視窗尺寸發生改變

• 屬性：

  • innerWidth：寬度，innerHeight：高度；包括滾動條

  • document：文件物件

    • document.documentElement.clientWidth：淨寬度

    • document.documentElement.clientHeight：淨高度

    • document.documentElement.scrollTop：向上滾動的距離

    • document.documentElement.scrollLeft：向左滾動的距離

    • 說明：以上是H5標準的獲取方式，非H5標準需將documentElement改為body

效果展示

• 飄舞的小球

  • 完善：當滑鼠放到小球上停止飄，離開後繼續飄

查詢元素

• 示例：

<script>
        var wtms=document.getElementById('wtms')
        //上一個同胞元素
        var prev=wtms.previousElementSibling||wtms.previousSibling
        //下一個同胞元素
        var next=wtms.nextElementSibling||wtms.nextSibling
        //父級元素
        var parent=wtms.parentNode
        //獲取第一個子元素
        var first=parent.firstElementChild||parent.firstChild
        //獲取最後一個子元素
        var last=parent.lastElementChild||parent.lastChild
        
        //在文件中連續查詢
        var uncle=wtms.parentNode.nextElementSibling
        alert(uncle.innerText)
        
    </script>

建立與刪除

• 建立元素：div=document.createElement('div')

• 新增元素：div.appendChild(button)

• 刪除元素：grand.removeChild(parent)

事件冒泡

• 說明：當下層元素和上層元素支援同一事件，當上層事件觸發時，下層事件也會觸發，這種事件稱為事件冒泡

• 取消事件冒泡：ev.cancelBubble=true

事件繫結

• 說明：一個事件觸發時，想要同時呼叫多個處理函式，直接設定後面的覆蓋前面的，可以通過事件繫結解決。

• 示例：

var div=document.getElementsByTagName('div')[0]
        //傳統的方式不行（後面的設定會覆蓋前面的）
//      div.onclick=giveRed
//      dv.onclick=giveGreen
​
        //新增事件繫結
//      div.addEventListener('click',giveRed,false)
//      div.addEventListener('click',giveGreen,false)
        
        addBind(div,'click',giveRed)
        addBind(div,'click',giveGreen)
        
        //移除事件繫結
//      div.removeEventListener('click',giveRed,false)
        delBind(div,'click',giveRed)
        
        
        function giveRed(){
            alert('紅色')
        }
        
        function giveGreen(){
            alert('綠色')
        }
        
        //相容繫結事件
        function addBind(obj,ev,func)
        {
            if(obj.addEventListener){
                //高階瀏覽器
                obj.addEventListener(ev,func,false)
            }else{
                //低階瀏覽器
                obj.attachEvent('on'+ev,func)
            }
        }
        //相容取消繫結
        function delBind(obj,ev,func)
        {
            if(obj.removeEventListener){
                obj.removeEventListener(ev,func,false)
            }else{
                obj.DataContainerEvent('on'+ev,func)
            }
        }

事件源元素

• 說明：就是根據事件獲取事件發生的元素，也就是該事件發生在哪個元素上。

• 示例：

function change(e)
        {
            var ev =e||event
            //根據事件獲取傳送的元素
            var obj=ev.srcElement
            //修改樣式
            obj.style.background='green'
        }

點選位置

• 說明：點選事件觸發時，滑鼠距離視窗的偏移位置

• 示例：

function dian(e)
        {
            var ev=e||event
            //點選位置在視窗的座標
            console.log(ev.clientX+'x'+ev.clientY)
        }

鍵盤事件

• onkeydown：鍵盤按下事件

  • 按鍵的ASCII：ev.keyCode

  • 是否按下了特定的組合按鈕

  if(ev.altKey==true){
                  console.log('您按下了alt鍵')
              }else if(ev.ctrlKey==true){
                  console.log('您按下了ctrl鍵')
              }else if(ev.shiftKey==true){
                  console.log('您按下了shift鍵')
              }

   

禁用右鍵

• 示例：

document.oncontextmenu=function(){
            //返回false時即可禁用右鍵，選單不會顯示
            return false
        }

控制跳轉

• 說明：a標籤的onclick事件的返回值可以決定是否跳轉，返回true可以跳轉，返回false不能跳轉

• 示例：

<a href="http://www.baidu.com" onclick="return tiao()">百度一下</a>
​
<script type="text/javascript">
        function tiao(){
            //邏輯處理
            //返回false就無法跳轉
            return false
        }
    </script>

各種彈框

• alert：警告框

• confirm：確認框，點選確定返回true，點選取消返回false

• prompt：輸入框，點選確定返回輸入內容，取消返回null

BOM操作

• 說明：將瀏覽器當做物件（window）一樣進行操作，稱為BOM操作

• 使用：

  • open：開啟新頁面

  • close：關閉使用JS建立的視窗

  • history：歷史記錄跳轉

    • back：向後跳轉一個頁面

    • go：可以指定跳轉，正數向前跳，負數向後跳

  • location：

    • href：指定當前視窗的url，修改它可以直接實現頁面跳轉