JavaScript Bible, Gold Edition part 189 pot

document.write“How is my brother document?”} else { document.write“Hello, and thank you for stopping by.” } scripts NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example You can experim

Trang 1

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Example

This demonstration requires two documents (and for IE, you’ll also need to access the documents from a Web server) The first document, in Listing 18-11, simply con-tains one line of text as a link to the second document In the second document (Listing 18-12), a script verifies the document from which the user came via a link If the script knows about that link, it displays a message relevant to the experience the user had at the first document Also try opening Listing 18-12 in a new browser window from the Open File command in the File menu to see how the script won’t recognize the referrer

Listing 18-11: A Source Document

<HTML>

<HEAD>

<TITLE>document.referrer Property 1</TITLE>

</HEAD>

<BODY>

<H1><A HREF=”lst18-12.htm”>Visit my sister document</A>

</BODY>

</HTML>

Listing 18-12: Checking document.referrer

<HTML>

<HEAD>

<TITLE>document.referrer Property 2</TITLE>

</HEAD>

if(document.referrer.length > 0 && document.referrer.indexOf(“18-11.htm”) != -1){

document.referrer

Trang 2

document.write(“How is my brother document?”)

} else {

document.write(“Hello, and thank you for stopping by.”)

}

</SCRIPT>

</H1></BODY>

</HTML>

scripts

Example

You can experiment with the document.scriptsarray in The Evaluator (Chapter

13) For example, you can see that only one SCRIPT element object is in The

Evaluator page if you enter the following statement into the top text field:

document.scripts.length

If you want to view all of the properties of that lone SCRIPT element object, enter

the following statement into the bottom text field:

document.scripts[0]

Among the properties are both innerTextand text If you assign an empty string

to either property, the scripts are wiped out from the object model, but not from

the browser The scripts disappear because after the scripts loaded, they were

cached outside of the object model Therefore, if you enter the following statement

into the top field:

document.scripts[0].text = “”

the script contents are gone from the object model, yet subsequent clicks of the

Evaluate and List Properties buttons (which invoke functions of the SCRIPT element

object) still work

document.scripts

Trang 3

Example

See Listings 15-30 and 15-39 in Chapter 15 to see the document.selection prop-erty in action for script-controlled copying and pasting (IE/Windows only)

URL

See location

vlinkColor

See alinkColor

width

See height

Methods

captureEvents(eventTypeList)

Example

See the example for the NN4 window.captureEvents()method in Chapter 16 (Listing 16-21) to see how to capture events on their way to other objects In that example, you can substitute the documentreference for the windowreference to see how the document version of the method works just like the window version If you understand the mechanism for windows, you understand it for documents The same is true for the other NN4 event methods

document.captureEvents()

Trang 4

Example

Before you experiment with the document.close()method, be sure you

under-stand the document.write()method described later in this chapter After that,

make a separate set of the three documents for that method’s example (Listings

18-16 through 18-18 in a different directory or folder) In the takePulse()function

listing, comment out the document.close()statement, as shown here:

msg += “<P>Make it a great day!</BODY></HTML>”

parent.frames[1].document.write(msg)

//parent.frames[1].document.close()

Now try the pages on your browser You see that each click of the upper button

appends text to the bottom frame, without first removing the previous text The

reason is that the previous layout stream was never closed The document thinks

that you’re still writing to it Also, without properly closing the stream, the last line

of text may not appear in the most recently written batch

createAttribute(“attributeName”)

Example

Unfortunately, the setAttributeNode()method in NN6 does not yet work with

attributes generated by the createAttribute()method This will be fixed

eventu-ally, and you can experiment adding attributes to sample elements in The Evaluator

In the meantime, you can still create an attribute and inspect its properties Enter

the following text into the top text box:

a = document.createAttribute(“author”)

Now enter ainto the bottom text box to inspect the properties of an Attrobject

document.createAttribute()

Trang 5

Example

Chapter 15 contains numerous examples of the document.createElement()

method in concert with methods that add or replace content to a document See Listings 15-10, 15-21, 15-22,15 -28, 15-29, and 15-31

createEventObject([eventObject])

Example

See the discussion of the fireEvent()method in Chapter 15 for an example of the sequence to follow when creating an event to fire on an element

createStyleSheet([“URL”[, index]])

Example

Listing 18-13 demonstrates adding an internal and external style sheet to a docu-ment For the internal addition, the addStyle1()function invokes document createStyleSheet()and adds a rule governing the P elements of the page (not available for IE5/Mac) In the addStyle2()function, an external file is loaded That file contains the following two style rules:

H2 {font-size:20pt; color:blue}

P {color:blue}

document.createStyleSheet()

Trang 6

Notice that by specifying a position of zero for the imported style sheet, the

addi-tion of the internal style sheet always comes afterward in styleSheetobject

sequence Thus, except when you deploy only the external style sheet, the red text

color of the P elements override the blue color of the external style sheet If you

remove the second parameter of the createStyleSheet()method in

addStyle2(), the external style sheet is appended to the end of the list If it is the

last style sheet to be added, the blue color prevails Repeatedly clicking the buttons

in this example continues to add the style sheets to the document

Listing 18-13: Using document.createStyleSheet()

<HTML>

<HEAD>

<TITLE>document.createStyleSheet() Method</TITLE>

