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


Groups > comp.lang.javascript > #31107

Re: DOM properties

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: DOM properties
Date Sun, 14 Aug 2016 21:41:07 +0200
Organization PointedEars Software (PES)
Lines 95
Message-ID <4205682.GXAFRqVoOG@PointedEars.de> (permalink)
References <noqb12$jtn$1@dont-email.me> <DOM-20160814194052@ram.dialup.fu-berlin.de>
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 1471203668 4193 eJwFwYEBwCAIA7CXhlDQc0Ta/09YAk/LV5HIgKATbWXYwysrPe5el0qRyw8HqOiZ3fOFnPwBNGUSYw== (14 Aug 2016 19:41:08 GMT)
X-Complaints-To abuse@news.solani.org
NNTP-Posting-Date Sun, 14 Aug 2016 19:41:08 +0000 (UTC)
User-Agent KNode/4.14.2
Cancel-Lock sha1:BlZxKflJmD8VKpmVReWXQPkhI9k=
X-User-ID eJwFwYEBACAEBMCVfDw1DtL+I3RHdXiHOd34+DY7K5gihUyAjTJpseoY3G13uc/KjiTXWB1QoVF6PIbvA1XhFUI=
X-NNTP-Posting-Host eJwNyMkBwCAIBMCWuHYl5ShC/yWYeQ6cylpBMDCYzl12ITybJTe9DErH+WOZaQvi0xFBITz7ARufEIs=
Xref csiph.com comp.lang.javascript:31107

Show key headers only | View raw


Stefan Ram wrote:

> wmgill <webworker1950@gmail.com> writes:
>> My question is how do I determine what other properties are exposed by
>> the DOM?

Iterate over the properties and determine the own properties of objects.  
Ideally, use the built-in browser development tools.  See the FAQ.
 
>   You can find a recent DOM at
> 
> www.w3.org/TR/2015/REC-dom-20151119/
> 
>   , I call this document »DOM«.

And doing that is wrong.  This document is the DOM( Level)_4 Specification_.  
The DOM (Document Object Model) is a general, abstract concept, a *model*, 
not limited to this DOM Level or the W3C’s idea of a DOM, instead.

>   For example, assume we want to make sense of
> 
> this.document.querySelectorAll( "li" )
> 
>   . The DOM should contain words to the effect that »document«
>   implements the interface »Document«, which itself inherits
>   from the interface »ParentNode«, which then contains
>   »querySelectorAll«.

DOM Specifications specify language-independent interfaces, usually not 
which objects implement them when the DOM implementation is accessed with a 
certain programming language.  In this case, the DOM Level 2 HTML and HTML5 
Specification says which HTML4/XHTML 1.0/(X)HTML5 element interfaces, 
respectively, extend or use (in their attributes and methods) which DOM core 
interfaces.
 
>   Try to trace this in the DOM yourself or ask again if you
>   need more help.

In more recent DOM implementations in Web browsers, the implemented DOM 
interfaces are modeled, curiously, as non-callable, non-instantiable 
constructors [why not make them callable and instantiable?  Why the tedious 
document.createElement(…) approach?].  So you can determine the internal 
[[Class]] property value, use the “constructor” property, the “instanceof” 
operator, and follow the prototype chain to determine which interfaces are 
implemented by a DOM object, and which interfaces _extend_ (not: inherit 
from) other interfaces.

  /**
   * Returns the prototype chain of an object as an array.
   *
   * @param {Object} obj
   * @return {Array}
   * @author Copyright © 2016  Thomas 'PointedEars' Lahn <js@PointedEars.de>
   * @license GNU General Public License, Version 3
   */
  function getPrototypeChain (obj)  
  {
    var
      chain = [],
      proto = obj;

    while ((proto = (proto.__proto__ || Object.getPrototypeOf(proto))))
    {
      chain.push(proto);
    }

    return chain;
  }

  /*
   * [‣ HTMLBodyElement, ‣ HTMLElement, ‣ Element, ‣ Node, ‣ EventTarget,
   *  ‣ Object] ¹)
   */
  console.log(getPrototypeChain(document.body));

Chrome DevTools show this, plus the own properties of the DOM object, in the 
“Properties” tab.  Or you can get the reference to an object, and click you 
way through the “__proto__” properties.  [It is interesting to note that 
contrary to the loop, it never seems to end because 
Object.prototype.__proto__ that yields “null” (end of prototype chain) is 
provided by a getter whose __proto__ refers to, of course, 
Function.prototype.]

__________
¹) This displays the names of the interfaces because the “constructor”
   property of its prototype has a reference to a function, which has
   the interface as its name, as value.  Thus, expanding each item yields
   the properties that are implementations of the interface’s attributes
   and methods.  [Note that /x/.__proto__ (or equivalent) yields “Object”,
   not “RegExp”, in Chromium 51.  This appears to be a bug.]
-- 
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 | NextPrevious in thread | Find similar | Unroll thread


Thread

DOM properties wmgill <webworker1950@gmail.com> - 2016-08-14 13:50 -0400
  Re: DOM properties Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-14 21:41 +0200

csiph-web