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

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

What is the point to use the setAttribute method when there is better way

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

Contents

  What is the point to use the setAttribute method when there is better way "Tony Johansson" <johansson.andersson@telia.com> - 2013-09-11 16:20 +0200
    Re: What is the point to use the setAttribute method when there is better way JJ <duh@nah.meh> - 2013-09-12 05:05 +0700
      Re: What is the point to use the setAttribute method when there is better way "Tony Johansson" <johansson.andersson@telia.com> - 2013-09-12 02:31 +0200
        Re: What is the point to use the setAttribute method when there is better way Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-09-12 11:34 +0200

#21266 — What is the point to use the setAttribute method when there is better way

Here I have two alternative setImage1 and setImage2 to add a value to the 
scr attribute and the alt attribute for the dieImg object.
I find the second solution setImage2  much easier then the first one.
So my question is if it's any point to use the first solution where you use 
the setAttribute metod
The result from these two function is the same.
function setImage1( dieImg )
         {
             var dieValue = Math.floor(1 + Math.random() * 6);
            dieImg.setAttribute( "src", "img/die" + dieValue + ".png" );

            dieImg.setAttribute( "alt",  "die image with " + dieValue + " 
spot(s)" );
         } // end function setImage

function setImage2( dieImg )
         {
             var dieValue = Math.floor(1 + Math.random() * 6);
             dieImg.src = "img/die" + dieValue + ".png"

            dieImg.alt = "die image with " + dieValue + " spot(s)" );
         } // end function setImage

//Tony 

[toc] | [next] | [standalone]

#21271

On Wed, 11 Sep 2013 16:20:23 +0200, Tony Johansson wrote:
> Here I have two alternative setImage1 and setImage2 to add a value to the 
> scr attribute and the alt attribute for the dieImg object.
> I find the second solution setImage2  much easier then the first one.
> So my question is if it's any point to use the first solution where you use 
> the setAttribute metod
> The result from these two function is the same.
> function setImage1( dieImg )
>          {
>              var dieValue = Math.floor(1 + Math.random() * 6);
>             dieImg.setAttribute( "src", "img/die" + dieValue + ".png" );
> 
>             dieImg.setAttribute( "alt",  "die image with " + dieValue + " 
> spot(s)" );
>          } // end function setImage
> 
> function setImage2( dieImg )
>          {
>              var dieValue = Math.floor(1 + Math.random() * 6);
>              dieImg.src = "img/die" + dieValue + ".png"
> 
>             dieImg.alt = "die image with " + dieValue + " spot(s)" );
>          } // end function setImage

That's because an image element is an HTMLImageElement object, and is based
on HTMLElement object. So, HTMLImageElement is inherited with all
HTMLElement object properties.

HTMLElement is inherited with all Element object properties.
Element is inherited with all Node object properties.
Node is inherited with all Object object properties.

[toc] | [prev] | [next] | [standalone]

#21274

So in this case it's no point to use setAttributes

//Tony

"JJ" <duh@nah.meh> skrev i meddelandet 
news:2o2qwle7mok$.1b5nmztiitach$.dlg@40tude.net...
> On Wed, 11 Sep 2013 16:20:23 +0200, Tony Johansson wrote:
>> Here I have two alternative setImage1 and setImage2 to add a value to the
>> scr attribute and the alt attribute for the dieImg object.
>> I find the second solution setImage2  much easier then the first one.
>> So my question is if it's any point to use the first solution where you 
>> use
>> the setAttribute metod
>> The result from these two function is the same.
>> function setImage1( dieImg )
>>          {
>>              var dieValue = Math.floor(1 + Math.random() * 6);
>>             dieImg.setAttribute( "src", "img/die" + dieValue + ".png" );
>>
>>             dieImg.setAttribute( "alt",  "die image with " + dieValue + "
>> spot(s)" );
>>          } // end function setImage
>>
>> function setImage2( dieImg )
>>          {
>>              var dieValue = Math.floor(1 + Math.random() * 6);
>>              dieImg.src = "img/die" + dieValue + ".png"
>>
>>             dieImg.alt = "die image with " + dieValue + " spot(s)" );
>>          } // end function setImage
>
> That's because an image element is an HTMLImageElement object, and is 
> based
> on HTMLElement object. So, HTMLImageElement is inherited with all
> HTMLElement object properties.
>
> HTMLElement is inherited with all Element object properties.
> Element is inherited with all Node object properties.
> Node is inherited with all Object object properties. 

