JavaScript Bible, Gold Edition part 167 pot

outerHTML outerText NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example The page generated by Listing 15-13 IE4+/Windows only contains an H1element label and a paragraph of text.. parent

Trang 1

outerHTML outerText

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

Example

The page generated by Listing 15-13 (IE4+/Windows only) contains an H1element label and a paragraph of text The purpose is to demonstrate how the outerHTML

and outerTextproperties differ in their intent Two text boxes contain the same combination of text and HTML tags that replaces the element that creates the para-graph’s label

If you apply the default content of the first text box to the outerHTMLproperty of the label1object, the H1 element is replaced by a SPAN element whose CLASS

attribute acquires a different style sheet rule defined earlier in the document Notice that the ID of the new SPAN element is the same as the original H1 element This allows the script attached to the second button to address the object But this second script replaces the element with the raw text (including tags) The element

is now gone, and any attempt to change the outerHTMLor outerTextproperties of the label1object causes an error because there is no longer a label1object in the document

Use this laboratory to experiment with some other content in both text boxes

Listing 15-13: Using outerHTML and outerText Properties

<HTML>

<HEAD>

<TITLE>outerHTML and outerText Properties</TITLE>

H1 {font-size:18pt; font-weight:bold; font-family:”Comic Sans MS”, Arial, sans-serif}

.heading {font-size:20pt; font-weight:bold; font-family:”Arial Black”, Arial, sans-serif}

</STYLE>

