On May 23, 8:33 pm, gentsqu...@gmail.com wrote:
Inside of <script></script>, inside of <body></body>, what
are the differences between
document.body.className="mystyle";
and
document.body.setAttribute("class", "mystyle");
? (...assuming that a CSS "mystyle" has been defined.)
First of all, it is not important _where_ the script is located: it is
only important _when_ it is called. In the particular
document.body.something=anything can be only executed after DOM Tree
being ready thus after window's load event fired. Before that point
document.body is null so such expression will result in runtime error.
This way the proper question is:
After document being successfully loaded and window's load event
fired, is there any difference between i) scripting DOM interfaces and
ii) direct element node manipulation, other words are
document.body.className="mystyle";
and
document.body.setAttribute("class", "mystyle");
equal by their functionality or not?
The answer is "yes and no". Yes, the resulting effect is often _but
not always_ the same. No, these are two technically completely
different processes where the first (scripting DOM interfaces) has to
be always used in Javascript and the second (direct element node
manipulation) should be used only in a narrow set of particular
circumstances.
The scripting DOM interfaces does exactly what the name implies and
what programmer wants: it gets/sets scriptable element properties to
affects its runtime look and/or behavior. Say
document.body.className="mystyle";
means "apply to body style rules defined in mystyle class"
It also reflects the changes in the DOM Tree, so the body's node gets
extra attribute node "class" with value "mystyle". You can check that
by querying document.body.hasAttribute("class") afterwards - except
for IE where hasAttribute is not functional until IE8 beta. But this
additional DOM Tree update happens only for properties defined in the
element's scriptable DOM interface. Say
document.body.foobar = "foobar";
adds extra property to the DOM interface which you can use later - but
it is not reflected in the DOM Tree,
document.body.hasAttribute("foobar") == false
From the other side getAttribute, setAttribute and hasAttribute
methods are intended to manipulate the element's node in the DOM Tree.
In the particular
document.body.setAttribute("class", "mystyle");
means "create attribute node "class" and set the text node value to
"mystyle". In many circumstances it still leads to DOM interface
requests afterwards so say document.body gets the style rules of
mystyle class applied. This behavior is of the same kind as say
window.location in IE allowed to be used both as a field and a method.
Other words sometimes it is easier to break the model rather than
trying to fight with legions of developers stubbornly making the same
mistake over and over again.
So to sum up the answer: always use the DOM scripting which is correct
- or use the setAttribute sidewalk which is silly but mostly
functional.
In either case there are two situations where only one of ways is
suitable.
1) For each DOM interface there is a predefined set of properties and
methods it has by default. The attribute nodes with names not listed
in the set are not reflected in the DOM interface, at least not in all
browsers. Say having an element like
<input type="text"
name="email" id="email"
filltype="mandatory">
in Firefox will create an element node with attribute nodes "type",
"name", "id", "filltype". At the same time DOM interface will reflect
only three of them ("type", "name", "id") so
document.forms['myform'].email.filltype
will be undefined because "filltype" is not in the default list. To
get the values of custom attribute one has then to use getAttribute
to query the DOM Tree:
document.forms['myform'].email.getAttribute('filltype')
will return "mandatory"
2) Intrinsic event handlers have to be set _only_ over the DOM
interface:
document.forms['myform'].onclick = myFunction;
// WRONG:
document.forms['myform'].
email.setAttribute('onclick', 'alert(this.name)');
Now you know the above means "create "onclick" attribute node and set
its text node value to "alert(this.name)". By knowing it you will not
expect anymore that setting some text node value would have anything
to do with element event handlers. And this is a correct conclusion
because say IE does exactly what it means and nothing more: it creates
the mode with text value "alert(this.name)" but no event handler for
the input element. Event handlers are for DOM interface, not for DOM
Tree.
================================================== ==============
What are the differences between
word = new String("td");
and
word = document.createTextNode("td");
?
The first creates Javascript String object with valueOf "td"
The second creates DOM Tree text node with value "td".
The actual difference depends on how and where either is being used.
