Using DOM to replace media attribute in the link tag on page load

[nimblehost]

I've found no references online that address this particular challenge, so I hope the DOM experts here can point out the mistakes in my code. The original html I am trying to replace looks like this:

<link rel="stylesheet" type="text/css" media="screen" href="rw_common/themes/nhmobile/css/screenwidth/variable.css" />

I'd like to change the media attribute to "all" when the page loads so that it looks like this instead:

<link rel="stylesheet" type="text/css" media="all" href="rw_common/themes/nhmobile/css/screenwidth/variable.css" />


The code I've come up with is as follows:

<script type="text/javascript">
        var mediaType = document.getElementsByTagName("link");
        for(x=0; x<mediaType.length; x++) {
                mediaType.item(x).setAttribute("media", "all");
        }
</script>

Using firebug to check the current tree of nodes shows that the media attribute remains unchanged. I'm at a loss at how to fix this problem. Any and all help is greatly appreciated.

Best regards,
Jonathan

[David Perrell]

Jonathan:
| mediaType.item(x).setAttribute("media", "all");
                          ^^^
should be:
            mediaType.item[x].setAttribute("media", "all");

Are you changing multiple stylesheet links? Simpler to give the link element
an id and use getElementByID().

David Perrell

[Patrick Garies]

nimblehost wrote:
>  The code I've come up with is as follows:
>
>  <script type="text/javascript"> var mediaType =
>  document.getElementsByTagName("link"); for(x=0; x<mediaType.length;
>  x++) { mediaType.item(x).setAttribute("media", "all"); } </script>
>
>  Using firebug to check the current tree of nodes shows that the media
>  attribute remains unchanged. I'm at a loss at how to fix this
>  problem. Any and all help is greatly appreciated.

I just tested this in Mozilla Firefox 3.0.1 by changing a |link|
element’s |media| attribute value from |print| to |all| and found no
issues. I checked Firebug 1.2.0b6 and noticed that the DOM had been
modified as expected.

I don’t see any issues in your shown code assuming that you’re sending
your XHTML via the MIME type text/html. The problem must be elsewhere in
your code. You may want to verify that the script is executed /after/
your |link| element is created in the DOM.

Your code could use some improvements nevertheless:
* In XHTML served via an XML MIME type, the |getElementsByTagNameNS|
method should be used instead of |getElementsByTagName|.
* You should declare your variables (i.e., |var x = 0|).
* The MIME type text/javascript is deprecated in favor of the MIME types
application/javascript and application/ecmascript. Unfortunately,
neither are supported in Windows Internet Explorer up to version 7.

— Patrick Garies

[Patrick Garies]

David Perrell wrote:
>  Jonathan: |         mediaType.item(x).setAttribute("media", "all"); ^^^
>  should be: mediaType.item[x].setAttribute("media", "all");

The original code was correct. |mediaType[x]| (not |mediaType.item[x]|)
is an ECMAScript alternative.

David Perrell wrote:
>  Are you changing multiple stylesheet links? Simpler to give the link
>  element an id and use getElementByID().

That would be |getElementById| (with a lowercase “d”).

[Patrick Garies]

Patrick Garies wrote:
>  * In XHTML served via an XML MIME type, the |getElementsByTagNameNS|
>  method should be used instead of |getElementsByTagName|.

I forgot: ditto for |setAttributeNS| versus |setAttribute|.

— Patrick Garies

[David Perrell]

Patrick Garies:
| The original code was correct. |mediaType[x]| (not |mediaType.item[x]|)
| is an ECMAScript alternative.
...
| That would be |getElementById| (with a lowercase “d”).

My apologies, thanks for the correction. I had tested before I wrote that, and it initially appeared that Jonathan's code didn't work, while mediaType[x] and getElementById("linkid") without the loop did work. But when I tested thusly:

<script type="text/javascript">
window.onload=function() {
  var mediaType = document.getElementsByTagName("link");
  for(var x=0; x<mediaType.length; x++) {
    mediaType.item(x).setAttribute("media", "all");
    alert(mediaType.item(x).getAttribute("media"));
  }
}
</script>

