使用原生JavaScript实现网页定位导航

上一节我们通过jQuery实现了简单的网页定位导航，这一节使用JavaScript来实现。或许有人在想jQuery实现已经那么简便了怎么还要用JavaScript，但是作为一名合格的前端工程师，对底层的js也要有一定认识和掌握。
这一节我们需要使用的知识有，学会将经常使用到的方法进行封装，方便在实验中的调用，jQuery和js获取元素的不同实现方法，还有正则表达式的使用等等。现在就让我们进入正题。
网页的结构和表现CSS样式跟上一节的都一样，我们可以使用之前写过的代码，然后就是定位的实现。在jQuery中可以很快地利用选择器实现根据id或类名获取元素，移除元素，在js中我们可以对这些经常使用的方法进行封装。

根据类名获取元素getByClassName（obj，cls）

function getByClassName(obj, cls) {
                var elements = obj.getElementsByTagName("*");
                var result = [];
                for (var i = 0; i < elements.length; i++) {
                    if (elements[i].className == cls) {
                        result.push(elements[i]);
                    }
                }
                return result;
            }

判断对象是否有某个class ，这里使用到了正则表达式，不熟悉的小伙伴可以先复习一下正则表达式的使用方法。hasClass（obj，cls）

function hasClass(obj,cls){
                return obj.className.match(new RegExp("(\\s|^)"+cls+"(\\s|$)"));
            }

移除对象的某个class。remove（obj，cls）

function removeClass(obj,cls){
                if(hasClass(obj,cls)){
                    var reg=new RegExp("(\\s|^)"+cls+"(\\s|$)");
                    obj.className=obj.className.replace(reg,"");
                }
            }

为对象添加class。addClass（obj，cls）

function addClass(obj,cls){
                if(!hasClass(obj,cls)){
                    obj.className+=" "+cls;
                }
            }

接着实现加载页面和滚动条滚动时触发的事件。关于滚动条滚动的距离，这里有两种模式，即混杂模式document.body.scrollTop和标准模式document.documentElement.scrollTop 。同样的，我们要判断滚动条滚动的距离是否到达了每个楼层距离页面顶部的距离，是的话就把导航条有颜色变化的部分class样式添加到相应的item中，这里距离页面顶部的距离我们使用offsetTop属性获得。

window.onload = function() {
                window.onscroll = function() {
                    var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
                    var menus = document.getElementById("menu").getElementsByTagName("a");
                    var items = getByClassName(document.getElementById("content"), "item");
                    var currentId="";
                    for(var i=0;ivar _item=items[i];
                        var _itemTop=_item.offsetTop;
                        if(top>_itemTop-200){
                            currentId=_item.id;

                        }
                        else{
                            break;
                        }/*jQuery是通过return false;跳出循环，在js中是通过break；或continue；跳出循环*/
                    }
                    if(currentId){
                        for(var j=0;jvar _menu=menus[j];
                            var _href=_menu.href.split("#");
                            if(_href[_href.length-1]!=currentId){
                                removeClass(_menu,"current");/*这里不能写成_menu.className="";因为_menu本身也有class*/
                            }
                            else{
                                addClass(_menu,"current");/*同样的，这里不能写成_menu.className="current"*/
                            }

                        }
                    }
                }
            }

写到这里，我们也实现了跟上节同样的效果。在制作网页的时候，我们可以同时使用jQuery和JavaScript实现，不断增加熟练度。有什么纰漏欢迎大家指正，我们在学习中共同进步，谢谢！