function addStyle1() {

var newStyle = document.createStyleSheet()

newStyle.addRule(“P”, “font-size:16pt; color:red”)

}

function addStyle2() {

var newStyle = document.createStyleSheet(“lst18-13.css”,0)

}

</SCRIPT>

</HEAD>

<BODY>

<H1>document.createStyleSheet() Method</H1>

<HR>

<FORM>

</FORM>

<H2>Section 1</H2>

<P>Lorem ipsum dolor sit amet, consectetaur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Ut enim adminim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.</P>

<H2>Section 2</H2>

<P>Duis aute irure dolor in reprehenderit involuptate velit esse

cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat

cupidatat non proident, sunt in culpa qui officia deseruntmollit

anim id est laborum.</P>

</BODY>

</HTML>

document.createStyleSheet()

Trang 7

Example

While Chapter 14 and 15 (Listing 15-21, for instance) provide numerous examples of the createTextNode()method at work, using The Evaluator (Chapter 13) is instructive to see just what the method generates in IE5+ and NN6 You can use one

of the built-in global variables of The Evaluator to hold a reference to a newly gener-ated text node by entering the following statement into the top text field:

a = document.createTextNode(“Hello”)

The Results box shows that an object was created Now, look at the properties of the object by typing ainto the bottom text field The precise listings of properties varies between IE5+ and NN6, but the W3C DOM properties that they share in com-mon indicate that the object is a node type 3 with a node name of #text No par-ents, children, or siblings exist yet because the object created here is not part of the document hierarchy tree until it is explicitly added to the document

To see how insertion works, enter the following statement into the top text field to append the text node to the myPparagraph:

document.getElementById(“myP”).appendChild(a)

The word “Hello” appears at the end of the simple paragraph lower on the page Now you can modify the text of that node either via the reference from the point of view of the containing P element or via the global variable reference for the newly created node:

document.getElementById(“myP”).lastChild.nodeValue = “Howdy”

or

a.nodeValue = “Howdy”

document.createTextNode()

Trang 8

elementFromPoint(x, y)

Example

Listing 18-14 is a document that contains many different types of elements, each of

which has an ID attribute assigned to it The onMouseOverevent handler for the

documentobject invokes a function that finds out which element the cursor is over

when the event fires Notice that the event coordinates are event.clientXand

event.clientY, which use the same coordinate plane as the page for their point of

reference As you roll the mouse over every element, its ID appears on the page

Some elements, such as BR and TR, occupy no space in the document, so you

can-not get their IDs to appear On a typical browser screen size, a positioned element

rests atop one of the paragraph elements so that you can see how the

elementFromPoint()method handles overlapping elements If you scroll the page,

the coordinates for the event and the page’s elements stay in sync

Listing 18-14: Using the elementFromPoint() Method

<HTML>

<HEAD>

<TITLE>document.elementFromPoint() Method</TITLE>

function showElemUnderneath() {

var elem = document.elementFromPoint(event.clientX, event.clientY)

document.all.mySpan.innerText = elem.id

}

document.onmouseover = showElemUnderneath

</SCRIPT>

</HEAD>

<H1 ID=”header”>document.elementFromPoint() Method</H1>

<P ID=”instructions”>Roll the mouse around the page The coordinates

of the mouse pointer are currently atop an element<BR ID=”myBR”>whose ID

is:”<SPAN ID=”mySpan” STYLE=”font-weight:bold”></SPAN>”.</P>

</FORM>

Continued

document.elementFromPoint()

Trang 9

Listing 18-14 (continued)

</TR>

</TR>

</TABLE>

<H2 ID=”sec1”>Section 1</H2>

<P ID=”p1”>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</P>

<H2 ID=”sec2”>Section 2</H2>

<P ID=”p2”>Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur Excepteur sint occaecat

cupidatat non proident, sunt in culpa qui officia deseruntmollit anim id est laborum.</P>

Here is a positioned element.</DIV>

</BODY>

</HTML>

execCommand(“commandName”[, UIFlag]

Example

You can find many examples of the execCommand()method for the TextRange

object in Chapter 19 But you can try out the document-specific commands in The Evaluator (Chapter 13) if you like Try each of the following statements in the top text box and click the Evaluate button:

document.execCommand()

Trang 10

document.execCommand(“SelectAll”)

document.execCommand(“Unselect”)

All methods return truein the Results box

Because any way you can evaluate a statement in The Evaluator forces a body

selection to become deselected before the evaluation takes place, you can’t

experi-ment this way with the selection-oriented commands

getElementById(“elementID”)

Example

You can find many examples of this method in use throughout this book, but you

can take a closer look at how it works by experimenting in The Evaluator

(Chapter 13) A number of elements in The Evaluator have IDs assigned to them, so

that you can use the method to inspect the objects and their properties Enter the

following statements into both the top and bottom text fields of The Evaluator

Results from the top field are references to the objects; results from the bottom

field are lists of properties for the particular object

document.getElementById(“myP”)

document.getElementById(“myEM”)

document.getElementById(“myTitle”)

document.getElementById(“myScript”)

As you see in the Results field, NN6 is more explicit about the type of HTML

ele-ment object being referenced in the top text field than IE5 But both browsers are

pointing to the same objects just the same

getElementsByName(“elementName”)

document.getElementsByName()

Định dạng
Số trang	10
Dung lượng	89,47 KB