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

Groups > comp.lang.javascript > #31104 > unrolled thread

DOM properties

Back to article view | Back to comp.lang.javascript

Contents

  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

#31104 — DOM properties

Forgive me for being very rusty, and unfocused, but I'm having trouble 
finding something that I can use as a reference.

To show you what I'm looking for, take this code snippet: 
x[i].style.display = "none";

I fully understand what it's doing, and how. It's dynamically setting an 
element's display property to "none", just like could be done via a 
stylesheet:

Element {
   display:none;
   }

My question is how do I determine what other properties are exposed by 
the DOM?  I used to have a home made tool to loop through an element 
(object) and print out all its properties, but would prefer to have a 
reference document to look things up.  Further, to demonstrate my foggy 
state, as I was thinking about the JS I couldn't remember how I knew the 
CSS and knew "display" actually was a valid property of Element, but I 
could easily find a list of acceptable values for display.

I have found some online references, but as far as I can see, I need to 
know where I'm going before they are of any use. Does that make sense?

[toc] | [next] | [standalone]

#31107

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.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web