DOM Tidbits

  1. I’m moving forward with the Indexing idea. And I’m learning a lot in the process. Here I’ve summarized a few things:

  1. attribute
    • element.getAttribute(attributeName)
      • returns text value, which is always what I want
      • Corresponds to element.setAttribute(newTextValue)
    • element.attributes[attributeName]
      • returns an Attribute object; still need to get attributeObject.value for the text
      • Corresponds to element.attributes.setNamedItem(newAttributeObject)
    • element.attributeName
      • returns an Attribute object an object which depends on the attribute**, if that attributeName is standard W3 (like ‘id’, or ‘lang’; i.e. an attribute that can apply to “All Elements“)
    • Thanks, MDN
  2. escaping
    1. document.querySelectorAll(‘ix\\:nonnumeric’)
      1. needs to escape colons; it uses CSS3 selectors
    2. document.getElementsByTagName(‘ix:nonnumeric’)
      1. does not need to escape colons
    3. The latter is faster
      1. Significantly; 0.74 ms vs 8 ms
    4. But the former can accept an array of values
      1. If I want to accommodate iXBRL documents which do use prefixes as well as those which don’t
        1. document.getElementsByTagName([‘ix:nonnumeric’, ‘nonnumeric’]) //Won’t work
        2. TODO: Check if use of prefix (vs just LocalPart ) is a MUST
        3. TODO: Check if the ‘ix’ prefix (vs ‘ixbrl’ or anything else) is a MUST
      2. Or if I want to get many different tag names
        1. document.getElementsByTagName( [‘ix:nonnumeric’, ‘ix:fraction’]) //Won’t work
      3. This may be a dealbreaker
        1. I’ve learned to love Array.prototype.map, which can make any function operate over an array of things
        2. But this would return an Array of Nodelists, which I can’t “flatten” for iteration
  3. mapping native methods
    1. In Indexing, I discovered this is super-fast:
      1. arrayOfIds.map(document.getElementById)
    2. Now it breaks my Chrome console:
      1. >> TypeError: Illegal invocation
    3. wrapping
      1. So I wrap it, or “alias” it, and it’s still super fast;
        1. arrayOfIds.map(function(id) { return document.getElementById(id); })
    1. pointing
      1. Is still illegal:
        1. getById=document.getElementById;
        2. arrayOfIds.map(getById);
        3. >> TypeError: Illegal invocation
  4. tagName
    1. element.tagName capitalizes, and returns the QName, where I was expecting the LocalPart (Chrome & Firefox)
      1. document.getElementsByTagName(‘ix:nonnumeric’)[0].tagName
      2. >> “IX:NONNUMERIC
    2. But element.nodeName does not capitalize
      1. It still returns the QName
  5. namespaces
    1. getElementsByTagNameNS
      1. Not what I would expect (Chrome & Firefox)
        1. document.getElementsByTagNameNS(“http://www.xbrl.org/2008/inlineXBRL”, *);
        2. >>[ ] //Doesn’t find anything
      2. Due to namespaceURI:
    1. namespaceURI
      1. Not what I would expect (Chrome & Firefox)
        1. firstNonNumeric=document.getElementsByTagName(‘ix:nonnumeric’)[0];
        2. >> <ix:nonnumeric name=”dei:DocumentPeriodEndDate” … >
        3. firstNonNumeric.namespaceURI
        4. >>”http://www.w3.org/1999/xhtml” //That’s why getElementsByTagNameNS didn’t find anything
    2. The spec says “HTML-only [DOM implementations] do not need to support” a slew of namespace-related functions
    3. getElementsByTagNameNS is required, however.
    4. Does anyone know why?
  6. native map vs jQuery map
    1. jQuery map flattens 2-D arrays
      1. $.map([1,2], function(e) { return [e, ‘added’]; })
      2. >>[1, “added”, 2, “added”]
        1. A single array
    2. native map does not flatten them:
      1. [1,2].map(function(e) { return [e, ‘added’]; })
      2. >>[Array[2]Array[2]]
        1. An array of arrays; a 2-D array
    3. but here is an elegant flattening solution
      1. It exploits the “unpacking” ability of the .apply() function

Footnotes were

**

  1. elementWithColorGreen.style
    1. //Returns a CSSStyleDeclaration Object
    2. >>CSSStyleDeclaration {0: “color”, parentRule: null, length: 1, cssText: “color: green;”, alignmentBaseline: “”, background: “”…}
  2. elementWithColorGreen.attributes[‘style’]
    1. //Returns an Attribute Object
    2. >>style=’color:green’
  3. elementWithColorGreen.getAttribute(‘style’)
    1. //Returns a string
    2. >>”color: green;”
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: