DOM相關操做、事件、方法

1. 獲取元素方法

        1.根據 id
                var element = document.getElementById("idName");

        2.根據 標籤名
                var elements = document.getElementsByTagName("標籤名");

        3.根據 類名
                var elements = document.getElementsByClassName("類名");

        4.H5新增 獲取方法
                document.queryselector("");
                document.queryselectorAll("");

        5.獲取 body 元素
                document.body

2. 事件

        1.點擊事件(雙擊事件ondblclick)
                ele.onclick = function(){};

        2.鼠標事件
                1.鼠標懸浮(通過) ele.onmouseover = function(){};

                2.鼠標離開 ele.onmouseout = function(){};

        onmouseenter和onmouseleave是DOM2的方法, 有兼容問題

        onmouseover  鼠標通過盒子的時候執行1次

        onmousemove  鼠標只要移動的時候就會執行
                
                3.鼠標按下 ele.onmousedown = function(){};

                4.鼠標彈起 ele.onmouseup = function(){};
                
                5.鼠標滾動 ele.onmousewheel = function(){};

        3.焦點事件
                1.失去焦點 ele.onblur = function(){};

                2.得到焦點 ele.onfocus = function(){};

                3.輸入事件 ele.oninput = function(){};
        
                onkeyup和oninput  聯想搜索

                4.內容發生改變 ele.onchange = function(){};
                
                通常作驗證或者下拉框選擇會使用onchange

        4.鍵盤事件

                1.鍵盤鍵入 ele.onkeydown = function(){};

                2.鍵盤彈起 ele.onkeyup = function(){};

                3.鍵盤按下 ele.onleypress = function(){};

                onkeydown優先於onkeypress執行

                onkeypress不識別系統按鍵

                onkeypress區分大小寫

        5.window 事件

                1.鍵盤事件 event.keyCode
                鍵盤對應的編碼

                2.頁面滾動 window.onscroll = function(){};
        
                window.scroll必須有滾動條才觸發, 通常配合$(window).scrollTop()

                window.onmousewheel / document.onmousewheel不管有沒有滾動條都能觸發
        
                3.窗口大小變化 window.onresize = function(){};

3. 字符串 相關方法

        1.replace() 字符串替換

                xxx = xxx.replace(searchValue, replaceValue);

                只找第一個匹配的替換

        2.indexOf() --- lastIndexOf() 搜索(找到 對應的 返回位置) 
                一個參數從第一個找
                兩個參數從指定的位置找
                不存在返回 -1, 查找的是""返回 0

        3.trim() 刪除左右空格 

        4.split("") 字符串 轉換成 數組  引號裏肯定用什麼分割

        5.charAt() 獲取指定位置處字符

        6.slice()  從start位置開始,截取到end位置,end取不到

        7.substring() 從start位置開始,截取到end位置,end取不到

        8.substr()    從start位置開始,截取length個字符

        9.toUpperCase()  str轉換爲大寫

        10.toLowerCase()  str轉換爲小寫

4.數組 相關方法

        1.join("") 數組 轉換成 字符串 引號裏肯定用什麼拼接(默認逗號) 

        2.toString() 數組 轉換爲 字符串 (去掉[])

        3.valueOf() 返回數組對象自己

        4.Array.isArray(xxx) 檢測xxx是不是數組

        5.xxx instanceOf Array 檢測xxx是不是數組

        6.push() pop()  從後邊增刪

        7.unshift() shift() 從前邊增刪

        8.reverse() 翻轉數組

        9.slice() 從數組中截取一部份內容

        10.splice() 從數組中刪除或替換數組中的一部分
        
        11. xxx.indexOf()  尋找指定元素在數組中的位置,若是沒找到返回-1 

        12. xxx.lastIndexOf()  從後面找

        13.xxx.filter(function(){ }) 迭代過濾/篩選

        14.xxx.forEach(function(){ }) 遍歷

        15.xxx.map(function(){ }) 映射

        16.xxx.some(function(){ }) 數組中至少有一個數據符合要求

        17.xxx.every(function(){ }) 數組中全部數據符合要求

        18.concat() 把一個數組和另外一個數組拼接在一塊兒

        19.sort() 進行冒泡排序 b-a倒序 a-b升序數組

相關文章
相關標籤/搜索