JavaScript Bible, Gold Edition part 27 pot

Properties Methods Event HandlerssourceIndex style tabIndex tagName tagUrn title uniqueID Syntax To access element properties or methods, use this: IE4+ [document.all.]objectID.property

Trang 1

Table 15-1 (continued)

offsetParent setAttributeNode()

parentNode parentTextEdit prefix

previousSibling readyState recordNumber runtimeStyle scopeName scrollHeight scrollLeft scrollTop scrollWidth

elementObject

Trang 2

Properties Methods Event Handlers

sourceIndex

style

tabIndex

tagName

tagUrn

title

uniqueID

Syntax

To access element properties or methods, use this:

(IE4+) [document.all.]objectID.property | method([parameters])

(IE5+/NN6) document.getElementById(objectID).property | method([parameters])

About these objects

All objects listed in Table 15-1 are DOM representations of HTML elements that

influence either the font style or the context of some HTML content The large set

of properties, methods, and event handlers associated with these objects also

applies to virtually every other DOM object that represents an HTML element

Discussions about object details in this chapter apply to dozens of other objects

described in succeeding chapters of this reference section

Properties

accessKey

Value: One-Character String Read/Write

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

For many elements, you can specify a keyboard character (letter, numeral, or

punctuation symbol) that, when typed as an Alt+key combination (on the Win32 OS

platform) or Ctrl+key combination (on the MacOS), brings focus to that element An

element that has focus is the one that is set to respond to keyboard activity If the

newly focused element is out of view in the document’s current scroll position,

the document is scrolled to bring that focused element into view (also see the

scrollIntoView()method) The character you specify can be an uppercase or

lowercase value, but these values are not case-sensitive If you assign the same

elementObject.accessKey

Trang 3

letter to more than one element, the user can cycle through all elements associated with that accessKeyvalue

For IE4, not all elements can receive focus in a meaningful way For that browser version, you should limit this property to elements that can actually receive focus, such as form elements and links One way to see what elements on a page can receive focus is to repeatedly press the Tab key while the document is visible In the Windows platforms, either a dotted line around the element or a text insertion pointer flashing inside a text entry element indicates the focus Not all operating system platforms provide focus to the same set of elements IE4 for the Macintosh, for example, does not give focus to button elements For IE5.5, however, any ele-ment can receive focus — even if no visible outline explicitly indicates this state Internet Explorer gives some added powers to the accessKeyproperty in some cases For example, if you assign an accessKeyvalue to a LABEL element object, the focus is handed to the form element associated with that label Also, when ele-ments such as buttons have focus, pressing the spacebar acts the same as clicking the element with a mouse

Exercise some judgement in selecting characters for accessKeyvalues If you assign a letter that is normally used to access one of the Windows version browser’s built-in menus (for example, Alt+F for the File menu), that accessKey

setting overrides the browser’s normal behavior To users who rely on keyboard access to menus, your control over that key combination can be disconcerting

Example (with Listing 15-1) on the CD-ROM

Related Item:srcollIntoView()method

all

Value: Array of nested element objects. Read-Only

The allproperty is a collection (array) of every HTML element and (in IE5+) XML tag within the scope of the current object Items in this array appear in source-code order, and the array is oblivious to element containment among the items For HTML element containers, the source-code order is dependent on the position of the start tag for the element — end tags are not counted But for XML tags, end tags appear as separate entries in the array

Every document.allcollection contains objects for the HTML, HEAD, TITLE, and BODY element objects even if the actual HTML source code omits the tags The object model creates these objects for every document that is loaded into a win-dow or frame While the document.allreference may be the most common usage,

On the

CD-ROM

elementObject.all

Trang 4

the allproperty is available for any container element For example, document.

forms[0].allexposes all elements defined within the first form of a page

You can access any element that has an identifier assigned to its IDattribute by

that identifier in string form (as well as by index integer) Rather than use the

per-formance-costly eval()function to convert a string to an object reference, use the

string value of the name as an array index value:

var paragraph = document.all[“myP”]

Internet Explorer enables you to use either square brackets or parentheses for

single collection index values Thus, the following two examples evaluate identically:

var paragraph = document.all[“myP”]

var paragraph = document.all(“myP”)

