Tải bản đầy đủ - 0 (trang)
The DOM: Junk artifacts and nodeType

The DOM: Junk artifacts and nodeType

Tải bản đầy đủ - 0trang

But this diagram is valid for only a couple of browsers. Most browsers interpret the

whitespace that's created by some carriage returns, tabs, and spaces used to format the code

as text nodes. When you look at the markup, you see 3 text nodes, the children of the title

element and of the two paragraph elements.












level: document




<br /><br />level:<br /><br />Simple document<br /><br />





There's not much to this.



Nor to this.

Firefox sees this markup with 8 additional text nodes that are nothing but whitespace

created by indenting.


These extra text nodes create noise that makes it hard for your DOM-reading code to find

the signal. In one browser, the first child of the body node might be a div. In another browser,

the first child of the body might be an empty text node.

There are a number of solutions. As one approach, the Mozilla Developer Network

suggests a workaround that's almost comically desperate but does solve the problem without

any extra effort from JavaScript. You format the markup like this.

>Simple document




>There's not much to this.

>Nor to this.




This markup takes advantage of the fact that any carriage returns, tabs, and spaces that are

enclosed in the < and the > of a tag are ignored by the browser. To the browser, < p > is the

same as

. And...





the same as


When whitespace is inside the brackets, the browser doesn't count it as a text node. So if

you "hide" all carriage returns, tabs, and spaces inside the brackets as the code above does,

there's no junk in the DOM. Any noise that would keep your JavaScript from reading the signal

is removed.

You can also clean out junk in the DOM by using a minifier program like the one at

http://www.willpeavy.com/minifier/. You will, of course, want to preserve the original, nonminified version of the file so you can revise the page in the future without going crazy.

Simple document

There's not much to this.

Nor to this.

Another approach is to format your HTML conventionally and let your JavaScript sniff

out the junk nodes. JavaScript can check a node to see what type it is—element, text, comment,

and so on. For example, this statement checks the node type of a targeted node and assigns it to

the variable nType.

var nType = targetNode.nodeType;

In the statement above, JavaScript assigns a number representing the node type to the

variable nType. If the node is an element like

, the number is 1. If it's a text node,

the number is 3.

Suppose you want to replace the text content of the second paragraph in a particular div

with the string "All his men." Here's the markup, with the text we're going to change


All the king's horses.

All the dude's crew.

All the town's orthopedists.

This is the code.


var d = document.getElementById("humpty");


2 var pCounter = 0;

3 for (var i = 0; i < d.childNodes.length; i++) {


if (d.childNodes[i].nodeType === 1 ) {






if (pCounter === 2) {


d.childNodes[i].innerHTML = "All his men.";





11 }

Here's the breakdown:

1 Assigns the div to the variable d

2 Counts the number of paragraphs

3 Goes through the children of the div looking for the next element node, i.e. Type 1,

which we assume is a paragraph

4-6 Adds 1 to the counter. We're looking for the second paragraph.

7-9 When the counter hits 2, we've reached the targeted paragraph. Change the text

Of course, if you know you might want your JavaScript to change that second paragraph,

it would be a lot easier to assign it an id, and go straight to it, like this.

document.getElementById("p2").innerHTML = "All his men.";

You can see why the getElementId method is more popular with coders than tracing the

DOM hierarchy. But there are some things you can't do without working your way through the

parent-child relationships of the DOM, as you'll learn in subsequent chapters.


Find the interactive coding exercises for this chapter at:




The DOM:

More ways to target elements

So far you've learned to use the DOM's parent-child hierarchy to target a child node of a

parent node by specifying its order in an array-like collection of children—childNodes[0],

childNodes[1], childNodes[2], and so on. But there are other ways to use the hierarchy for

targeting. To begin with, instead of writing childNodes[0], you can write firstChild. And

instead of writing, for example, childNodes[9], to target the 10th child in a 10-child

collection of children, you can write lastChild.

var targetNode = parentNode.childNodes[0];

...is the same as...

var targetNode = parentNode.firstChild;

And if there are, for example, 3 child nodes...

var targetNode = parentNode.childNodes[2];

...is the same as...

var targetNode = parentNode.lastChild;

You can also work backwards, targeting the parent node of any child node. Let's say you

have this markup. Using the DOM, how do you find the parent of the highlighted div?


Kansas City

St. Louis

You want to know the parent of the div with the id "div2". The following code assigns the

parent of the "div2" div to the variable pNode.

1 var kidNode = document.getElementById("div2");

2 var pNode = kidNode.parentNode;

You can use nextSibling and previousSibling to target the next child and the

previous child in the collection of an element's children. In the following code, the first

statement targets a div with the id "div1". The second statement targets the next node that has


the same parent as the "div1" id.

1 var firstEl = document.getElementById("div1");

2 secondEl = firstEl.nextSibling;

If there is no nextSibling or previousSibling, you get null. In the following code, the

variable nonexistentEl has a value of null, because JavaScript finds that there is no

previous node that has the same parent as firstEl.

1 var firstEl = document.getElementById("div1");

2 var nonexistentEl = firstEl.previousSibling;

Counting siblings can be tricky, because, as you know, some browsers treat whitespace

created by HTML formatting as text nodes, even though they're empty and without significance.

In the HTML example above, with two divs and three paragraphs, you might think that the

next sibling of the first paragraph is the second paragraph. But actually, in some browsers, the

first paragraph's next sibling is an empty text node. The next sibling of that node is the second


What this means is that in order to target a node with nextSibling or

previousSibling, you have to either format your HTML markup defensively as I showed you

in the last chapter, or else type-test each node to make sure it's the kind you're looking for, as I

also showed you in the last chapter.

Once again, I'll say that you're often better off assigning an id to any node you might want

to "read" or change. Then you can target the node more directly, using



Tài liệu bạn tìm kiếm đã sẵn sàng tải về

The DOM: Junk artifacts and nodeType

Tải bản đầy đủ ngay(0 tr)