How can I apply some style to JavaScript's "node" object

Question

Imagine that I have a couple of statements as following:

var n1 = oDiv.firstChild;
var n2 = oDiv.lastChild.previousSibling.firstChild; //know this crazy, but for knowledge sake

How can I apply various styles like the following (which usually works only for "element" types and not "node" types):

//does not work
n1.style.borderWidth = "1px";
n1.style.borderColor = "#336699";
n2.style.borderStyle = "solid";

Also, is there any way to typecast "node" to "element" in JavaScript?

update:

The code I am trying to accomplish above is here http://jsfiddle.net/anthachetta/4mXrd/

By any chance, if I can convert "node" object to "element" object in JavaScript.. — user203687
– user203687, Commented Nov 28, 2012 at 16:09
No, you can't, and it has nothing at all to do with JavaScript. You're working with native browser objects, and what they do is essentially cast in stone. — Pointy
– Pointy, Commented Nov 28, 2012 at 16:09
like so Object.style.background="color image repeat attachment position" make sure your object is really being loaded — mas-designs
– mas-designs, Commented Nov 28, 2012 at 16:11

slebetman · Accepted Answer · 2012-11-28 17:37:10Z

3

The DOM works exactly the same way as HTML does. That makes sense since the DOM was designed to model HTML as objects. So, what do you do if you want to make the following bold:

Hello World

From your code, what you're trying to do is something like this:

style=font-weight:bold Hello World

Obviously that wouldn't work because it's not valid HTML. What you'd normally do is this:

<span style='font-weight:bold;'>Hello World</span>

So you need to do the same in the DOM:

// Assume you have a div "div" and the first child
// is the text node "Hello World"

var hello_world = div.firstChild;

// Now, you want to make Hello World bold.
// So you need to create a span:

var span = document.createElement('span');
span.style['font-weight'] = 'bold';

// Now wrap hello_world in the span:

span.appendChild(div.removeChild(hello_world));

The above is actual working DOM code that does what you want. But beware:

Standards compliant browsers also count whitespace as nodes.
IE doesn't count whitespace as nodes.

For example, if your HTML looks like this:

<div>
    <span>Hi</span>
</div>

the standard says your DOM must look like this:

div +
    |---- text node (whitespace)
    '---- span +
               '---- text node (Hi)

but IE does what most people probably expect:

div +
    '---- span +
               '---- text node (Hi)

This means that you can't blindly trust node.firstChild without checking to see if it's what you expect.

edited Nov 28, 2012 at 17:37

answered Nov 28, 2012 at 16:47

slebetman

115k19 gold badges148 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user203687 Over a year ago

Thanks for the reply. That really made sense. Can you level my question to 0 (as it is -1) now. I hope my question is still valid.

gen_Eric · Accepted Answer · 2012-11-28 16:49:59Z

1

There are a few problems.

What is with the lastChild.previousSibling.firstChild mess? All that's doing is confusing you.

That mess of properties is returning you a text node, not an element.

lastChild gives you "a line", previousSibling gets the <i> tag, then firstChild returns "just". You are trying to apply a style to a text node, which you can't do, you need to style an element.

You are trying to apply the style to the nodeValue. That's a string. You can use parentNode to get to the <i> tag from the text node.

oDiv.lastChild.previousSibling.firstChild.parentNode.style.color = "#FF0000";

DEMO: http://jsfiddle.net/NTICompass/4mXrd/2/

answered Nov 28, 2012 at 16:49

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Collectives™ on Stack Overflow

How can I apply some style to JavaScript's "node" object

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related