[toc] | [prev] | [next] | [standalone]

#21276

Tony Johansson wrote:

> "JJ" <duh@nah.meh> skrev […]:
>> On Wed, 11 Sep 2013 16:20:23 +0200, Tony Johansson wrote:
>>> Here I have two alternative setImage1 and setImage2 to add a value to
>>> the scr attribute and the alt attribute for the dieImg object.
>>> I find the second solution setImage2  much easier then the first one.
>>> So my question is if it's any point to use the first solution where you
>>> use the setAttribute metod
>>> The result from these two function is the same.
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
>>> function setImage1( dieImg )
>>>          {
>>>              var dieValue = Math.floor(1 + Math.random() * 6);
>>>             dieImg.setAttribute( "src", "img/die" + dieValue + ".png" );
>>>
>>>             dieImg.setAttribute( "alt",  "die image with " + dieValue +
>>>             "
>>> spot(s)" );
>>>          } // end function setImage
>>>
>>> function setImage2( dieImg )
>>>          {
>>>              var dieValue = Math.floor(1 + Math.random() * 6);
>>>              dieImg.src = "img/die" + dieValue + ".png"
>>>
>>>             dieImg.alt = "die image with " + dieValue + " spot(s)" );
                                                                       ^
Syntax error – the result *cannot* have been the same -----------------'

>>>          } // end function setImage
>>
>> That's because an image element is an HTMLImageElement object, and is
>> based on HTMLElement object. So, HTMLImageElement is inherited with all
>> HTMLElement object properties.
>>
>> HTMLElement is inherited with all Element object properties.
>> Element is inherited with all Node object properties.

In a loose manner of speaking.  Actually, an “img” HTML element is 
*represented* in the document tree by an object that _implements_ the 
HTMLImageElement _interface_.  That interface inherits from the HTMLElement 
_interface_, and so forth.  As a result, objects implementing an interface 
have that interface’s _attributes_, and the _attributes_ of the interfaces 
that interface inherits from, and so forth, as properties (of the same 
name).

The “src” and “alt” attributes are defined by the HTMLImageElement 
interface, therefore all objects implementing that interface (must) have 
properties of the same name.

[It does not matter then that the HTMLImageElement interface inherits from 
the HTMLElement interface.

It matters that there is the inheritance chain HTMLImageElement 
→ HTMLElement → Element because that explains why those objects have a 
setAttribute() method, too: the setAttribute() method is provided by the 
Element interface.

It does not matter that the Element interface inherits from the Node 
interface (arbitrary nodes cannot have markup attributes, only *elements* 
can).]

>> Node is inherited with all Object object properties.

No, the Node interface either does not inherit from any other interface –

,-<http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1950641247>
|
| interface Node {
|   […]
| }

– or it does not inherit from Object(.prototype) –

,-<https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#interface-node>
| 
| interface EventTarget {
|   […]
| }
|
| interface Node : EventTarget {
|   […]
| }

– because the DOM is a *language-neutral* API and the “Object” object is 
specified in ECMAScript only.

However, DOM implementations may decide that such host objects have the 
object referred to by the initial value of Object.prototype in their 
prototype chain.  That is, they *might* inherit Object prototype properties.
*You should not rely on that.*  There are *native* objects, and there are 
*host* objects; *DOM objects are host objects.*

See also: <https://developer.mozilla.org/en-US/docs/Web/API/Node>
 
> So in this case it's no point to use setAttributes

Actually, there is seldom a need for setAttributes() with HTML documents 
because of the shorthand attributes provided by the HTML DOM APIs, for 
example (for HTML5 documents)

<http://www.w3.org/TR/2012/CR-html5-20121217/embedded-content-0.html#the-img-element> (see “DOM interface”)

and (for HTML 4.01 documentsand XHTML 1.0 documents)

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-17701901>

The HTML DOM APIs extend W3C DOM Level 2+ Core, respectively.  Consider that 
the (W3C) DOM is not only for HTML documents.  For example, in order to set 
an attribute in *core* XML documents (that is, e. g., not SVG and the like), 
you have to use the setAttribute…() methods because there is no other 
(reliable) way.

Please do not top-post.

-- 
PointedEars

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

[toc] | [prev] | [standalone]

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

csiph-web