media type was changed in FF 3.01, Opera 9.51, and IE 5.01.

| * The MIME type text/javascript is deprecated in favor of the MIME types
| application/javascript and application/ecmascript. Unfortunately,
| neither are supported in Windows Internet Explorer up to version 7.

I'm still seeing a lot of pre-XP Windows with IE < 7 in my web server logs. It'll be a while before implementation of that change is a good idea.

[nimblehost]

Thanks for your help Patrick - I'm a complete newbie when it comes to javascript and DOM, but you and David have helped get me on the right track here. I've gotten this to work - the problem was in my implementation. Thanks again, both of you.

Jonathan

Patrick Garies wrote:

nimblehost wrote:
>  The code I've come up with is as follows:
>
>  <script type="text/javascript"> var mediaType =
>  document.getElementsByTagName("link"); for(x=0; x<mediaType.length;
>  x++) { mediaType.item(x).setAttribute("media", "all"); } </script>
>
>  Using firebug to check the current tree of nodes shows that the media
>  attribute remains unchanged. I'm at a loss at how to fix this
>  problem. Any and all help is greatly appreciated.

I just tested this in Mozilla Firefox 3.0.1 by changing a |link|
element’s |media| attribute value from |print| to |all| and found no
issues. I checked Firebug 1.2.0b6 and noticed that the DOM had been
modified as expected.

I don’t see any issues in your shown code assuming that you’re sending
your XHTML via the MIME type text/html. The problem must be elsewhere in
your code. You may want to verify that the script is executed /after/
your |link| element is created in the DOM.

Your code could use some improvements nevertheless:
* In XHTML served via an XML MIME type, the |getElementsByTagNameNS|
method should be used instead of |getElementsByTagName|.
* You should declare your variables (i.e., |var x = 0|).
* The MIME type text/javascript is deprecated in favor of the MIME types
application/javascript and application/ecmascript. Unfortunately,
neither are supported in Windows Internet Explorer up to version 7.

— Patrick Garies

[Patrick Garies]

David Perrell wrote:
>  I'm still seeing a lot of pre-XP Windows with IE < 7 in my web server
>  logs. It'll be a while before implementation of that change is a
>  good idea.

I said “up to version 7”, so that includes version 7 itself too. The way
that I implement it is by use of conditional comments:

|<!--[if !IE]>-->
<script type="application/ecmascript">
    // do something
</script>
<!--<![endif]-->
<!--[if IE]>
    <script type="text/ecmascript">
       // do something
    </script>
<![endif]-->|

Alternatively, the following works if you want to combine embedded
scripts (with tracks for WIE and non‐WIE browsers):

|<!--[if !IE]>-->
<script type="application/ecmascript">
    // <!--<![endif]--> <script type="text/ecmascript">
    // do something
</script>|

Admittedly, this is extra work for something that seems to be mostly
cosmetic.

Hopefully, WIE8 will support the two new MIME types so that the
messiness above can eventually be done away with. (I’m not willing to
test pre‐release software on this computer to find out if this issue is
fixed in WIE 8 Beta 1 though.)

— Patrick Garies

[David Perrell]

Patrick Garies wrote:
| I said “up to version 7”, so that includes version 7 itself too. The way
| that I implement it is by use of conditional comments:

IE > 6 won't run on pre-XP Windows and there are clearly many who feel no need to upgrade their OpSys or change its default UA. Meanwhile, there are millions of web pages with script typed as "text/javascript". UA acceptance of "text/javascript" won't be going away any time soon. IMHO, conditional mime types are a bit premature.

If you're presenting plain HTML then it should be safe to use the <script> tag without a type declaration. Is there a browser for which javascript isn't the default script language?

HTML 4.01 spec uses "text/javascript" as a content type example. However obsolete, "text/javascript" is currently the most-supported content type for javascript and was probably a wise choice.

| Hopefully, WIE8 will support the two new MIME types so that the
| messiness above can eventually be done away with.

I read an IE8 blog complaint: IE8b1 doesn't support the new mime types. Perhaps that will change before final release.

David Perrell