JavaScript Bible, Gold Edition part 172 doc

Next, create a text node and append it as the last child of the myPelement: a = document.createTextNode“This means you!” document.getElementById“myP”.appendChilda With the new text now r

Trang 1

Use The Evaluator to experiment with the normalize()method in NN6 The follow-ing sequence adds a text node adjacent to one in the myPelement A subsequent invocation of the normalize()method removes the division between the adjacent text nodes

Begin by confirming the number of child nodes of the myPelement:

document.getElementById(“myP”).childNodes.length

Three nodes initially inhabit the element Next, create a text node and append it as the last child of the myPelement:

a = document.createTextNode(“This means you!”) document.getElementById(“myP”).appendChild(a)

With the new text now rendered on the page, the number of child nodes increases

to four:

document.getElementById(“myP”).childNodes.length

You can see that the last child node of myPis the text node you just created:

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

But by invoking normalize()on myP, all adjacent text nodes are accumulated into single nodes:

document.getElementById(“myP”).normalize()

You can now see that the myPelement is back to three child nodes, and the last child is a combination of the two previously distinct, but adjacent, text nodes:

document.getElementById(“myP”).childNodes.length document.getElementById(“myP”).lastChild.nodeValue

releaseCapture()

setCapture(containerBoolean)

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

elementObject.releaseCapture()

Trang 2

Listing 15-30 demonstrates the usage of setCapture()and releaseCapture()in

a “quick-and-dirty” context menu for IE5+/Windows The job of the context menu is

to present a list of numbering styles for the ordered list of items on the page

Whenever the user brings up the context menu atop the OL element, the custom

context menu appears Event capture is turned on in the process to prevent mouse

actions elsewhere on the page from interrupting the context menu choice Even a

click on the link set up as the title of the list is inhibited while the context menu is

visible A click anywhere outside of the context menu hides the menu Clicking a

choice in the menu changes the listStyleTypeproperty of the OL object and

hides the menu Whenever the context menu is hidden, event capture is turned off

so that clicking on the page (such as the link) works as normal

For this design, onClick, onMouseOver, and onMouseOutevent handlers are

assigned to the DIV element that contains the context menu To trigger the display

of the context menu, the OL element has an onContextMenuevent handler This

handler invokes the showContextMenu()function In this function, event capture is

assigned to the context menu DIV object The DIV is also positioned at the location

of the click before it is set to be visible To prevent the system’s regular context

menu from also appearing, the eventobject’s returnValueproperty is set to

false

Now that all mouse events on the page go through the contextMenuDIV object,

let’s examine what happens with different kinds of events triggered by user action

As the user rolls the mouse, a flood of mouseoverand mouseoutevents fire The

event handlers assigned to the DIV manage these events But notice that the two

event handlers, highlight()and unhighlight(), perform action only when the

srcElementproperty of the event is one of the menu items in the DIV Because the

page has no other onMouseOveror onMouseOutevent handlers defined for

ele-ments up the containment hierarchy, you do not have to cancel event bubbling for

these events

When a user clicks the mouse button, different things happen depending on

whether event capture is enabled Without event capture, the clickevent bubbles

up from wherever it occurred to the onClickevent handler in the BODY element

(An alert dialog box displays to let you know when the event reaches the BODY.)

But with event capture turned on (the context menu is showing), the

handleClick()event handler takes over to apply the desired choice whenever the

click is atop one of the context menu items For all clickevents handled by this

function, the context menu is hidden and the clickevent is canceled from

bub-bling up any higher (no alert dialog box appears) This takes place whether the

user makes a choice in the context menu or clicks anywhere else on the page In the

latter case, all you need is for the context menu to go away like the real context

menu does For added insurance, the onLoseCaptureevent handler hides the

con-text menu when a user performs any of the actions just listed that cancel capture

Trang 3

Listing 15-30: Using setCapture() and releaseCapture()

<HTML>

#contextMenu {position:absolute; background-color:#cfcfcf;

border-style:solid; border-width:1px;

border-color:#EFEFEF #505050 #505050 #EFEFEF;

padding:3px 10px; font-size:8pt; font-family:Arial, Helvetica; line-height:150%; visibility:hidden}

.menuItem {color:black}

.menuItemOn {color:white}

OL {list-style-position:inside; font-weight:bold; cursor:nw-resize}

LI {font-weight:normal}

</STYLE>

function showContextMenu() { contextMenu.setCapture() contextMenu.style.pixelTop = event.clientY + document.body.scrollTop contextMenu.style.pixelLeft = event.clientX + document.body.scrollLeft contextMenu.style.visibility = “visible”

event.returnValue = false }

