前端基础12：递归调用，快速排序和简单DOM元素操作

递归调用

• 递归调用，方法自己调用自己(重复执行方法中的逻辑）
  • 1.在方法内部调用自己的方法写在return
  • 2.设置边界条件，让递归调用停下来

    function fn(n) {
        if(n == 1){
            return 1;
        }
        return n + fn(n-1);
    }
    console.log(fn(100));//5050
复制代码

    function fn(n) {
        if(n === 1){
            return 1;
        }
        if(n%2 === 1){
            return n * fn(n - 2);
        }else if(n%2 === 0){
            return fn(n - 1);
        }
    }
    console.log(fn(10));//945
复制代码

快速排序

• 思路：先取出数组的中间项，将数组的其他项和中间项比较，若比中间项小则放在左手边，若比中间项大则放在右手边。左手和右手边再重复上述操作，最后将所有的数合并在一起。

    var a = [1,7,4,5,8,3,77,45,86,93,34,52];
    //先获取中间项索引
    function quickSort(n) {
        //处理边界
        if(n.length <= 1){
            return n;
        }
        var pointIndex = Math.floor(n.length/2);
        //通过中间索引，把中间项从数组中删除
        var pointView = n.splice(pointIndex,1)[0];
        var left = [];//左手边
        var right = [];//右手边
        for(var i = 0; i < n.length; i++){
            if(n[i] <= pointView){
                left.push(n[i]);
            }else{
                right.push(n[i]);
            }
        }
        return quickSort(left).concat(pointView,quickSort(right));
    }
    console.log(quickSort(a));//[1, 3, 4, 5, 7, 8, 34, 45, 52, 77, 86, 93]
复制代码

string案例1

• 如何格式化url地址中问号传参（qreryString）部分？
  • 1.先拿到？的索引
  • 2.拿到？后的参数部分str
  • 3.将字符串按照&拆分成数组的每一项
  • 4.将ary数组中每一项再按照=拆分成数组的每一项
  • 5.把数组ary1和ary2中的第一项作为属性名，第二项作为对象的属性值

    var url = "https://www.twitch.tv?name=tw&age=8";
    function queryUrl(url) {
        var obj = {};
        var index = url.indexOf("?");//拿到？的索引
        var str = url.slice(index + 1);//截取？后的部分
        var ary = str.split("&");
        for(var i = 0; i < ary.length; i++){
            var cur = ary[i];
            var arr = cur.split("=");
            obj[arr[0]] = arr[1];
        }
        return obj;
    }
    console.log(queryUrl(url));
复制代码

DOM部分

• 浏览器渲染时，页面上的内容会渲染成有层次结构的节点，一个页面只有一个根节点document，根节点下根元素只有一个，就是HTML标签
• 文档 -> 文档节点
• 文本 -> 文本节点
• 注释 -> 注释节点
• 标签 -> 元素节点

节点	nodeName(节点名称)	nodeType(节点类型)	nodeValue(节点内容)
文档节点	#document	9	null
文本节点	#text	3	文本的内容（包括换行）
注释节点	#comment	8	注释的内容
元素节点	大写的标记名	1	null

DOM节点间相互关系的属性

• 1.childNodes 所有的子节点（文本节点，元素节点，注释节点）
• 2.children 所有的子元素
• 3.firstChild 第一个子节点
• 4.firstElementChild 第一个子元素节点 （ie6~ie8不支持）
• 5.lastChild 最后一个子节点
• 6.lastElementChild 最后一个子元素节点
• 7.nextSibling 相邻弟弟节点
• 8.nextElementSibling 相邻弟弟元素节点
• 9.previousSibling 相邻哥哥节点
• 10.previousElementSibling 相邻的哥哥元素节点
• 11.parentNode 父元素节点

获取DOM元素

• ID名 document.getElementById("ID名")
• 标记名context.getElementsByTagName("标签名")
• 类名context.getElementsByClassName("类名")
• name属性 在标准浏览器对所有元素起作用，在IE浏览器下只对表单元素起作用
  • context.getElementsByName("")
• 选择器 document.querySelectorAll() 获得一组元素 移动端常用 - document.querySelector() 获得一个元素 移动端常用
• 设置DOM元素的自定义属性：
  • ele.setAttribute(key,value);
  • ele.getAttribute();

转载于:https://juejin.im/post/5b8683016fb9a019fe685949