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


Groups > comp.lang.javascript > #22665

Re: Reading outerHTML

Message-ID <1586396.c5DW0iILPE@PointedEars.de> (permalink)
From Thomas 'PointedEars' Lahn <PointedEars@web.de>
Organization PointedEars Software (PES)
Date 2014-01-18 12:06 +0100
Subject Re: Reading outerHTML
Newsgroups comp.lang.javascript
References <4ZydnTNcnrnRy0XPnZ2dnUVZ_h6dnZ2d@westnet.com.au> <55605684.RQav8vfDIM@PointedEars.de> <52d99eb8$0$6552$9b4e6d93@newsspool4.arcor-online.net> <1566847.28b1k6Xl7B@PointedEars.de> <52d9d28c$0$6552$9b4e6d93@newsspool4.arcor-online.net>

Show all headers | View raw


Christoph Michael Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Christoph Michael Becker wrote:
>>> Thomas 'PointedEars' Lahn wrote:
>>>> 5. Avoid the “outerHTML” property.
>>>
>>> Is there any particular reason besides outerHTML being non standardized
>>> (yet)?
>> 
>> Yes.
> 
> What is this reason?

The same reason why using “innerHTML” should be avoided: In many cases it is 
unnecessary and less efficient to work with a serialization of the document 
(sub)tree instead of with the document (sub)tree itself.

In this case,

  /*
   * You can pass the property values as arguments instead,
   * but I will probably never remember the order correctly
   */
  var option = new Option();
  option.text = "foo";
  option.value = "bar";

  var options = select.options;
  options[options.length] = option;

would have been appropriate [HTMLSelectElement::add() and 
HTMLOptionsCollection::add() are not backwards-compatible].

<http://www.w3.org/TR/2013/CR-html5-20130806/forms.html#the-select-element>

Whereas, assuming the target “select” element had an ID or name of "baz", 
the reference value of “select” could have been retrieved via one of

  - el.form.elements["baz"];
  - document.evaluate(
      '../*[translate(local-name(), "SELCT", "selct") = "select"'
        + ' and (@id = "baz" or @name = "baz")]',
      el, null, …);
  - document.getElementById("baz");
  - el.parentNode.getElementsByTagName("select")[index];
  - document.getElementsByName("baz")[index].

Preferably in that order.

<http://www.w3.org/TR/2013/CR-html5-20130806/forms.html#dom-fae-form>
<http://www.w3.org/TR/2004/NOTE-DOM-Level-3-XPath-20040226/xpath.html#XPathEvaluator-evaluate>
<http://dom.spec.whatwg.org/#dom-nonelementparentnode-getelementbyid>
<http://dom.spec.whatwg.org/#dom-element-getelementsbytagname>
<http://www.w3.org/TR/2013/CR-html5-20130806/dom.html#dom-document-getelementsbyname>

>>> Do the restrictions mentioned in the FAQ section "How do I
>>> modify the content of the current page?"[1] apply to outerHTML as well?
>> 
>> Probably.
>> 
>>>  And do they still hold for recent IE versions wrt. innerHTML?
>> 
>> I do not know.  Which IE versions exactly do you consider “recent”?
> 
> At least IE 11, but even IE 9 (or even earlier?) might have brought
> improvements.  (I'm quite deliberately omitting any specific JScript
> version numbers here.)
> 
> FWIW, I quickly hacked together a simple test and put it on
> <http://cmb.bplaced.net/innerhtml1.html>.  It seems that IE 8 still has
> the mentioned issues regarding what is tested:
> 
>   * Replaces consecutive whitespace characters with a single space.
>   * Changes (attribute values and) order of appearance.
>   * Removes quotations around attribute values.

ACK.  Also, the FAQ entry is incomplete because it does not discuss in more 
detail the detrimental effects of assigning a value to the “innerHTML” 
property of certain element objects.
 
> However, IE 11 passes these tests, and according to the emulation mode
> even IE 9 does so.  Quite interestingly, Firefox 26.0 changes the order
> of appearance of the table element's attributes (while Chrome 32.0 and
> Opera 12.16 do not).

Yet another reason why working with serializations is error-prone.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

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


Thread

Reading outerHTML Andrew Poulos <ap_prog@hotmail.com> - 2014-01-17 08:58 +1100
  Re: Reading outerHTML "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2014-01-17 08:55 +0200
    Re: Reading outerHTML "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-17 11:20 +0100
      Re: Reading outerHTML Ben Bacarisse <ben.usenet@bsb.me.uk> - 2014-01-17 12:58 +0000
        Re: Reading outerHTML "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-17 15:44 +0100
      Re: Reading outerHTML Christoph Michael Becker <cmbecker69@arcor.de> - 2014-01-17 22:26 +0100
  Re: Reading outerHTML Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-17 16:27 +0100
    Re: Reading outerHTML Christoph Michael Becker <cmbecker69@arcor.de> - 2014-01-17 22:21 +0100
      Re: Reading outerHTML Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-17 23:32 +0100
        Re: Reading outerHTML Christoph Michael Becker <cmbecker69@arcor.de> - 2014-01-18 02:02 +0100
          Re: Reading outerHTML "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2014-01-18 11:55 +0100
          Re: Reading outerHTML Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-01-18 12:06 +0100

csiph-web