function setGroupLabelAsText(form) { var content = form.textInput.value

if (content) {

elementObject.outerHTML

Trang 2

document.all.label1.outerText = content

}

function setGroupLabelAsHTML(form) {

var content = form.HTMLInput.value

if (content) {

document.all.label1.outerHTML = content

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<P>

<INPUT TYPE=”text” NAME=”HTMLInput”

VALUE=”<SPAN ID=’label1’ CLASS=’heading’>Article the First</SPAN>” SIZE=55>

<INPUT TYPE=”button” VALUE=”Change Heading HTML”

onClick=”setGroupLabelAsHTML(this.form)”>

</P>

<P>

<INPUT TYPE=”text” NAME=”textInput”

VALUE=”<SPAN ID=’label1’ CLASS=’heading’>Article the First</SPAN>” SIZE=55>

<INPUT TYPE=”button” VALUE=”Change Heading Text”

onClick=”setGroupLabelAsText(this.form)”>

</P>

</FORM>

<H1 ID=”label1”>ARTICLE I</H1>

<P>

Congress shall make no law respecting an establishment of religion, or

prohibiting the free exercise thereof; or abridging the freedom of speech, or of

the press; or the right of the people peaceably to assemble, and to petition the

government for a redress of grievances.

</P>

</BODY>

</HTML>

ownerDocument

elementObject.ownerDocument

Trang 3

Use The Evaluator (Chapter 13) to explore the ownerDocumentproperty in NN6 Enter the following statement into the top text box:

document.body.childNodes[5].ownerDocument

The result is a reference to the documentobject You can use that to inspect a prop-erty of the document, as shown in the following statement you should enter into the top text box:

document.body.childNodes[5].ownerDocument.URL

This returns the document.URLproperty for the document that owns the child node

parentElement

Example

You can experiment with the parentElementproperty in The Evaluator The docu-ment contains a P eledocu-ment named myP Type each of the following statedocu-ments from the left column into the upper expression evaluation text box and press Enter to see the results

document.all.myP.parentElement.parentElement [object] document.all.myP.parentElement.parentElement.tagName HTML document.all.myP.parentElement.parentElement.parentElement null

elementObject.parentElement

Trang 4

Example

Use The Evaluator to examine the parentNodeproperty values of both an element

and a non-element node Begin with the following two statements and watch the

results of each:

document.getElementById(“myP”).parentNode.tagName

document.getElementById(“myP”).parentElement.tagName (IE only)

Now examine the properties from the point of view of the first text fragment node of

the myPparagraph element:

document.getElementById(“myP”).childNodes[0].nodeValue

document.getElementById(“myP”).childNodes[0].parentNode.tagName

document.getElementById(“myP”).childNodes[0].parentElement (IE only)

Notice (in IE) that the text node does not have a parentElementproperty

parentTextEdit

Example

The page resulting from Listing 15-14 contains a paragraph of Greek text and three

radio buttons that select the size of a paragraph chunk: one character, one word, or

one sentence If you click anywhere within the large paragraph, the onClickevent

handler invokes the selectChunk()function The function first examines which of

the radio buttons is selected to determine how much of the paragraph to highlight

(select) around the point at which the user clicks

After the script employs the parentTextEditproperty to test whether the clicked

element has a valid parent capable of creating a text range, it calls upon the

prop-erty again to help create the text range From there, TextRangeobject methods

elementObject.parentTextEdit

Trang 5

shrink the range to a single insertion point, move that point to the spot nearest the cursor location at click time, expand the selection to encompass the desired chunk, and select that bit of text

Notice one workaround for the TextRangeobject’s expand()method anomaly: If you specify a sentence, IE doesn’t treat the beginning of a P element as the starting end of a sentence automatically A camouflaged (white text color) period is

appended to the end of the previous element to force the TextRangeobject to expand only to the beginning of the first sentence of the targeted P element

Listing 15-14: Using the parentTextEdit Property

<HTML>

<HEAD>

<TITLE>parentTextEdit Property</TITLE>

P {cursor:hand}

</STYLE>

function selectChunk() { var chunk, range for (var i = 0; i < document.forms[0].chunk.length; i++) {

if (document.forms[0].chunk[i].checked) { chunk = document.forms[0].chunk[i].value break

} } var x = window.event.clientX var y = window.event.clientY

if (window.event.srcElement.parentTextEdit) { range = window.event.srcElement.parentTextEdit.createTextRange() range.collapse()

range.moveToPoint(x, y) range.expand(chunk) range.select() }

}

</SCRIPT>

</HEAD>

<FORM>

<P>Choose how much of the paragraph is to be selected when you click anywhere in it:<BR>

<INPUT TYPE=”radio” NAME=”chunk” VALUE=”character” CHECKED>Character

<INPUT TYPE=”radio” NAME=”chunk” VALUE=”word”>Word

<INPUT TYPE=”radio” NAME=”chunk” VALUE=”sentence”>Sentence

elementObject.parentTextEdit

Trang 6

</FORM>

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.

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 deserunt mollit anim id est laborum.

</P>

</BODY>

</HTML>

previousSibling

See nextSibling

readyState

Example

To witness a readyStateproperty other than completefor standard HTML, you

can try examining the property in a script that immediately follows an <IMG>tag:

alert(document.all.myImg.readyState)

</SCRIPT>

Putting this fragment into a document that is accessible across a slow network

helps If the image is not in the browser’s cache, you might get the uninitialized

or loadingresult The former means that the IMG object exists, but it has not

started receiving the image data from the server yet If you reload the page,

chances are that the image will load instantaneously from the cache and the

readyStateproperty will report complete

elementObject.readyState

Trang 7

Example

You can see the recordNumberproperty in action in Listing 15-15 The data source

is a small, tab-delimited file consisting of 20 records of Academy Award data Thus, the table that displays a subset of the fields is bound to the data source object Also bound to the data source object are three SPAN objects embedded within a para-graph near the top of the page As the user clicks a row of data, three fields from that clicked record are placed into the bound SPAN objects

The script part of this page is a mere single statement When the user triggers the

onClickevent handler of the repeated TR object, the function receives as a param-eter a reference to the TR object The data store object maintains an internal copy

of the data in a recordsetobject One of the properties of this recordsetobject is the AbsolutePositionproperty, which is the integer value of the current record that the data object points to (it can point to only one row at a time, and the default row is the first row) The statement sets the AbsolutePositionproperty of the

recordsetobject to the recordNumberproperty for the row that the user clicks Because the three SPAN elements are bound to the same data source, they are immediately updated to reflect the change to the data object’s internal pointer to the current record Notice, too, that the third SPAN object is bound to one of the data source fields not shown in the table You can reach any field of a record because the Data Source Object holds the entire data source content

Listing 15-15: Using the Data Binding recordNumber Property

<HTML>

<HEAD>

<TITLE>Data Binding (recordNumber)</TITLE>

.filmTitle {font-style:italic}

</STYLE>

// set recordset pointer to the record clicked on in the table.

function setRecNum(row) { document.oscars.recordset.AbsolutePosition = row.recordNumber }

</SCRIPT>

elementObject.recordNumber

Trang 8

<BODY>

<P><B>Academy Awards 1978-1997</B> (Click on a table row to extract data from

one record.)</P>

<P>The award for Best Actor of <SPAN DATASRC=”#oscars” DATAFLD=”Year”></SPAN>

 went to <SPAN DATASRC=”#oscars” DATAFLD=”Best Actor”></SPAN>

 for his outstanding achievement in the film

<TD>Director</TD>

<TD>Actress</TD>

<TD>Actor</TD>

</TR>

</THEAD>

</TR>

</TABLE>

</OBJECT>

</BODY>

</HTML>

runtimeStyle

Example

Use The Evaluator (Chapter 13) to compare the properties of the runtimeStyle

and styleobjects of an element For example, an unmodified copy of The

Evaluator contains an EM element whose ID is “myEM” Enter both

elementObject.runtimeStyle

Trang 9

document.all.myEM.style.color

and

document.all.myEM.runtimeStyle.color

into the top text field in turn Initially, both values are empty Now assign a color to the styleproperty via the upper text box:

document.all.myEM.style.color = “red”

If you now type the two earlier statements into the upper box, you can see that the

styleobject reflects the change, while the runtimeStyleobject still holds onto its original (empty) value

scopeName

Example

If you have a sample document that contains XML and a namespace spec, you can use document.write()or alert()methods to view the value of the scopeName

property The syntax is

document.all.elementID.scopeName

scrollHeight scrollWidth

Example

Use The Evaluator (Chapter 13) to experiment with these two properties of the TEXTAREA object, which displays the output of evaluations and property listings

elementObject.scrollHeight

Trang 10

To begin, enter the following into the bottom one-line text field to list the properties

of the bodyobject:

document.body

This displays a long list of properties for the bodyobject Now enter the following

property expression in the top one-line text field to see the scrollHeightproperty

of the output TEXTAREA when it holds the dozens of lines of property listings:

document.all.output.scrollHeight

The result, some number probably in the hundreds, is now displayed in the output

TEXTAREA This means that you can scroll the content of the outputelement

verti-cally to reveal that number of pixels Click the Evaluate button once more The

result, 13 or 14, is a measure of the scrollHeightproperty of the TEXTAREA that

had only the previous result in it The scrollable height of that content was only 13

or 14 pixels, the height of the font in the TEXTAREA The scrollWidthproperty of

the output TEXTAREA is fixed by the width assigned to the element’s COLSattribute

(as calculated by the browser to determine how wide to make the textarea on the

page)

scrollLeft

scrollTop

Example

Use The Evaluator (Chapter 13) to experiment with these two properties of the

TEXTAREA object, which displays the output of evaluations and property listings

To begin, enter the following into the bottom one-line text field to list the properties

of the bodyobject:

document.body

This displays a long list of properties for the bodyobject Use the TEXTAREA’s

scrollbar to page down a couple of times Now enter the following property

expres-sion in the top one-line text field to see the scrollTopproperty of the output

TEXTAREA after you scroll:

document.all.output.scrollTop

elementObject.scrollLeft

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