function revert() { document.releaseCapture() hideMenu()

} function hideMenu() { contextMenu.style.visibility = “hidden”

} function handleClick() { var elem = window.event.srcElement

if (elem.id.indexOf(“menuItem”) == 0) { shapesList.style.listStyleType = elem.LISTTYPE }

revert() event.cancelBubble = true }

function highlight() { var elem = event.srcElement

if (elem.className == “menuItem”) { elem.className = “menuItemOn”

} }

Trang 4

function unhighlight() {

var elem = event.srcElement

if (elem.className == “menuItemOn”) {

elem.className = “menuItem”

}

</SCRIPT>

<A HREF=”javascript:alert(‘A sample link.’)”>Three-Dimensional Shapes</A>

<LI>Circular Cylinder</LI>

<LI>Rectangular Prism</LI>

<LI>Regular Right Pyramid</LI>

<LI>Right Circular Cone</LI>

<LI>Sphere</LI>

</OL>

<DIV ID=”contextMenu” onLoseCapture=”hideMenu()” onClick=”handleClick()”

onMouseOver=”highlight()” onMouseOut=”unhighlight()”>

<SPAN ID=”menuItem1” CLASS=”menuItem”

LISTTYPE=”upper-alpha”>A,B,C, </SPAN><BR>

LISTTYPE=”lower-alpha”>a,b,c, </SPAN><BR>

LISTTYPE=”upper-roman”>I,II,III, </SPAN><BR>

LISTTYPE=”lower-roman”>i,ii,iii, </SPAN><BR>

</DIV>

</BODY>

</HTML>

removeAttribute(“attributeName”[,

caseSensitivity] )

Example

Use The Evaluator (Chapter 13) to experiment with the removeAttribute()

method for the elements in the page See the examples for the setAttribute()

elementObject.removeAttribute()

Trang 5

method later in this chapter, and enter the corresponding removeAttribute()

statements in the top text box Interlace statements using getAttribute()to ver-ify the presence or absence of each attribute

removeAttributeNode(attributeNode) setAttributeNode(attributeNode)

Example

Use The Evaluator (Chapter 13) to experiment with the setAttributeNode()and

removeAttributeNode()methods for the P element in the page The task is to cre-ate and add a STYLEattribute to the P element Begin by creating a new attribute and storing it temporarily in the global variable a:

a = document.createAttribute(“style”)

Assign a value to the attributeobject:

a.nodeValue = “color:red”

Now insert the new attribute into the P element:

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

The paragraph changes color in response to the newly added attribute

Due to the NN6 bug that won’t allow the method to return a reference to the newly inserted attribute node, you can artificially obtain such a reference:

b = document.getElementById(“myP”).getAttributeNode(“style”)

Finally, use the reference to the newly added attribute to remove it from the element:

document.getElementById(“myP”).removeAttribute(b)

Upon removing the attribute, the paragraph resumes its initial color See the exam-ple for the setAttribute()method later in this chapter to discover how you can perform this same kind of operation with setAttribute()

elementObject.removeAttributeNode()

Trang 6

Example

See Listings 15-19a and 15-19b earlier in this chapter for examples of how to use

addBehavior()and removeBehavior()

removeChild(nodeObject)

Example

You can see an example of removeChild()as part of Listing 15-21 earlier in this

chapter

removeEventListener()

See addEventListener()

removeExpression(“propertyName”)

Example

You can experiment with all three expression methods in The Evaluator (Chapter 13)

The following sequence adds an expression to a style sheet property of the myP

ele-ment on the page and then removes it

elementObject.removeExpression()

Trang 7

To begin, enter the number 24in the bottom one-line text box in The Evaluator (but don’t press Enter or click the List Properties button) This is the value used in the expression to govern the fontSizeproperty of the myPobject Next, assign an expression to the myPobject’s styleobject by entering the following statement into the topmost text box:

myP.style.setExpression(“fontSize”,”document.forms[0].inspector.value”,”JScript”)

You can now enter different font sizes into the lower text box and have the values immediately applied to the fontSizeproperty (Keyboard events in the text box automatically trigger the recalculation.) The default unit is px, but you can also append other units (such as pt) to the value in the text field to see how different measurement units influence the same numeric value

Before proceeding to the next step, enter a value other than 16 (the default

fontSizevalue) Finally, enter the following statement in the topmost text box to disconnect the expression from the property:

myP.style.removeExpression(“fontSize”)

Notice that although you can no longer adjust the font size from the lower text box, the most recent value assigned to it still sticks to the element To prove it, enter the following statement in the topmost text box to see the current value:

myP.style.fontSize

removeNode(removeChildrenFlag)

Example

Examine Listing 15-21 for the appendChild()method to understand the difference between removeChild()and removeNode() In the restore()function, you can replace this statement

mainObj.removeChild(oneChild)

in IE5+ with

oneChild.removeNode(true)

elementObject.removeNode()

Trang 8

The difference is subtle, but it is important to understand See Listing 15-31 later in

this chapter for another example of the removeNode()method

replaceAdjacentText(“location”, “text”)

Example

Use The Evaluator (Chapter 13) to experiment with the replaceAdjacentText()

method Enter each of the following statements into the top text box and watch the

results in the myPelement (and its nested myEMelement) below the solid rule:

document.all.myEM.replaceAdjacentText(“afterBegin”, “twenty”)

Notice that the myEMelement’s new text picks up the behavior of the element In the

meantime, the replaced text (all) is returned by the method and displayed in the

Results box

document.all.myEM.replaceAdjacentText(“beforeBegin”, “We need “)

All characters of the text fragment, including spaces, are replaced Therefore, you

may need to supply a trailing space, as shown here, if the fragment you replace has

a space

document.all.myP.replaceAdjacentText(“beforeEnd”, “ good people.”)

This is another way to replace the text fragment following the myEMelement, but it

is also relative to the surrounding myPelement If you now attempt to replace text

after the end of the myPblock-level element,

document.all.myP.replaceAdjacentText(“afterEnd”, “Hooray!”)

the text fragment is inserted after the end of the myPelement’s tag set The

frag-ment is just kind of floating in the docufrag-ment object model as an unlabeled text

node

elementObject.replaceAdjacentText()

Trang 9

replaceChild(newNodeObject, oldNodeObject)

Example

You can see an example of replaceChild()as part of Listing 15-21 earlier in this chapter

replaceNode(“newNodeObject”)

Example

Listing 15-31 demonstrates three node-related methods: removeNode(),

replaceNode(), and swapNode() These methods work in IE5+ only

The page rendered from Listing 15-31 begins with a UL type list of four items Four buttons control various aspects of the node structure of this list element The first button invokes the replace()function, which changes the UL type to OL To do this, the function must temporarily tuck away all child nodes of the original UL element so that they can be added back into the new OL element At the same time, the old UL node is stored in a global variable (oldNode) for restoration in another function

To replace the UL node with an OL, the replace()function creates a new, empty

OL element and assigns the myOLID to it Next, the children (LI elements) are stored

en masse as an array in the variable innards The child nodes are then inserted into the empty OL element, using the insertBefore()method Notice that as each child element from the innardsarray is inserted into the OL element, the child ele-ment is removed from the innardsarray That’s why the loop to insert the child nodes is a whileloop that constantly inserts the first item of the innardsarray to the new element Finally, the replaceNode()method puts the new node in the old node’s place, while the old node (just the UL element) is stored in oldNode The restore()function operates in the inverse direction of the replace() func-tion The same juggling of nested child nodes is required

elementObject.replaceNode()

Trang 10

The third button invokes the swap()function, whose script exchanges the first and

last nodes The swapNode()method, like the others in this discussion, operates

from the point of view of the node Therefore, the method is attached to one of the

swapped nodes, while the other node is specified as a parameter Because of the

nature of the OL element, the number sequence remains fixed but the text of the LI

node swaps

To demonstrate the removeNode()method, the fourth function removes the last

child node of the list Each call to removeNode()passes the trueparameter to

guarantee that the text nodes nested inside each LI node are also removed

Experiment with this method by setting the parameter to false(the default)

Notice how the parent–child relationship changes when you remove the LI node

Listing 15-31: Using Node-Related Methods

<HTML>

<HEAD>

<TITLE>removeNode(), replaceNode(), and swapNode() Methods</TITLE>

// store original node between changes

var oldNode

// replace UL node with OL

function replace() {

if (document.all.myUL) {

var newNode = document.createElement(“OL”)

newNode.id = “myOL”

var innards = document.all.myUL.children

while (innards.length > 0) {

newNode.insertBefore(innards[0])

}

oldNode = document.all.myUL.replaceNode(newNode)

}

// restore OL to UL

function restore() {

if (document.all.myOL && oldNode) {

var innards = document.all.myOL.children

while (innards.length > 0) {

oldNode.insertBefore(innards[0])

}

document.all.myOL.replaceNode(oldNode)

}

Continued

elementObject.replaceNode()

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