在另一个类中查找一个类并执行一些浏览器操作

Question

我正在尝试查找特定的类（profileCard），然后检查该类中是否有不同的类（followStatus）。如果它里面有followStatus，我想点击一个同样位于profileCard类内的按钮。这是我的代码：

var profileCard = document.getElementsByClassName('ProfileCard');
var unfollowButtons = profileCard.getElementsByClassName('button-text');
var followStatus = profileCard.getElementsByClassName('FollowStatus');

for (var i = 0; i < profileCard.length; i++) {
  if (followStatus[i] != null) {
    unfollowButtons[i].click();
  }
}

我想在Chrome中使用此功能只需将其粘贴到控制台中，但代码似乎什么都不做：按钮永远不会被点击。我的代码中的错误在哪里以及如何解决？

Answer 1

我建议编程某种节点选择器或使用http://jquery.com/。

请注意，document.getElementsByClass名称在某些浏览器中不兼容。 这是我刚编程的节点选择器，它解决了这个问题。

N$ = (function(){
    if (!Array.prototype.indexOf)
    {
      Array.prototype.indexOf = function(elt /*, from*/)
      {
        var len = this.length >>> 0;

        var from = Number(arguments[1]) || 0;
        from = (from < 0)
             ? Math.ceil(from)
             : Math.floor(from);
        if (from < 0)
          from += len;

        for (; from < len; from++)
        {
          if (from in this &&
              this[from] === elt)
            return from;
        }
        return -1;
      };
    }
    if (!window.getComputedStyle) {//IE
        window.getComputedStyle = function(el, pseudo) {
            this.el = el;
            this.getPropertyValue = function(prop) {
                var re = /(\-([a-z]){1})/g;
                if (prop == 'float') prop = 'styleFloat';
                if (re.test(prop)) {
                    prop = prop.replace(re, function () {
                        return arguments[2].toUpperCase();
                    });
                }
                return el.currentStyle[prop] ? el.currentStyle[prop] : null;
            }
            return this;
        }
    }

    var N$_CURRENT_EVENT_THIS = null;
    var DOM_N$ = function(selector){
        if(typeof selector == typeof ""){
            this.selector = selector;
            this.nodes = $prepare(this.selector);
            this.win = window;
            this.doc = document;
        }else if(typeof selector == typeof {}){
            this.selector = N$_CURRENT_EVENT_THIS.selector;
            this.nodes = $prepare(this.selector);
            this.win = window;
            this.doc = document;
        }


        this.getSelector=function(){

            return this.selector;
        };
        this.eachNode = function(func){
            var that = this;
            for (var i = 0; i < this.nodes.length; i++) {
                N$_CURRENT_EVENT_THIS = that;
                func(this.nodes[i]);
                N$_CURRENT_EVENT_THIS = null;
            };
        };
        this.css = function(attr, value){
            N$_CURRENT_EVENT_THIS = this;
            var attribute = "";
            if(attr.indexOf('-') !== -1){
                var split_attr = attr.split('-');
                for (var i = 0; i < split_attr.length; i++) {
                    if(i != 0)
                        attribute += split_attr[i].charAt(0).toUpperCase() + split_attr[i].slice(1);
                    else
                        attribute += split_attr[i].charAt(0).toLowerCase() + split_attr[i].slice(1);
                };
            }else{
                attribute = attr;
            }

            var properties = new Array();
            for (var i = 0; i < this.nodes.length; i++) {
                if(typeof value != 'undefined'){
                    this.nodes[i].style[attribute] = value;
                }
                properties.push(window.getComputedStyle(this.nodes[i], null).getPropertyValue(attr));
            };
            return properties;
        };
        this.addEvent = function(event_, func){
            var that = this;
            for (var i = 0; i < this.nodes.length; i++) {
                var node = this.nodes[i];
                var events = this.nodes[i].events || {};    
                if(node.addEventListener){
                    if((event_) in events){
                        node.removeEventListener(event_, events[event_], true);
                        var tmp___ = events[event_];
                        var tmp__ = function(){
                            this.bar = "hello";
                            N$_CURRENT_EVENT_THIS = that;
                            tmp___(node, event_);
                            func(node, event_);
                            N$_CURRENT_EVENT_THIS = null;
                        };
                        node.addEventListener(event_, tmp__, true);
                        events[event_] = tmp__;
                    }else{
                        var tmp__ = function(){
                            N$_CURRENT_EVENT_THIS = that;
                            func(node, event_);
                            N$_CURRENT_EVENT_THIS = null;
                        };
                        node.addEventListener(event_, tmp__, true);
                        events[event_] = tmp__;
                    }
                }else if(node.attachEvent){
                    var ie_event = 'on' + event_;
                    if(event_ in events){
                        node.attachEvent(ie_event, function(){
                            N$_CURRENT_EVENT_THIS = that;
                            func(node, event_);
                            events[event_](node, event_);
                            N$_CURRENT_EVENT_THIS = null;
                        });
                    }else{
                        node.attachEvent(ie_event, function(){
                            N$_CURRENT_EVENT_THIS = that;
                            func(node, event_);
                            N$_CURRENT_EVENT_THIS = null;
                        });
                    }
                    events[event_] = func;
                }
                this.nodes[i].events = events;
            }
        };
        this.removeEvent = function(event_){
            N$_CURRENT_EVENT_THIS = this;
            for (var i = 0; i < this.nodes.length; i++) {
                var node = this.nodes[i];
                var events = this.nodes[i].events || {};
                if(node.removeEventListener){
                    if((event_) in events){
                        node.removeEventListener(event_, events[event_], true);
                        events[event_] = null;
                    }
                }else if(node.detachEvent){
                    var ie_event = 'on' + event_;
                    if((event_) in events){
                        node.detachEvent(ie_event, events[event_]);
                        delete events[event_];
                    }
                }
            }
        };
        this.text = function(str){
            N$_CURRENT_EVENT_THIS = this;
            for (var i = 0; i < this.nodes.length; i++) {
                var node = this.nodes[i];
                node.innerHTML = '';
                node.appendChild(document.createTextNode(str));
            }
        };
        this.animate = function(func, from, to, speed){
            var nodes = this.nodes;
            var that = this;
            for (var i = 0; i < this.nodes.length; i++) {
                (function animate(func, from, to, speed, i){
                    if(from >= to){
                        N$_CURRENT_EVENT_THIS = that;
                        func(nodes[i], to);
                        N$_CURRENT_EVENT_THIS = null;
                    }else{
                        N$_CURRENT_EVENT_THIS = that;
                        func(nodes[i], from);
                        N$_CURRENT_EVENT_THIS = null;
                        setTimeout(
                            function(){
                                animate(func, from +1, to, speed, i);
                            }, speed
                        );
                    }
                })(func, from, to, speed, i);
            }
        };
        this.appendNode = function(tagname, innerHTML){
            for (var i = 0; i < this.nodes.length; i++) {
                var new_node = document.createElement(tagname);
                new_node.innerHTML = innerHTML;
                this.nodes[i].appendChild(new_node);
            }
        };
        this.removeNode = function(){
            for (var i = 0; i < this.nodes.length; i++) {
                this.nodes[i].parentNode.removeChild(this.nodes[i]);
            }
        };
        function $prepare(str){
            str = str.replace(/(\s+>\s+)/g,'>');
            str = str.replace(/(\s+)/g,' ');
            var str_ = str;
            var querys = str.split(/[\s\>]+/);
            var querys_des = Array();

            var ascender = new Array();
            for (var i = 0; i < str_.length; i++) {
                if(str_[i] == ">" || str_[i] == " "){
                    var tmp_ = (str_[i] == ">")? 'next_child' : 'ascended';
                    ascender.push( tmp_);
                }
            };
            var recognizes = new Array();
            for (var i = 0; i < querys.length; i++) {
                var asc_child = null;
                asc_child = ascender[i-1];
                var tmp_ = {
                    "selector": querys[i],
                    "i":i
                };
                recognizes[i] = recognize(querys[i]);
                if(i != 0){
                    tmp_["asc_child"] = asc_child;
                }else{
                    tmp_["base_selector"] = true;
                }
                querys_des.push(tmp_);
            };

            return $select(querys_des, recognizes);
        }
        function $select(querys_des, recognizes, parent_){
            var parents = parent_ || null;
            for (var i = 0; i < querys_des.length; i++) {
                if('base_selector' in querys_des[i]){
                    parents = recognizes[querys_des[i]['i']];
                }else if('asc_child' in querys_des[i]){
                    var cur_children = recognizes[querys_des[i]['i']];
                    if(querys_des[i]['asc_child'] == 'next_child'){
                        var compatible = compatible_children(parents, cur_children, querys_des[i]['asc_child']);
                        parents = compatible;
                    }else if(querys_des[i]['asc_child'] == 'ascended'){
                        var compatible = compatible_children(parents, cur_children, querys_des[i]['asc_child']);
                        parents = compatible;
                    }
                }
            };

            return parents;
        }

        function compatible_children(parents, children, type){
            var ret = new Array();
            for (var a = 0; a < parents.length; a++) {
                for (var b = 0; b < children.length; b++) {
                    if(type == 'next_child'){
                        if(parents[a] == children[b].parentNode){
                            if(ret.indexOf(children[b]) == -1)
                                ret.push(children[b]);
                        }
                    }else if(type == 'ascended'){
                        if(isin(parents[a], children[b])){
                            if(ret.indexOf(children[b]) == -1)
                                ret.push(children[b]);
                        }
                    }
                }
            }
            return ret;
        }

        function isin(parent, child){
            var child_ = child;
            var ret = new Array();
            while((child_ = child_.parentNode) && child_ != document.body){
                if(parent == child_){
                    return true;
                }
            }
            return false;
        }

        function recognize(str){
            var identifier = new Array();

            var id_ = false;
            var class_ = false;
            var dom_ = false;
            if(str.indexOf("#") >= 0){
                id_ = true;
                var tmp = str.split("#")[1];
                if(str.indexOf(".") >= 0){
                    identifier['ID'] = tmp.split(".")[0];
                }else{
                    identifier['ID'] = tmp;
                }
            }

            if(str.indexOf(".") >= 0){
                class_ = true;
                var tmp = str.split(".")[1];
                if(str.indexOf("#") >= 0){
                    identifier['CLASS'] = tmp.split("#")[0];
                }else{
                    identifier['CLASS'] = tmp;
                }
            }


            if(id_ && class_){
                if(str.indexOf("#") < str.indexOf(".")){
                    var tmp = str.split("#")[0];
                    if(tmp.length > 0){
                        dom_ = true;
                        identifier['DOM'] = tmp;
                    }
                }else{
                    var tmp = str.split(".")[0];
                    if(tmp.length > 0){
                        dom_ = true;
                        identifier['DOM'] = tmp;
                    }
                }
            }else if(id_){
                var tmp = str.split("#")[0];
                if(tmp.length > 0){
                    dom_ = true;
                    identifier['DOM'] = tmp;
                }
            }else if(class_){
                var tmp = str.split(".")[0];
                if(tmp.length > 0){
                    dom_ = true;
                    identifier['DOM'] = tmp;
                }
            }else{
                if(str.length > 0){
                    dom_ = true;
                    identifier['DOM'] = str;
                }
            }


            var x;
            if(class_){
                if(typeof document.getElementsByClassName !== 'function') {//Old browsers
                    x = document.body.getElementsByTagName("*");
                }else{
                    x = document.getElementsByClassName(identifier['CLASS']);
                }

            }else if(dom_){
                x = document.getElementsByTagName(identifier['DOM']);
            }else if(id_){
                x = document.body.getElementsByTagName("*");
                for (var i = 0; i < x.length; i++) {
                    if(x[i].getAttribute("id") != identifier['ID']){
                        delete x[i];
                    }
                };
            }

            var elements = new Array();


            for (var i = 0; i < x.length; i++) {
                if(id_ && class_){
                    if(x[i].getAttribute("id") == identifier["ID"] && x[i].getAttribute("class") == identifier["CLASS"]){
                        if(dom_){
                            if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
                                elements.push(x[i]);
                            }
                        }else{
                            elements.push(x[i]);
                        }
                    }
                }else if(id_){
                    if(x[i].getAttribute("id") == identifier["ID"]){
                        if(dom_){
                            if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
                                elements.push(x[i]);
                            }
                        }else{
                            elements.push(x[i]);
                        }
                    }
                }else if(class_){
                    if(x[i].getAttribute("class") == identifier["CLASS"]){
                        if(dom_){
                            if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
                                elements.push(x[i]);
                            }
                        }else{
                            elements.push(x[i]);
                        }
                    }
                }else{
                    if(dom_){
                        if(x[i].tagName.toLowerCase() == identifier['DOM'].toLowerCase()){
                            elements.push(x[i]);
                        }
                    }else{
                        elements.push(x[i]);
                    }
                }

            };

            return elements;
        }
    }


    var selectors = new Array();
    return function(selector){
            var N$_new = new DOM_N$(selector);
            var N$_ = null;
            if(selectors.length > 0){
                for (var i = selectors.length - 1; i >= 0; i--) {
                    if(selectors[i].selector == selector){
                        var not_in = new Array();
                        for (var b = N$_new.nodes.length - 1; b >= 0; b--) {
                            if(selectors[i].nodes.indexOf(N$_new.nodes[b]) == -1){
                                not_in.push(N$_new.nodes[b]);
                            }
                        };
                        for (var a = not_in.length - 1; a >= 0; a--) {
                            if(selectors[i].nodes.indexOf(not_in[a]) == -1){
                                selectors[i].nodes.push(not_in[a]);
                            }
                        };
                        N$_ = selectors[i];
                        break;
                    }else{
                        N$_ = N$_new;
                        /*
                        if(N$_.nodes.length > 0){
                            selectors.push(N$_);
                        }*/
                    }
                };
            }else{
                N$_ = N$_new;
                if(N$_.nodes.length > 0){
                    selectors.push(N$_);
                }
            }
            return N$_;
    };
})();

用于：

N$('.ProfileCard .FollowStatus').addEvent('click', function(node_, event_){
     //Do something.
     //node_ is a native Node
});