Is there any google closure function like jQuery .is()

Question

I am more familiar with Jquery, but I am working with Google Closure. I want to know if there is any function or library in Google Closure like .is() in jQuery so I can check if the target element matches the css selector. I found a plugin goog.dom.query, but this is not exactly what I need as it is used to find elements.

Answer 1

I don't really use the Google Closure library myself, but after some researching. I found a few methods that might be of relevance from this github library(unit tests) and dom.js library. You could use .tagName, in conjunction with strict equals. For example, if I'm looking for a DIV element.

var parent = goog.dom.createDom(goog.dom.TagName.DIV);
parent.tagName === goog.dom.TagName.DIV

Or if I'm looking for a li element.

parent.tagName === goog.dom.TagName.LI

You can read about different (and find) TagName options on the W3C Index of Elements.

Here is an example of a method that extends google closure and might replicate the basic functionality of .is() (jQuery equivalent .is('li'))..

/**
 * Checks the type of an element
 * @param {Node} element
 * @param {string} type
 * @return {boolean}
 */
goog.dom.is = function(element, type) {
    switch(type){
        case goog.dom.TagName.DIV:
            return true;
            break;
        case goog.dom.TagName.P:
            return true;
            break;
        case goog.dom.TagName.LI:
            return true;
            break;
        case goog.dom.TagName.UL:
            return true;
            break;
        //Add more types...
    }
    return false;
};

Although it can be improved, this instead of element, would help. ;)

Answer 2

I don't believe there is an analogous function because typically you aren't doing as much element querying/selecting in closure. Also I can't test this because I'm not sure how to use the library in something like jsbin, but it seems like using the goog.dom.query plugin from the dojo toolkit you mentioned, you could create your own function as a matcher :

function elementMatcher (element, selector){
  var testNode = goog.dom.createElement('div');
  var cloneNode = element.cloneNode();
  testNode.appendChild(cloneNode);
  return goog.dom.query(testNode, selector).length > 0;
}

Again without being able to test this I can't tell you if it will work or be as useful as the jquery is function, but it may get you on the right track.