Path: csiph.com!news.mixmin.net!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: Using getElementsByName on a DIV ?
Date: Tue, 26 Apr 2016 20:13:34 +0200
Organization: PointedEars Software (PES)
Lines: 102
Message-ID: <1820440.q89W6NsFzJ@PointedEars.de>
References: <571e5590$0$5835$e4fe514c@news.xs4all.nl> <hdhaf5igcona$.109xfx7v3a5gl$.dlg@40tude.net>
Reply-To: Thomas 'PointedEars' Lahn <cljs@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1461694415 5368 eJwNyskBwDAIA7CVymFDxwFS9h8h1VswCiecoGOxmmU9r7qt1JP4oGiBRGu41kmad8U/h35mLgy+EPc= (26 Apr 2016 18:13:35 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Tue, 26 Apr 2016 18:13:35 +0000 (UTC)
User-Agent: KNode/4.14.2
X-User-ID: eJwNysERACEIBLCWVmDxKAdB+i/hfGYmVF9e25xuHM5EeIRhpL0SnwpoSVf2xcm1Vz9mCSqAbt666rNfONcgPz+PFSM=
Cancel-Lock: sha1:CSuHxebPD6RoBxgkvXUipZ+2GNc=
X-NNTP-Posting-Host: eJwFwYEBACAEBMCVFP8yTsL+I3QH5eJzI2gYzBG6RLWKUddjl8ZchV6vXburMiQEKWM42R8OvREB
Xref: csiph.com comp.lang.javascript:30346

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.