Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30346

Re: Using getElementsByName on a DIV ?

Show all headers | View raw

JJ wrote:

> On Mon, 25 Apr 2016 19:37:21 +0200, R.Wieser wrote:
>> Now I think of it, I've got pretty-much the same question in regard to
>> finding an "ancestor" element:  I've written some code which moves up the
>> DOM tree until it finds the sought for element, but maybe there is a
>> simpler, single command available for that too.
> 
> Is querySelector() not applicable?
> 
> e.g.: find the IMG element whose direct parent is a DIV element that has
> "data-name" attribute value of "container".
> 
>   var img = document.querySelector('DIV[data-name]="container" > IMG');
                                                   ^^^^^^^^^^^^^
Please test examples before you post them, or say explicitly that you have 
not tested them.  This is not a valid CSS selector.

You probably meant

  var img = document.querySelector('div[data-name="container"] > img');

but in order to satisfy the “ancestor” requiredment, it would have to be

  var img = document.querySelector('div[data-name="container"] img');

We have discussed the drawbacks of d.qS(A) here already: there is always a 
backwards compatibility problem.  XPath or a custom selector engine like 
jQuery’s Sizzle would help, but in the case of a parent element it is so 
much easier and more compatible to search for all “img” elements with 
document.getElementsByTagName(), and use Array methods on the resulting 
NodeList to filter out those whose parent element is either not a “div” 
element or does not have a “data-name” attribute with the specified:

  var img = [].slice.call(document.getElementsByTagName("img") || [])
    .filter(function (img) {
      var parentNode = img.parentNode;

      return parentNode.tagName.toLowerCase() === "div"
        && parentNode.getAttribute("data-name") === "container";
    });

The “ancestor” requirement would require a loop.  It should therefore be 
tested which of those approaches are the most compatible ones and which are 
the most efficient ones.  With feature testing, all of them can be 
supported.

[Where Array.prototype.filter() of ES 5 is not available, you can easily 
emulate it to sufficient standards compliance:

  if (typeof Array.prototype.filter != "function")
  {
    Array.prototype.filter = function (filter, thisValue) {
      if (arguments.length < 2) thisVal = this;
      var a = [];

      for (var i = 0, len = this.length; i < len; ++i)
      {
        var value = this[i];
        if ((i in this) && filter.call(thisValue, value, i, this))
        {
          a.push(value);
        }
      }

      return a;
    });
  }

or, if order does not matter,

  if (typeof Array.prototype.filter != "function")
  {
    Array.prototype.filter = function (filter, thisValue) {
      if (arguments.length < 2) thisVal = this;
      var a = [];

      for (var i in this)
      {
        var value = this[i];
        if (((i >>> 0) === i) && filter.call(thisValue, value, i, this))
        {
          a.push(value);
        }
      }

      return a;
    });
  }

I find it interesting to note that the second variant could be more 
efficient with sparse arrays and still maintain index order if one would 
sort the resulting array by index and map the result to a value array.

Always filter for-in loops on Array instances afterwards, and as a general 
rule, on all Array instances and instances of derived object types.]

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-25 19:37 +0200
  Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-25 20:57 +0200
    Re: Using getElementsByName on a DIV ? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-04-25 20:10 +0100
      Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-25 21:42 +0200
        Re: Using getElementsByName on a DIV ? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-04-25 23:07 +0100
          Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 09:32 +0200
            Re: Using getElementsByName on a DIV ? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-04-26 11:28 +0100
              Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 14:52 +0200
                Re: Using getElementsByName on a DIV ? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-04-26 14:40 +0100
                Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 18:37 +0200
                Re: Using getElementsByName on a DIV ? "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-04-26 19:12 +0200
                Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 20:44 +0200
                Re: Using getElementsByName on a DIV ? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-04-26 19:17 +0200
                Re: Using getElementsByName on a DIV ? Stefan Weiss <krewecherl@gmail.com> - 2016-04-26 19:56 +0200
                Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 22:11 +0200
                Re: Using getElementsByName on a DIV ? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-04-26 19:40 +0100
                Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 21:43 +0200
                Re: Using getElementsByName on a DIV ? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-04-27 00:14 +0100
                Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-27 11:05 +0200
                Re: Using getElementsByName on a DIV ? Ben Bacarisse <ben.usenet@bsb.me.uk> - 2016-04-28 01:10 +0100
                Re: Using getElementsByName on a DIV ? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-05-05 00:46 +0200
                Re: Using getElementsByName on a DIV ? "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-05-06 12:56 +0200
                Re: Using getElementsByName on a DIV ? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-05-06 05:14 -0700
                Re: Using getElementsByName on a DIV ? John Harris <niam@jghnorth.org.uk.invalid> - 2016-05-05 14:36 +0100
                Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 20:38 +0200
        Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 08:57 +0200
  Re: Using getElementsByName on a DIV ? Stefan Weiss <krewecherl@gmail.com> - 2016-04-25 23:41 +0200
    Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 08:59 +0200
  Re: Using getElementsByName on a DIV ? JJ <jj4public@vfemail.net> - 2016-04-26 19:03 +0700
    Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-26 14:56 +0200
    Re: Using getElementsByName on a DIV ? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-04-26 20:13 +0200
      Re: Using getElementsByName on a DIV ? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-04-26 20:19 +0200
  Re: Using getElementsByName on a DIV ? Dr J R Stockton <reply1600@merlyn.demon.co.uk.invalid> - 2016-04-26 23:30 +0100
    Re: Using getElementsByName on a DIV ? "R.Wieser" <address@not.available> - 2016-04-27 09:29 +0200
    Re: Using getElementsByName on a DIV ? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-04-27 10:34 +0200
    Re: Using getElementsByName on a DIV ? "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-05-04 19:04 -0700

csiph-web