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升序