In the rare case that more than one element within the allcollection has the

same ID, the syntax for the string index value returns a collection of just those

iden-tically named elements But you can use a second argument (in parentheses) to

sig-nify the integer of the initial collection and thus single out a specific instance of that

named element:

var secondRadio = document.all(“group0”,1)

As a more readable alternative, you can use the item()method (described later

in this chapter) to access the same kinds of items within a collection:

var secondRadio = document.all.item(“group0”,1)

Also see the tags()method (later in this chapter) as a way to extract a set of

elements from an allcollection that matches a specific tag name

You can simulate the behavior of IE’s allproperty in NN6 See Chapter 14 for the

code you need to add to make that happen

Example on the CD-ROM

Related Items:item(), tags()methods

attributes

Value: Array of attribute object references. Read-Only

The attributesproperty consists of an array of attributes specified for an

ele-ment In IE5, the attributesarray contains an entry for every possible property

that the browser has defined for its elements — even if the attribute is not set

explicitly in the HTML tag Also, any attributes that you add later via script facilities

On the

CD-ROM

elementObject.attributes

Trang 5

such as the setAttribute()method are not reflected in the attributesarray In other words, the IE5 attributesarray is fixed, using default values for all proper-ties except those that you explicitly set as attributes in the HTML tag

NN6’s attributesproperty returns an array that is a named node map (in W3C DOM terminology) NN6 does not implement all W3C DOM Level 2 methods for a named node map, but you can use the getNamedItem(attrName)and

item(index)methods on the array returned from the attributesproperty to access individual attribute objects via W3C DOM syntax

IE5 and NN6 have different ideas about what an attribute object should be Table 15-2 shows the variety of properties of an attribute object as defined by the two object models The larger set of properties in NN6 reveals its dependence on the W3C DOM node inheritance model discussed in Chapter 14

Table 15-2 Attribute Object Properties

Property IE5.x NN6 Description

attributes No Yes Array of nested attribute objects (null)

localName No Yes Name within current namespace

nodeValue Yes Yes Value assigned to attribute ownerDocument No Yes document object reference ownerElement No Yes Element node reference

previousSibling No Yes Previous sibling node specified Yes Yes Whether attribute is explicitly specified

(Boolean)

The most helpful property of an attribute object is the Boolean specified prop-erty In IE, this lets you know whether the attribute is explicitly specified in the

elementObject.attributes

Trang 6

element’s tag Because NN6 returns only explicitly specified attributes in the

attributesarray, the value in NN6 is always true

Related Items:mergeAttributes(), removeAttribute(), setAttribute()

methods

behaviorUrns

Value: Array of behavior URN strings Read-Only

The behaviorUrnsproperty is designed to provide a list of addresses, in the

form of URNs (Uniform Resource Names), of all behaviors assigned to the current

object If there are no behaviors, the array has a length of zero In practice,

how-ever, IE5 always returns an array of empty strings Perhaps the potential exposure

of URNs by script was deemed to be a privacy risk

Related Item:urns()method

canHaveChildren

Value: Boolean Read-Only

Useful in some dynamic content situations, the canHaveChildrenproperty

(not implemented in IE5/Mac) reveals whether a particular element is capable of

containing a child (nested) element Most elements that have start and end tags

(particularly the generic elements covered in this chapter) can contain nested

elements In modern object models, a nested element is referred to as a child of its

parent container

On the

CD-ROM

On the

CD-ROM

elementObject.canHaveChildren

Trang 7

Related Items:childNodes, firstChild, lastChild, parentElement,

methods

canHaveHTML

Value: Boolean Read-Only

While most HTML elements are containers of HTML content, not all are The

canHaveHTMLproperty lets scripts find out whether a particular object can accept HTML content, such as for insertion or replacement by object methods The value for a P element, for example, is true The value for a BR element is false

Related Items: appendChild(), insertAdjacentHTML(), insertBefore()

methods

childNodes

Value: Array of node objects. Read-Only

The childNodesproperty consists of an array of node objects contained by the current object Note that child nodes consist of both element objects and text nodes Therefore, depending on the content of the current object, the number of

childNodesand children collections may differ

On the

CD-ROM

On the

