How to use jQuery-like selector in pure JavaScript

Question

I'm looking for:

var arrinput = $('input[name$="letter"]')

How do I change jQuery style to pure javascript style?

So, I want tags <input>that nameend with a letter.

---

I changed the code a bit ... My browser does not support querySelector and FYI I use the webbrowser component for C # winforms

Answer 1

Try:

var items = document.getElementsByTagName('input');
for (var i=0; i<items.length; i++) {
    var item = items[i];
    if (/letter$/.test(item.name)) {
        item.value = "A letter";
    }
}

Answer 2

For modern browsers:

document.querySelector('input[name$=letter]');

will return the first match.

document.querySelectorAll('input[name$=letter]');

will return a list of matches.

I suspect that if you are viewing jquery source code, it uses document.querySelector[All]it when it is available.

Answer 3

, , .

So, I have a little function for this (it is optimized):

/**
 * Searches and finds the parent node for a dom object
 * 
 * @examples: 
 *  getParent(elem, 'div')                  // The first div parent found
 *  getParent(elem, 'div[id]')              // The first div parent with an id found
 *  getParent(elem, 'div[id="toto"]')       // The first div parent with id equals toto found
 *  getParent(elem, 'div[id=^="toto"]')     // The first div parent with id start by toto found
 *  getParent(elem, 'div[id=$="toto"]')      // The first div parent with id end by toto found
 *  getParent(elem, 'div[id=*="toto"]')     // The first div parent with id contains toto found
 *
 * @param domObject elem
 * @param string [target]
 * @return domObject or null
 */
function getParent(elem, target)
{
    if(target == null)
        return elem.parentNode;

    var elem_name = target,
        attr_name = null, attr_value = null, 
        compare_type = null,
        match_val = target.match(/\[.+[^\[\]]\]$/i);

    if(match_val != null) 
    {
        elem_name = elem_name.replace(match_val[0], '');

        var expr = match_val[0].substr(1, match_val[0].length-2),
            tmp = expr.split('=');

        attr_name = tmp[0];
        if(tmp.length == 2) 
        {
            attr_value = tmp[1].toLowerCase();
            attr_value = attr_value.replace(/(\'|\")+/ig, '');

            if(attr_name.match(/\^$/))
                compare_type = 'begin';
            else if(attr_name.match(/\*$/))
                compare_type = 'all';
            else if(attr_name.match(/\$$/))
                compare_type = 'end';
            else
                compare_type = 'simple';

            if(compare_type != 'simple')
                attr_name = attr_name.substr(0, attr_name.length-1);
        }
    }

    var parent = elem.parentNode;

    do 
    {
        if(parent.nodeName.toUpperCase() == elem_name.toUpperCase())
        {
            if(attr_name != null) 
            {
                var attribute = parent.getAttribute(attr_name).toLowerCase();
                if(attribute != null && attribute != '') 
                {
                    if(attr_value == null)
                        return parent;

                    if(compare_type == 'simple' && attribute == attr_value)
                        return parent;
                    if(compare_type == 'begin' && attribute.match(eval('/^'+attr_value+'/ig')))
                        return parent;
                    if(compare_type == 'end' && attribute.match(eval('/'+attr_value+'$/ig')))
                        return parent;
                    if(compare_type == 'all' && attribute.match(eval('/'+attr_value+'/ig')))
                        return parent;
                }
            } else {
                return parent;
            }
        }

        parent = parent.parentNode;
    } 
    while(parent != null);

    return null;
}