CD-ROM

elementObject.childNodes

Trang 8

If you use the childNodes array in a for loop that iterates through a sequence of

HTML (or XML) elements, watch out for the possibility that the browser treats

source code whitespace (blank lines between elements and even simple carriage

returns between elements) as text nodes This potential problem affects IE5/Mac

and NN6 (although later versions may repair the problem) If present, these extra

text nodes occur primarily surrounding block elements

Most looping activity through the childNodes array aims to examine, count, or

modify element nodes within the collection If that is your script’s goal, then test

each node returned by the childNodes array, and verify that the nodeType

property is 1 (element) before processing that node Otherwise, skip over the

node The skeletal structure of such a loop follows:

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

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

statements to work on element node i

} }

The presence of these “phantom” text nodes also impacts the nodes referenced by

the firstChild and lastChild properties, described later in this chapter

Related Items:nodeName, nodeType, nodeValue, parentNode properties;

cloneNode(), hasChildNodes(), removeNode(), replaceNode(),

swapNode()methods

children

Value: Array of element objects. Read-Only

The childrenproperty consists of an array of element objects contained by the

current object Unlike the childNodesproperty, childrendoes not take into

account text nodes but rather focuses strictly on the HTML (and XML) element

con-tainment hierarchy from the point of view of the current object Children exposed

to the current object are immediate children only If you want to get all element

objects nested within the current object (regardless of how deeply nested they

are), use the allcollection instead

On the

CD-ROM

Caution

elementObject.children

Trang 9

Related Items:canHaveChildren, firstChild, lastChild, parentElement

className

Value: String Read/Write

A class name is an identifier that is assigned to the CLASSattribute of an element

To associate a CSS rule with several elements in a document, assign the same iden-tifier to the CLASSattributes of those elements, and use that identifier (preceded by

a period) as the CSS rule’s selector An element’s classNameproperty enables the application of different CSS rules to that element under script control

Related Items:rule, stylesheetobjects (Chapter 30); idproperty

clientHeight

clientWidth

Value: Integer Read-Only

These two properties by and large reveal the pixel height and width of the con-tent with an element whose style sheet rule includes height and width settings In theory, these measures do not take into account any margins, borders, or padding that you add to an element by way of style sheets In practice, however, different combinations of borders, margins, and padding influence these values in unex-pected ways One of the more reliable applications of the clientHeightproperty enables you to discover, for example, where the text of an overflowing element ends

On the

CD-ROM

On the

CD-ROM

elementObject.clientHeight

Trang 10

For the document.bodyobject, the clientHeightand clientWidthproperties

return the inside height and width of the window or frame (plus or minus a couple of

pixels) These take the place of desirable, but nonexistent, window properties in IE

Internet Explorer 5 expands the number of objects that employ these properties

to include virtually all objects that represent HTML elements For IE4, these

proper-ties apply only to the following objects: BODY, BUTTON, CAPTION, DIV, EMBED,

FIELDSET, LEGEND, MARQUEE, TABLE, TD, TEXTAREA, TH, and TR

Related Items: offsetHeight, offsetWidthproperties

clientLeft

clientTop

Value: Integer Read-Only

The purpose and names of the clientLeftand clientTopproperties are

confus-ing at best Unlike the clientHeightand clientWidthproperties, which apply to the

content of an element, the clientLeftand clientTopproperties return essentially no

more information than the thickness of a border around an element — provided the

ele-ment is positioned If you do not specify a border or do not position the eleele-ment, the

values are zero (although the document.bodyobject can show a couple of pixels in

each direction without explicit settings) If you are trying to read the left and top

coor-dinate positions of an element, the offsetLeftand offsetTopproperties are more

valuable in IE/Windows; as shown in Listing 15-6, however, the clientTopproperty

returns a suitable value in IE/Mac Virtually all elements have the clientLeftand

clientTopproperties in IE5+; in IE4, the properties apply only to the BODY, BUTTON,

CAPTION, EMBED, FIELDSET, LEGEND, MARQUEE, and TEXTAREA objects

Related Items:offsetLeft, offsetTopproperties

contentEditable

Value: Boolean Read/Write

On the

CD-ROM

elementObject.contentEditable

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