w3school JavaScript参考手册飞龙整理

W3School JavaScript
www.w3school.com.cn
2014.10.3

JavaScript Array .................................................................................... 14
JavaScript constructor .............................................................................................................16
JavaScript length ..................................................................................................................... 18
JavaScript prototype ............................................................................................................... 19
JavaScript concat() .................................................................................................................. 20
JavaScript join() ....................................................................................................................... 22
JavaScript pop() .......................................................................................................................24
JavaScript push() ..................................................................................................................... 25
JavaScript reverse() ................................................................................................................. 26
JavaScript shift() ...................................................................................................................... 27
JavaScript slice() ...................................................................................................................... 28
JavaScript sort() .......................................................................................................................31
JavaScript splice() .................................................................................................................... 33
JavaScript toSource() ...............................................................................................................36
JavaScript toString() ................................................................................................................ 37
JavaScript toLocaleString() ...................................................................................................... 38
JavaScript unshift() ..................................................................................................................39
JavaScript valueOf() .................................................................................................................41
JavaScript Boolean .............................................................................. 41

JavaScript toSource() ...............................................................................................................45
JavaScript toString() ................................................................................................................ 46
JavaScript valueOf() .................................................................................................................47
JavaScript Date ......................................................................................48

JavaScript Date() ......................................................................................................................52
JavaScript Date() ......................................................................................................................53
JavaScript getDay() .................................................................................................................. 54
JavaScript getMonth() ............................................................................................................. 56
JavaScript getFullYear() ........................................................................................................... 57
JavaScript getYear() ................................................................................................................. 59
JavaScript getHours() .............................................................................................................. 60
JavaScript getMinutes() ...........................................................................................................61
JavaScript getSeconds() ...........................................................................................................63
JavaScript getMilliseconds() ....................................................................................................64
JavaScript getTime() ................................................................................................................ 65

JavaScript getTimezoneOffset() .............................................................................................. 67
JavaScript getUTCDate() ..........................................................................................................68
JavaScript getUTCDay() ........................................................................................................... 70
JavaScript getUTCMonth() ...................................................................................................... 71
JavaScript getUTCFullYear() .....................................................................................................73
JavaScript getUTCHours() ........................................................................................................74
JavaScript getUTCMinutes() .................................................................................................... 76
JavaScript getUTCSeconds() .................................................................................................... 77
JavaScript getUTCMilliseconds() ............................................................................................. 78
JavaScript parse() .................................................................................................................... 80
JavaScript setDate() .................................................................................................................82
JavaScript setMonth() ............................................................................................................. 83
JavaScript setFullYear() ............................................................................................................84
JavaScript setYear() ................................................................................................................. 86
JavaScript setHours() ...............................................................................................................87
JavaScript setMinutes() ...........................................................................................................88
JavaScript setSeconds() ...........................................................................................................90
JavaScript setMilliseconds() .................................................................................................... 91
JavaScript setTime() ................................................................................................................ 92
JavaScript setUTCDate() .......................................................................................................... 93
JavaScript setUTCMonth() .......................................................................................................94
JavaScript setUTCFullYear() .....................................................................................................96
JavaScript setUTCHours() ........................................................................................................ 97
JavaScript setUTCMinutes() .................................................................................................... 99
JavaScript setUTCSeconds() .................................................................................................. 101
JavaScript setUTCMilliseconds() ........................................................................................... 102
JavaScript toSource() .............................................................................................................103
JavaScript toString() .............................................................................................................. 104
JavaScript toTimeString() ...................................................................................................... 105
JavaScript toDateString() .......................................................................................................105
JavaScript toGMTString() ...................................................................................................... 106
JavaScript toUTCString() ........................................................................................................107
JavaScript toLocaleString() ....................................................................................................108
JavaScript toLocaleTimeString() ............................................................................................109
JavaScript toLocaleDateString() ............................................................................................ 110
JavaScript UTC() .....................................................................................................................110
JavaScript valueOf() ...............................................................................................................112
Math ............................................................................................................................... 112

JavaScript E ............................................................................................................................114
JavaScript LN2 ....................................................................................................................... 115
JavaScript LN10 ..................................................................................................................... 115
JavaScript LOG2E ...................................................................................................................116
JavaScript LOG10E .................................................................................................................117

JavaScript PI ...........................................................................................................................117
JavaScript SQRT1_2 ...............................................................................................................118
JavaScript SQRT2 ................................................................................................................... 119
JavaScript abs() ......................................................................................................................119
JavaScript acos() .................................................................................................................... 120
JavaScript asin() .....................................................................................................................121
JavaScript atan() .................................................................................................................... 123
JavaScript atan2() .................................................................................................................. 124
JavaScript ceil() ......................................................................................................................125
JavaScript cos() ......................................................................................................................126
JavaScript exp() ..................................................................................................................... 127
JavaScript floor() ................................................................................................................... 128
JavaScript log() ...................................................................................................................... 130
JavaScript max() .................................................................................................................... 131
JavaScript min() ..................................................................................................................... 132
JavaScript pow() .................................................................................................................... 133
JavaScript random() .............................................................................................................. 134
JavaScript round() ................................................................................................................. 135
JavaScript sin() .......................................................................................................................136
JavaScript sqrt() .....................................................................................................................137
JavaScript tan() ......................................................................................................................138
JavaScript toSource() .............................................................................................................139
Number ......................................................................................................................... 141

JavaScript constructor ...........................................................................................................143
JavaScript MAX_VALUE ......................................................................................................... 144
JavaScript MIN_VALUE .......................................................................................................... 145
JavaScript NaN .......................................................................................................................145
JavaScript NEGATIVE_INFINITY ............................................................................................. 147
JavaScript POSITIVE_INFINITY ...............................................................................................148
JavaScript toLocaleString() ....................................................................................................150
JavaScript toFixed() ............................................................................................................... 150
JavaScript toExponential() .................................................................................................... 151
JavaScript toPrecision() ......................................................................................................... 152
JavaScript String ................................................................................. 154

JavaScript length ................................................................................................................... 157
JavaScript anchor() ................................................................................................................158
JavaScript big() ...................................................................................................................... 158
JavaScript blink() ................................................................................................................... 159
JavaScript bold() .................................................................................................................... 160

JavaScript charAt() ................................................................................................................ 160
JavaScript charCodeAt() ........................................................................................................ 161
JavaScript concat() ................................................................................................................ 162
JavaScript fixed() ................................................................................................................... 163
JavaScript fontcolor() ............................................................................................................ 164
JavaScript fontsize() ...............................................................................................................164
JavaScript fromCharCode() ................................................................................................... 165
JavaScript indexOf() .............................................................................................................. 166
JavaScript italics() .................................................................................................................. 167
JavaScript lastIndexOf() .........................................................................................................168
JavaScript link() ..................................................................................................................... 169
JavaScript localeCompare() ...................................................................................................170
JavaScript match() ................................................................................................................. 171
JavaScript replace() ............................................................................................................... 173
JavaScript search() .................................................................................................................176
JavaScript slice() .................................................................................................................... 177
JavaScript small() ...................................................................................................................179
JavaScript split() .................................................................................................................... 180
JavaScript strike() .................................................................................................................. 182
JavaScript sub() ..................................................................................................................... 182
JavaScript substr() ................................................................................................................. 183
JavaScript substring() ............................................................................................................ 184
JavaScript sup() ..................................................................................................................... 186
JavaScript toLocaleLowerCase() ............................................................................................187
JavaScript toLocaleUpperCase() ............................................................................................188
JavaScript toLowerCase() ...................................................................................................... 189
JavaScript toUpperCase() ......................................................................................................189
JavaScript RegExp .............................................................................. 191

JavaScript RegExp i ............................................................................................................ 195
JavaScript RegExp g ........................................................................................................... 196
JavaScript RegExp [abc] .....................................................................................................197
JavaScript RegExp [âbc] ...................................................................................................198
JavaScript RegExp . ............................................................................................................199
JavaScript RegExp \w ........................................................................................................ 200
JavaScript RegExp \W ........................................................................................................200
JavaScript RegExp \d ......................................................................................................... 201
JavaScript RegExp \D .........................................................................................................202
JavaScript RegExp \s ..........................................................................................................203
JavaScript RegExp \S ......................................................................................................... 204
JavaScript RegExp \b ......................................................................................................... 205
JavaScript RegExp \B ......................................................................................................... 206

JavaScript RegExp \n ......................................................................................................... 207
JavaScript RegExp \xxx ...................................................................................................... 207
JavaScript RegExp \xdd ..................................................................................................... 208
JavaScript RegExp \uxxxx .................................................................................................. 209
JavaScript RegExp + ...............................................................................................................210
JavaScript RegExp * ...............................................................................................................211
JavaScript RegExp ? ............................................................................................................... 212
JavaScript RegExp {X} ............................................................................................................ 213
JavaScript RegExp {X,Y} ..........................................................................................................214
JavaScript RegExp {X,} ........................................................................................................... 215
JavaScript RegExp $ ...............................................................................................................215
JavaScript RegExp ^ ...............................................................................................................216
JavaScript RegExp ?= ............................................................................................................. 217
JavaScript RegExp ?! ..............................................................................................................218
JavaScript global ....................................................................................................................219
JavaScript ignoreCase ............................................................................................................219
JavaScript lastIndex ............................................................................................................... 220
JavaScript multiline ............................................................................................................... 221
JavaScript source ...................................................................................................................222
JavaScript compile() .............................................................................................................. 223
JavaScript exec() ....................................................................................................................224
JavaScript test() ..................................................................................................................... 225
JavaScript .....................................................................................226
JavaScript decodeURI() ......................................................................................................... 228
JavaScript decodeURIComponent() ...................................................................................... 229
JavaScript encodeURI() ......................................................................................................... 230
JavaScript encodeURIComponent() ...................................................................................... 232
JavaScript escape() ................................................................................................................233
JavaScript eval() .....................................................................................................................234
JavaScript getClass() ..............................................................................................................236
JavaScript isFinite() ................................................................................................................237
JavaScript isNaN() ..................................................................................................................239
JavaScript Number() ..............................................................................................................240
JavaScript parseFloat() .......................................................................................................... 241
JavaScript parseInt() ..............................................................................................................244
JavaScript String() ..................................................................................................................245
JavaScript unescape() ............................................................................................................246
JavaScript Infinity .................................................................................................................. 247
JavaScript java ....................................................................................................................... 248
JavaScript NaN .......................................................................................................................249
JavaScript Packages ...............................................................................................................250
JavaScript undefined ............................................................................................................. 251
Window .........................................................................................................................252
HTML DOM closed ................................................................................................................ 255
HTML DOM defaultStatus ..................................................................................................... 256
HTML DOM innerheightinnerwidth ..................................................................................257
HTML DOM name ................................................................................................................. 257
HTML DOM opener ............................................................................................................... 258
HTML DOM outerheight ....................................................................................................... 259
HTML DOM outerwidth ........................................................................................................ 260
HTML DOM self ..................................................................................................................... 261
HTML DOM status ................................................................................................................. 262
HTML DOM top ..................................................................................................................... 263
HTML DOM alert() .................................................................................................................264
HTML DOM blur() ..................................................................................................................265
HTML DOM clearInterval() ....................................................................................................266
HTML DOM clearTimeout() ...................................................................................................267
HTML DOM close() ................................................................................................................ 268
HTML DOM confirm() ............................................................................................................269
HTML DOM createPopup() ....................................................................................................270
HTML DOM focus() ................................................................................................................271
HTML DOM moveBy() ........................................................................................................... 272
HTML DOM moveTo() ........................................................................................................... 273
HTML DOM open() ................................................................................................................274
HTML DOM print() ................................................................................................................ 276
HTML DOM prompt() ............................................................................................................ 277
HTML DOM resizeBy() ........................................................................................................... 278
HTML DOM resizeTo() ........................................................................................................... 279
HTML DOM scrollBy() ............................................................................................................280
HTML DOM scrollTo() ............................................................................................................ 282
HTML DOM setInterval() .......................................................................................................283
HTML DOM setTimeout() ......................................................................................................284
Navigator ......................................................................................................................285
HTML DOM appCodeName .................................................................................................. 287
HTML DOM appMinorVersion .............................................................................................. 288
HTML DOM appName ...........................................................................................................288
HTML DOM appVersion ........................................................................................................ 289
HTML DOM browserLanguage ..............................................................................................290
HTML DOM cookieEnabled ...................................................................................................290
HTML DOM cpuClass .............................................................................................................291
HTML DOM onLine ................................................................................................................292
HTML DOM platform .............................................................................................................292
HTML DOM systemLanguage ................................................................................................293
HTML DOM userAgent .......................................................................................................... 294
HTML DOM userLanguage .................................................................................................... 294

HTML DOM javaEnabled() .....................................................................................................295
HTML DOM taintEnabled() ................................................................................................... 296
Screen ............................................................................................................................ 297

HTML DOM availHeight .........................................................................................................298
HTML DOM availWidth ......................................................................................................... 299
HTML DOM bufferDepth .......................................................................................................299
HTML DOM colorDepth ........................................................................................................ 300
HTML DOM deviceXDPI ........................................................................................................ 301
HTML DOM deviceYDPI .........................................................................................................301
HTML DOM fontSmoothingEnabled ..................................................................................... 302
HTML DOM height ................................................................................................................ 303
HTML DOM logicalXDPI .........................................................................................................303
HTML DOM logicalYDPI .........................................................................................................304
HTML DOM pixelDepth ......................................................................................................... 305
HTML DOM updateInterval ...................................................................................................305
HTML DOM width ................................................................................................................. 306
History ........................................................................................................................... 307

HTML DOM length ................................................................................................................ 308
HTML DOM back() .................................................................................................................308
HTML DOM forward() ........................................................................................................... 309
HTML DOM go() .................................................................................................................... 310
Location ........................................................................................................................ 311

HTML DOM hash ................................................................................................................... 313
HTML DOM host ....................................................................................................................314
HTML DOM hostname .......................................................................................................... 314
HTML DOM href .................................................................................................................... 315
HTML DOM pathname .......................................................................................................... 316
HTML DOM port ....................................................................................................................317
HTML DOM protocol ............................................................................................................. 317
HTML DOM search ................................................................................................................ 318
HTML DOM assign() .............................................................................................................. 319
HTML DOM reload() ..............................................................................................................320
HTML DOM replace() ............................................................................................................ 321
HTML DOM Document ......................................................................................... 322

HTML DOM all ....................................................................................................................... 324
HTML DOM anchors ..............................................................................................................324
HTML DOM forms ................................................................................................................. 325
HTML DOM images ............................................................................................................... 326
HTML DOM links ................................................................................................................... 327
HTML DOM cookie ................................................................................................................ 328

HTML DOM domain .............................................................................................................. 329
HTML DOM lastModified ...................................................................................................... 330
HTML DOM referrer .............................................................................................................. 330
HTML DOM title .................................................................................................................... 331
HTML DOM URL .................................................................................................................... 332
HTML DOM close() ................................................................................................................ 333
HTML DOM getElementById() .............................................................................................. 334
HTML DOM getElementsByName() ...................................................................................... 335
HTML DOM getElementsByTagName() .................................................................................336
HTML DOM open() ................................................................................................................338
HTML DOM write() ................................................................................................................339
HTML DOM writeln() .............................................................................................................340
HTML DOM
HTML DOM Anchor ............................................................................................................... 340
HTML DOM Area ................................................................................................................... 342
HTML DOM Base ................................................................................................................... 343
HTML DOM Body .................................................................................................................. 343
HTML DOM Button ................................................................................................................344
HTML DOM Canvas ............................................................................................................... 345
HTML DOM Form .................................................................................................................. 346
HTML DOM Frame ................................................................................................................ 348
HTML DOM Frameset ........................................................................................................... 349
HTML DOM IFrame ............................................................................................................... 350
HTML DOM Image .................................................................................................................351
HTML DOM Button ................................................................................................................352
HTML DOM Checkbox ........................................................................................................... 353
HTML DOM FileUpload ......................................................................................................... 355
HTML DOM Hidden ............................................................................................................... 356
HTML DOM Password ........................................................................................................... 357
HTML DOM Radio ................................................................................................................. 359
HTML DOM Reset ..................................................................................................................360
HTML DOM Submit ............................................................................................................... 361
HTML DOM Text .................................................................................................................... 363
HTML DOM Link .................................................................................................................... 364
HTML DOM Meta .................................................................................................................. 365
HTML DOM Object ................................................................................................................368
HTML DOM Option ............................................................................................................... 369
HTML DOM Select .................................................................................................................370
HTML DOM Table .................................................................................................................. 372
HTML DOM TableCell ............................................................................................................ 391
HTML DOM TableRow ........................................................................................................... 398
HTML DOM Textarea .............................................................................................................404
HTML DOM Style ..................................................................................................... 406

HTML DOM background ....................................................................................................... 412
HTML DOM backgroundAttachment .................................................................................... 415
HTML DOM backgroundColor ...............................................................................................417
HTML DOM backgroundImage ............................................................................................. 420
HTML DOM backgroundPosition .......................................................................................... 421
HTML DOM backgroundPositionX ........................................................................................ 424
HTML DOM backgroundPositionY ........................................................................................ 426
HTML DOM backgroundRepeat ............................................................................................428
HTML DOM border ................................................................................................................430
HTML DOM borderBottom ................................................................................................... 432
HTML DOM borderBottomColor ...........................................................................................434
HTML DOM borderBottomStyle ........................................................................................... 436
HTML DOM borderBottomWidth ......................................................................................... 438
HTML DOM borderColor .......................................................................................................440
HTML DOM borderLeft ......................................................................................................... 442
HTML DOM borderLeftColor .................................................................................................444
HTML DOM borderLeftStyle ................................................................................................. 446
HTML DOM borderLeftWidth ............................................................................................... 448
HTML DOM borderRight ....................................................................................................... 449
HTML DOM borderRightColor .............................................................................................. 451
HTML DOM borderRightStyle ............................................................................................... 453
HTML DOM borderRightWidth ............................................................................................. 455
HTML DOM borderStyle ........................................................................................................457
HTML DOM borderTop ..........................................................................................................459
HTML DOM borderTopColor ................................................................................................. 462
HTML DOM borderTopStyle ..................................................................................................463
HTML DOM borderTopWidth ................................................................................................466
HTML DOM borderWidth ..................................................................................................... 468
HTML DOM margin ............................................................................................................... 470
HTML DOM marginBottom ................................................................................................... 472
HTML DOM marginLeft ......................................................................................................... 473
HTML DOM marginRight .......................................................................................................475
HTML DOM marginTop ......................................................................................................... 477
HTML DOM outline ............................................................................................................... 479
HTML DOM outlineColor ...................................................................................................... 481
HTML DOM outlineStyle ....................................................................................................... 483
HTML DOM outlineWidth ..................................................................................................... 485
HTML DOM padding ............................................................................................................. 487
HTML DOM paddingBottom ................................................................................................. 489
HTML DOM paddingLeft ....................................................................................................... 491
HTML DOM paddingRight ..................................................................................................... 493
HTML DOM paddingTop ........................................................................................................495
HTML DOM clear ...................................................................................................................497

HTML DOM clip ..................................................................................................................... 499
HTML DOM content .............................................................................................................. 501
HTML DOM cssFloat ..............................................................................................................503
HTML DOM cursor ................................................................................................................ 505
HTML DOM direction ............................................................................................................ 508
HTML DOM display ............................................................................................................... 509
HTML DOM height ................................................................................................................ 512
HTML DOM maxHeight ......................................................................................................... 513
HTML DOM maxWidth ..........................................................................................................515
HTML DOM minHeight ..........................................................................................................517
HTML DOM minWidth .......................................................................................................... 518
HTML DOM overflow ............................................................................................................ 520
HTML DOM verticalAlign .......................................................................................................522
HTML DOM visibility ............................................................................................................. 524
HTML DOM width ................................................................................................................. 526
HTML DOM listStyle .............................................................................................................. 528
HTML DOM listStyleImage .................................................................................................... 530
HTML DOM listStylePosition .................................................................................................532
HTML DOM listStyleType ...................................................................................................... 534
HTML DOM bottom ...............................................................................................................537
HTML DOM left ..................................................................................................................... 539
HTML DOM position ............................................................................................................. 541
HTML DOM right ................................................................................................................... 543
HTML DOM top ..................................................................................................................... 545
HTML DOM zIndex ................................................................................................................ 547
HTML DOM pageBreakAfter ................................................................................................. 549
HTML DOM pageBreakBefore ...............................................................................................551
HTML DOM pageBreakInside ................................................................................................552
HTML DOM scrollbar3dLightColor ........................................................................................553
HTML DOM scrollbarArrowColor ..........................................................................................555
HTML DOM scrollbarBaseColor ............................................................................................ 557
HTML DOM scrollbarDarkShadowColor ............................................................................... 559
HTML DOM scrollbarFaceColor .............................................................................................560
HTML DOM scrollbarHighlightColor ..................................................................................... 562
HTML DOM scrollbarShadowColor ....................................................................................... 564
HTML DOM scrollbarTrackColor ........................................................................................... 566
HTML DOM borderCollapse ..................................................................................................568
HTML DOM borderSpacing ................................................................................................... 570
HTML DOM captionSide ........................................................................................................572
HTML DOM emptyCells .........................................................................................................574
HTML DOM tableLayout ........................................................................................................576
HTML DOM color .................................................................................................................. 578
HTML DOM font .................................................................................................................... 580
HTML DOM fontFamily ......................................................................................................... 582

HTML DOM fontSize ..............................................................................................................584
HTML DOM fontSizeAdjust ................................................................................................... 585
HTML DOM fontStretch ........................................................................................................ 587
HTML DOM fontStyle ............................................................................................................ 589
HTML DOM fontVariant ........................................................................................................ 591
HTML DOM fontWeight ........................................................................................................ 592
HTML DOM letterSpacing ..................................................................................................... 594
HTML DOM lineHeight .......................................................................................................... 596
HTML DOM quotes ............................................................................................................... 598
HTML DOM textAlign ............................................................................................................ 599
HTML DOM textDecoration .................................................................................................. 600
HTML DOM textIndent ..........................................................................................................602
HTML DOM textTransform ....................................................................................................604
HTML DOM whiteSpace ........................................................................................................605
HTML DOM wordSpacing ......................................................................................................607
HTML DOM acceptCharset ................................................................................................... 608
HTML DOM accessKey .......................................................................................................... 610
HTML DOM action .................................................................................................................611
HTML DOM align ................................................................................................................... 613
HTML DOM alt .......................................................................................................................614
HTML DOM border ................................................................................................................616
HTML DOM charset ...............................................................................................................617
HTML DOM checked ............................................................................................................. 618
HTML DOM coords ................................................................................................................622
HTML DOM cols .................................................................................................................... 623
HTML DOM complete ........................................................................................................... 625
HTML DOM contentDocument ............................................................................................. 626
HTML DOM defaultChecked ................................................................................................. 627
HTML DOM disabled ............................................................................................................. 629
HTML DOM enctype ..............................................................................................................631
HTML DOM form ...................................................................................................................632
HTML DOM hash ................................................................................................................... 634
HTML DOM height ................................................................................................................ 636
HTML DOM host ....................................................................................................................637
HTML DOM href .................................................................................................................... 639
HTML DOM hreflang ............................................................................................................. 640
HTML DOM id ........................................................................................................................642
HTML DOM isMap .................................................................................................................643
HTML DOM innerHTML .........................................................................................................644
HTML DOM length ................................................................................................................ 646
HTML DOM longDesc ............................................................................................................ 647
HTML DOM lowsrc ................................................................................................................ 648
HTML DOM marginHeight .................................................................................................... 650
HTML DOM marginWidth ..................................................................................................... 651

HTML DOM maxLength .........................................................................................................652
HTML DOM media .................................................................................................................653
HTML DOM method ..............................................................................................................655
HTML DOM multiple ............................................................................................................. 657
HTML DOM name ................................................................................................................. 658
HTML DOM noHref ............................................................................................................... 660
HTML DOM pathname .......................................................................................................... 662
HTML DOM protocol ............................................................................................................. 663
HTML DOM readOnly ............................................................................................................665
HTML DOM rel ...................................................................................................................... 666
HTML DOM rev ......................................................................................................................668
HTML DOM rows ...................................................................................................................670
HTML DOM scrolling ............................................................................................................. 672
HTML DOM selectedIndex .................................................................................................... 674
HTML DOM shape ................................................................................................................. 677
HTML DOM size .....................................................................................................................678
HTML DOM src ...................................................................................................................... 680
HTML DOM tabIndex ............................................................................................................ 681
HTML DOM target ................................................................................................................. 683
HTML DOM text .................................................................................................................... 685
HTML DOM type ................................................................................................................... 688
HTML DOM useMap ..............................................................................................................689
HTML DOM value .................................................................................................................. 691
HTML DOM vspace ................................................................................................................692
HTML DOM width ................................................................................................................. 693
HTML DOM className ......................................................................................................... 695
HTML DOM dir ...................................................................................................................... 696
HTML DOM lang ....................................................................................................................697
HTML DOM title .................................................................................................................... 699
HTML DOM blur() ..................................................................................................................701
HTML DOM click() ................................................................................................................. 703
HTML DOM focus() ................................................................................................................704
HTML DOM reset() ................................................................................................................ 706
HTML DOM submit() ............................................................................................................. 708
HTML DOM Event ....................................................................................................709

onabort ..................................................................................................................................716
onblur .................................................................................................................................... 718
onchange ...............................................................................................................................720
onclick ................................................................................................................................... 721
ondblclick .............................................................................................................................. 723
onerror .................................................................................................................................. 725
onfocus .................................................................................................................................. 726
onkeydown ............................................................................................................................728
onkeypress ............................................................................................................................ 731
onKeyUp ................................................................................................................................ 733
onload ................................................................................................................................... 735
onmousedown ...................................................................................................................... 737
onmousemove ...................................................................................................................... 740
onmouseout ..........................................................................................................................741
onmouseover ........................................................................................................................ 743
onreset .................................................................................................................................. 746
onresize ................................................................................................................................. 747
onselect ................................................................................................................................. 748
onsubmit ............................................................................................................................... 750
onunload ............................................................................................................................... 751
altKey .............................................................................................................................752
button ............................................................................................................................754
clientX ............................................................................................................................757
clientY ............................................................................................................................758
ctrlKey ............................................................................................................................760
metaKey ........................................................................................................................ 762
relatedTarget ................................................................................................................. 763
screenX ..........................................................................................................................765
screenY .......................................................................................................................... 766
shiftKey ..........................................................................................................................768
bubbles ..........................................................................................................................770
cancelable ..................................................................................................................... 771
currentTarget .................................................................................................................773
eventPhase ............................................................................................................................774
target ............................................................................................................................. 775
timeStamp .....................................................................................................................776
type ............................................................................................................................... 778
initEvent() .............................................................................................................................. 779
preventDefault() ....................................................................................................................780
stopPropagation() ................................................................................................................. 781
JavaScript Array
Array
Array
Array
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
size length size

element ..., elementn Array()
length
Array() length 0
undefined
Array()
new new
Array
FF: Firefox, IE: Internet Explorer
FF
IE
constructor
index
input
length
prototype
Array
FF
IE
concat()
join()
pop()
5.5
push()
5.5
reverse()
shift()
5.5
slice()
sort()
splice()
5.5
toSource()
toString()
toLocaleString()
unshift()
valueOf()
JavaScript constructor
constructor
object.constructor
1
constructor
<script type="text/javascript">
var test=new Array();
if (test.constructor==Array)
{
document.write("This is an Array");
}
if (test.constructor==Boolean)
{
document.write("This is a Boolean");
}
if (test.constructor==Date)
{
document.write("This is a Date");
}
if (test.constructor==String)
{
document.write("This is a String");
}
</script>
This is an Array
2
constructor
function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}
var bill=new employee("Bill Gates","Engineer",1985);
document.write(bill.constructor);
</script>
function employee(name, jobtitle, born)

{this.name = name; this.jobtitle = job; this.born = born;}
JavaScript length
length
arrayObject.length
length 1
0 length
length Array()
length
length
undefined
length
var arr = new Array(3)
arr[0] = "John"
arr[1] = "Andy"
arr[2] = "Wendy"
document.write("Original length: " + arr.length)

document.write("<br />")
arr.length=5
document.write("New length: " + arr.length)
</script>
Original length: 3
New length: 5
JavaScript prototype
prototype
object.prototype.name=value
prototype
{
this.name=name;
this.job=job;
this.born=born;
}
employee.prototype.salary=null;
bill.salary=20000;
document.write(bill.salary);
</script>
20000
JavaScript concat()
concat()
arrayObject.concat(arrayX,arrayX,......,arrayX)
arrayX
arrayX arrayObject
concat()
1
concat() a
var a = [1,2,3];
document.write(a.concat(4,5));
</script>
1,2,3,4,5
2
concat()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
George,John,Thomas,James,Adrew,Martin
3
concat()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
arr3[0] = "William"
arr3[1] = "Franklin"
document.write(arr.concat(arr2,arr3))
</script>
George,John,Thomas,James,Adrew,Martin,William,Franklin
JavaScript join()
join()
arrayObject.join(separator)
separator
arrayObject
separator
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join())
</script>
George,John,Thomas
2
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
</script>
George.John.Thomas
JavaScript pop()
pop()
arrayObject.pop()
arrayObject
pop() arrayObject 1
pop() undefined
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr)
document.write(arr.pop())
document.write(arr)
</script>
George,John,Thomas
Thomas
George,John
JavaScript push()
push()
arrayObject.push(newelement1,newelement2,....,newelementX)
newelement1
newelement2
newelementX
push() arrayObject arrayObject

push() pop()
unshift()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>
George,John,Thomas
4
George,John,Thomas,James
JavaScript reverse()
reverse()
arrayObject.reverse()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.reverse())
</script>
George,John,Thomas
Thomas,John,George
JavaScript shift()
shift()
arrayObject.shift()

shift() undefined
arrayObject
pop()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.shift() + "<br />")
document.write(arr)
</script>
George,John,Thomas
George
John,Thomas
JavaScript slice()
slice()

arrayObject.slice(start,end)
start
-1 -2
end
start
start end arrayObject
Array.splice()
end slice() start
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.slice(1) + "<br />")

document.write(arr)
</script>
George,John,Thomas
John,Thomas
George,John,Thomas
2
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr.slice(2,4) + "<br />")
document.write(arr)
</script>
Thomas,James
JavaScript sort()
sort()
arrayObject.sort(sortby)
sortby
a b
a b a b 0
a b 0
a b 0
arr[0]
arr[1]
arr[2]
arr[3]
arr[4]
arr[5]
=
=
=
=
=
=
"George"
"John"
"Thomas"
"James"
"Adrew"
"Martin"

document.write(arr.sort())
</script>
Adrew,George,James,John,Martin,Thomas
2
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr.sort())
</script>
10,5,40,25,1000,1
1,10,1000,25,40,5
function sortNumber(a,b)
{
return a - b
}
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr.sort(sortNumber))
</script>
10,5,40,25,1000,1
1,5,10,25,40,1000
JavaScript splice()
splice() //
arrayObject.splice(index,howmany,item1,.....,itemX)
index
howmany
item1, ..., itemX
Array
splice() index
arrayObject
JavaScript
1.2
splice()
splice() slice() splice()
arr[0] = "George"
arr[1]
arr[2]
arr[3]
arr[4]
arr[5]
=
=
=
=
=
"John"
"Thomas"
"James"
"Adrew"
"Martin"

arr.splice(2,0,"William")
</script>
George,John,William,Thomas,James,Adrew,Martin
2
index 2
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr)
</script>
George,John,William,James,Adrew,Martin
3
index 2 ("Thomas") ("William")
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr)
</script>
George,John,William,Martin
JavaScript toSource()
toSource()
Array
toSource() JavaScript
object.toSource()
Gecko Firefox IESafariChromeOpera
toSource()
{
this.name=name;
this.job=job;
this.born=born;
}
document.write(bill.toSource());
</script>
({name:"Bill Gates", job:"Engineer", born:1985})
JavaScript toString()
toString()
arrayObject.toString()
arrayObject join()

JavaScript
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.toString())
</script>
George,John,Thomas
JavaScript toLocaleString()
arrayObject.toLocaleString()

arrayObject
toLocaleString()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.toLocaleString())
</script>
George, John, Thomas
JavaScript unshift()
unshift()
arrayObject.unshift(newelement1,newelement2,....,newelementX)
newelement1
newelement2
newelementX
arrayObject
unshift() arrayObject
0
1
unshift()
unshift() Internet Explorer

push()
var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.unshift("William") + "<br />")
document.write(arr)
</script>
George,John,Thomas
4
William,George,John,Thomas
JavaScript valueOf()
valueOf() Array
Array
valueOf() JavaScript
arrayObject.valueOf()
JavaScript Boolean
Boolean
Boolean "true" "false"
Boolean
new Boolean(value); //
Boolean(value);
//
value
newBoolean()
Boolean
newBoolean()
value 0-0null""falseundefined NaN

false true value "false"
Boolean
FF
IE
constructor
Boolean
prototype
Boolean
FF
IE
toSource()
toString()
valueOf()
Boolean
Boolean
JavaScript Boolean
Boolean toString()
toString() JavaScript
JavaScript Boolean
toString()
JavaScript
ECMAScript
class ECMAScript
constructor Boolean
object.constructor
constructor
var test=new Boolean();
{
}
{
}
{
}
{
}
</script>
This is a Boolean
prototype
prototype
{
this.name=name;
this.job=job;
this.born=born;
}
bill.salary=20000;
</script>
20000
toSource()
object.toSource()
Internet Explorer
toSource()
{
this.name=name;
this.job=job;
this.born=born;
}
</script>
toString()
booleanObject.toString()
booleanObject "true" "false"
Boolean TypeError
Boolean
Boolean
var boo = new Boolean(true)
document.write(boo.toString())
</script>
true
valueOf() Boolean
booleanObject.valueOf()
booleanObject
Boolean TypeError
Boolean valueOf()
var boo = new Boolean(false)
document.write(boo.valueOf())
</script>
false
JavaScript Date
Date
Date
Date
var myDate=new Date()
Date
Date
FF
IE
constructor
Date
prototype
Date
FF
IE
Date()
getDate()
Date (1 ~ 31)
getDay()
Date (0 ~ 6)
getMonth()
Date (0 ~ 11)
getFullYear()
Date
getYear()
getFullYear()
getHours()
Date (0 ~ 23)
getMinutes()
Date (0 ~ 59)
getSeconds()
Date (0 ~ 59)
getMilliseconds()
Date (0 ~ 999)
getTime()
1970 1 1
getTimezoneOffset()
(GMT)
getUTCDate()
Date (1 ~ 31)
getUTCDay()
Date (0 ~ 6)
getUTCMonth()
Date (0 ~ 11)
getUTCFullYear()
Date
getUTCHours()
Date (0 ~ 23)
getUTCMinutes()
Date (0 ~ 59)
getUTCSeconds()
Date (0 ~ 59)
getUTCMilliseconds()
Date (0 ~ 999)
parse()
1970 1 1
setDate()
Date (1 ~ 31)
setMonth()
Date (0 ~ 11)
setFullYear()
Date
setYear()
setFullYear()
setHours()
Date (0 ~ 23)
setMinutes()
Date (0 ~ 59)
setSeconds()
Date (0 ~ 59)
setMilliseconds()
Date (0 ~ 999)
setTime()
Date
setUTCDate()
Date (1 ~ 31)
setUTCMonth()
Date (0 ~ 11)
setUTCFullYear()
Date
setUTCHours()
Date (0 ~ 23)
setUTCMinutes()
Date (0 ~ 59)
setUTCSeconds()
Date (0 ~ 59)
setUTCMilliseconds()
Date (0 ~ 999)
toSource()
toString()
Date
toTimeString()
Date
toDateString()
Date
toGMTString()
toUTCString()
toUTCString()
Date
toLocaleString()
Date
toLocaleTimeString()
Date
toLocaleDateString()
Date
UTC()
1970 1 1
valueOf()
Date
constructor Date
object.constructor
constructor
var test=new Date();
{
}
{
}
{
}
{
}
</script>
This is a Date
prototype
prototype
{
this.name=name;
this.job=job;
this.born=born;
}
bill.salary=20000;
</script>
20000
JavaScript Date()
Date()
Date()
document.write(Date())
</script>
Thu Oct 10 2013 19:40:14 GMT+0800 ()
JavaScript Date()
getDate()
dateObject.getDate()
dateObject 1 ~ 31
Date
var d = new Date()
document.write(d.getDate())
</script>
10
2
var birthday = new Date("July 21, 1983 01:15:00")
document.write(birthday.getDate())
</script>
21
JavaScript getDay()
getDay()
dateObject.getDay()
dateObject 0 6
Date
var d=new Date()
document.write(d.getDay())
</script>
4
2
var d=new Date()
var weekday=new Array(7)
weekday[0]="Sunday"
weekday[1]="Monday"
weekday[2]="Tuesday"
weekday[3]="Wednesday"
weekday[4]="Thursday"
weekday[5]="Friday"
weekday[6]="Saturday"
document.write("Today it is " + weekday[d.getDay()])
</script>
Today it is Thursday
JavaScript getMonth()
getMonth()
dateObject.getMonth()
dateObject 0 11
Date
var d=new Date()
document.write(d.getMonth())
</script>
9
2

var d=new Date()
var month=new Array(12)
month[0]="January"
month[1]="February"
month[2]="March"
month[3]="April"
month[4]="May"
month[5]="June"
month[6]="July"
month[7]="August"
month[8]="September"
month[9]="October"
month[10]="November"
month[11]="December"
document.write("The month is " + month[d.getMonth()])
</script>
The month is October
JavaScript getFullYear()
getFullYear() 4
dateObject.getFullYear()

dateObject
Date
var d = new Date()
document.write(d.getFullYear())
</script>
2013
2
var born = new Date("July 21, 1983 01:15:00")
document.write("I was born in " + born.getFullYear())
</script>
I was born in 1983
JavaScript getYear()
getYear()
dateObject.getYear()
Date
getYear() 4 1900 1999

getYear() 1900 1999 4
Date
ECMAScript v3 JavaScript getFullYear()
var d = new Date()
document.write(d.getYear())
</script>
113
2

document.write("I was born in " + born.getYear())
</script>
I was born in 83
JavaScript getHours()
getHours()
dateObject.getHours()
dateObject 0 23 11
getHours()
10
Date

var d = new Date()
document.write(d.getHours())
</script>
19
2
document.write(born.getHours())
</script>
JavaScript getMinutes()
getMinutes()
dateObject.getMinutes()

dateObject 0 ~ 59
getMinutes()
10
Date
var d = new Date()
document.write(d.getMinutes())
</script>
50
2
document.write(born.getMinutes())
</script>
15
JavaScript getSeconds()
getSeconds()
dateObject.getSeconds()
dateObject 0 ~ 59
getSeconds()
10
Date
var d = new Date()
document.write(d.getSeconds())
</script>
8
2

var Birthday = new Date("July 21, 1983 01:15:00")
document.write(Birthday.getSeconds())
</script>
JavaScript getMilliseconds()
getMilliseconds()
dateObject.getMilliseconds()
dateObject 0 ~ 999
getMilliseconds()
100 10
Date

var d = new Date()
document.write(d.getMilliseconds())
</script>
120
2
document.write(born.getMilliseconds())
</script>
JavaScript getTime()
getTime() 1970 1 1
dateObject.getTime()

dateObject 1970 1 1 GMT
Date
1
1970/01/01
var d = new Date()
document.write(d.getTime() + " milliseconds since 1970/01/01")
</script>
1381406194654 milliseconds since 1970/01/01

2
1970/01/01
var minutes = 1000*60
var hours = minutes*60
var days = hours*24
var years = days*365
var d = new Date()
var t = d.getTime()
var y = t/years
document.write("It's been: " + y + " years since 1970/01/01!")
</script>

It's been: 43.804103077562154 years since 1970/01/01!
JavaScript getTimezoneOffset()
getTimezoneOffset()
dateObject.getTimezoneOffset()
GMT
getTimezoneOffset() GMT UTC

JavaScript
Date
1
GMT
var d = new Date()

document.write(d.getTimezoneOffset())
</script>
-480
2
GMT +/-
var d = new Date()
var gmtHours = d.getTimezoneOffset()/60
document.write("The local time zone is: GMT " + gmtHours)
</script>
The local time zone is: GMT -8
JavaScript getUTCDate()
getUTCDate() (UTC)
dateObject.getUTCDate()
dateObject 1 ~ 31

Date
(UTC)
1
UTC
var d = new Date()
document.write(d.getUTCDate())
</script>
10
2
UTC
var birthday = new Date("July 21, 1983 01:15:00")
document.write(birthday.getUTCDate())
</script>
21
JavaScript getUTCDay()
getUTCDay()
dateObject.getUTCDay()
dateObject 0 ~ 6
Date
(UTC)
1
UTC
var d=new Date()
document.write(d.getUTCDay())
</script>
4
2

var d=new Date()
var weekday=new Array(7)
weekday[0]="Sunday"
weekday[1]="Monday"
weekday[2]="Tuesday"
weekday[3]="Wednesday"
weekday[4]="Thursday"
weekday[5]="Friday"
weekday[6]="Saturday"
document.write("Today it is " + weekday[d.getUTCDay()])
</script>
Today it is Thursday
JavaScript getUTCMonth()
getUTCMonth() UTC
dateObject.getUTCMonth()
dateObject 0 ~ 11
Date 1 0
Date
(UTC)
var d=new Date()
document.write(d.getUTCMonth())
</script>
9
2
var d=new Date()
var month=new Array(12)
month[0]="January"
month[1]="February"
month[2]="March"
month[3]="April"
month[4]="May"
month[5]="June"
month[6]="July"
month[7]="August"
month[8]="September"
month[9]="October"
month[10]="November"
month[11]="December"
document.write("The month is " + month[d.getUTCMonth()])
</script>
The month is October
JavaScript getUTCFullYear()
getUTCFullYear() (UTC)
dateObject.getUTCFullYear()
dateObject
Date
(UTC)
1
In this example we get the current year and print it:
var d = new Date()
document.write(d.getUTCFullYear())
</script>
2013
2
Here we will extract the year out of the specific date:
document.write("I was born in " + born.getUTCFullYear())
</script>
I was born in 1983
JavaScript getUTCHours()
getUTCHours() (UTC)
dateObject.getUTCHours()
dateObject 0 ~ 23 11
getUTCHours()
10
Date
(UTC)
1
UTC
var d = new Date()
document.write(d.getUTCHours())
</script>
12
2
UTC
document.write(born.getUTCHours())
</script>
17
JavaScript getUTCMinutes()
getUTCMinutes() (UTC)
dateObject.getUTCMinutes()
dateObject 0 ~ 59
getUTCMinutes()
10
Date
(UTC)
1
UTC
var d = new Date()
document.write(d.getUTCMinutes())
</script>
2
UTC
document.write(born.getUTCMinutes())
</script>
15
JavaScript getUTCSeconds()
getUTCSeconds()
dateObject.getUTCSeconds()
dateObject 0 ~ 59
getUTCSeconds()
10
Date
(UTC)

1
UTC
var d = new Date()
document.write(d.getUTCSeconds())
</script>
24
2
UTC
var Birthday = new Date("July 21, 1983 01:15:00")
document.write(Birthday.getUTCSeconds())
</script>
JavaScript getUTCMilliseconds()
getUTCMilliseconds() (UTC)

dateObject.getUTCMilliseconds()
dateObject 0 ~ 999
getUTCMilliseconds()
100 10
Date
(UTC)
1
UTC
var d = new Date()
document.write(d.getUTCMilliseconds())
</script>
546
2
UTC
document.write(born.getUTCMilliseconds())
</script>
0
1
JavaScript parse()
parse() 1970/1/1
Date.parse(datestring)
datestring
1970/1/1 GMT
Date Date.parse()
dateobject.parse()
Date.parse() Date

1
1970/01/01 2005/07/08
var d = Date.parse("Jul 8, 2005")
document.write(d)
</script>
1120752000000
2
var minutes = 1000 * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var t = Date.parse("Jul 8, 2005")
var y = t/years
document.write("It's been: " + y + " years from 1970/01/01")
document.write(" to 2005/07/08!")
</script>
It's been: 35.538812785388124 years from 1970/01/01 to 2005/07/08!
JavaScript setDate()
setDate()
dateObject.setDate(day)
day
1 ~ 31
ECMAScript
Date
setDate() 15
var d = new Date()
d.setDate(15)
document.write(d)
</script>
Tue Oct 15 2013 20:06:43 GMT+0800 ()
JavaScript setMonth()
setMonth()
dateObject.setMonth(month,day)
month
0 ~ 11
day
1 ~ 31
EMCAScript
ECMAScript
Date
1
setMonth() d 0
var d=new Date()
d.setMonth(0)
document.write(d)
</script>

Thu Jan 10 2013 20:08:07 GMT+0800 ()
2
setMonth() d 0
20
var d=new Date()
d.setMonth(0,20)
document.write(d)
</script>
Sun Jan 20 2013 20:08:07 GMT+0800 ()
JavaScript setFullYear()
setFullYear()
dateObject.setFullYear(year,month,day)
year
month
0 ~ 11
day
1 ~ 31
Date
1
setFullYear() 1992
var d = new Date()
d.setFullYear(1992)
document.write(d)
</script>
Sat Oct 10 1992 20:09:00 GMT+0800 ()

2
setFullYear() November 3, 1992
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
</script>
Tue Nov 03 1992 20:09:00 GMT+0800 ()
JavaScript setYear()
setYear()
dateObject.setYear(year)
year
ECMAScript
year setYear(91) 1991

1990 1999
Date
ECMAScript v3 JavaScript setFullYear()
setYear() 1891
var d = new Date()
d.setYear(1891)
document.write(d)
</script>
Sat Oct 10 1891 20:10:34 GMT+0800 ()
JavaScript setHours()
setHours()
dateObject.setHours(hour,min,sec,millisec)
hour
0 ~ 23 11
min
0 ~ 59 EMCAScript
sec
0 ~ 59 EMCAScript
millisec
0 ~ 999 EMCAScript
ECMAScript
JavaScript
0
Date

1
setHours() 15
var d = new Date()
d.setHours(15)
document.write(d)
</script>
Thu Oct 10 2013 15:11:16 GMT+0800 ()

2
setHours() 15:35:01
var d = new Date()
d.setHours(15,35,1)
document.write(d)
</script>
Thu Oct 10 2013 15:35:01 GMT+0800 ()
JavaScript setMinutes()
setMinutes()

dateObject.setMinutes(min,sec,millisec)
min
0 ~ 59
sec
0 ~ 59 EMCAScript
millisec
0 ~ 999 EMCAScript
ECMAScript
JavaScript
0
Date
setMinutes() 01
var d = new Date()
d.setMinutes(1)
document.write(d)
</script>
Thu Oct 10 2013 20:01:05 GMT+0800 ()
JavaScript setSeconds()
The setSeconds() method is used to set the seconds of a specified time.
dateObject.setSeconds(sec,millisec)
sec
0 ~ 59
millisec
0 ~ 999 EMCAScript
ECMAScript
JavaScript
0
Date
setSeconds() 01
var d = new Date()
d.setSeconds(1)
document.write(d)
</script>

Thu Oct 10 2013 20:15:01 GMT+0800 ()
JavaScript setMilliseconds()
setMilliseconds()
dateObject.setMilliseconds(millisec)
millisec
dateObject 0 ~ 999
JavaScript
0
Date
setMilliseconds() 001
var d = new Date()
d.setMilliseconds(1)
document.write(d)
</script>
Thu Oct 10 2013 20:16:10 GMT+0800 ()
JavaScript setTime()
setTime() Date
dateObject.setTime(millisec)
millisec
GMT 1970 1 1
Date() Date.UTC()
Date.parse()
millisec ECMAScript
Date
1
1970/01/01 77771564221
var d = new Date()

d.setTime(77771564221)
document.write(d)
</script>
Mon Jun 19 1972 11:12:44 GMT+0800 ()

2
1970/01/01 77771564221
var d = new Date()
d.setTime(-77771564221)
document.write(d)
</script>
Sun Jul 16 1967 04:47:15 GMT+0800 ()
JavaScript setUTCDate()
setUTCDate() (UTC)
dateObject.setUTCDate(day)
day
dateObject 1 ~ 31
Date
(UTC)
setUTCDate() 15
var d = new Date()
d.setUTCDate(15)
document.write(d)
</script>
Tue Oct 15 2013 20:18:29 GMT+0800 ()
JavaScript setUTCMonth()
setUTCMonth() (UTC)
dateObject.setUTCMonth(month,day)
month
dateObject
0 ~ 11
day
1 ~ 31 dateObject
Date
(UTC)
1
setUTCMonth() 0
var d=new Date()
d.setUTCMonth(0)
document.write(d)
</script>
Thu Jan 10 2013 20:19:20 GMT+0800 ()

2
setUTCMonth() 0 20
var d=new Date()
d.setUTCMonth(0,20)
document.write(d)
</script>
Sun Jan 20 2013 20:19:20 GMT+0800 ()
JavaScript setUTCFullYear()
setUTCFullYear() (UTC)
dateObject.setUTCFullYear(year,month,day)
year
dateObject
1999 99
month
dateObject
0 ~ 11
day
dateObject
1 ~ 31
Date
(UTC)

1
setUTCFullYear() 1992
var d = new Date()
d.setUTCFullYear(1992)
document.write(d)
</script>
Sat Oct 10 1992 20:20:28 GMT+0800 ()

2
setUTCFullYear() November 3, 1992
var d = new Date()
d.setUTCFullYear(1992,10,3)
document.write(d)
</script>
Tue Nov 03 1992 20:20:28 GMT+0800 ()
JavaScript setUTCHours()
setUTCHours() (UTC) 0 - 23

dateObject.setUTCHours(hour,min,sec,millisec)
hour
dateObject
0 ~ 23
min
dateObject
0 ~ 59
sec
dateObject
0 ~ 59
millisec
dateObject
1 ~ 999
min, sec millisec getUTCMinutes, getUTCSeconds

getUTCMilliseconds
setUTCHours Date
sec 100 1 (min + 1) 40
Date
(UTC)
1
setUTCHours() UTC 23
var d = new Date();

d.setUTCHours(23);
document.write(d);
</script>
Fri Oct 11 2013 07:21:22 GMT+0800 ()

2
setUTCHours() UTC 23:15:06
var d = new Date();
d.setUTCHours(23,15,6);
document.write(d);
</script>
Fri Oct 11 2013 07:15:06 GMT+0800 ()
JavaScript setUTCMinutes()
setUTCMinutes() (UTC)
dateObject.setUTCMinutes(min,sec,millisec)
min
dateObject
0 ~ 59
sec
dateObject
0 ~ 59
millisec
dateObject
0 ~ 999
JavaScript
0
Date
(UTC)
setUTCMinutes() 01
var d = new Date()
d.setUTCMinutes(1)
document.write(d)
</script>
Thu Oct 10 2013 20:01:54 GMT+0800 ()
JavaScript setUTCSeconds()
setUTCSeconds() (UTC)
dateObject.setUTCSeconds(sec,millisec)
sec
dateObject
0 ~ 59
millisec
dateObject
0 ~ 999
JavaScript
0
Date
(UTC)
setUTCSeconds() 01
var d = new Date()
d.setUTCSeconds(1)
document.write(d)
</script>
Thu Oct 10 2013 20:23:01 GMT+0800 ()
JavaScript setUTCMilliseconds()
setUTCMilliseconds() (UTC)
dateObject.setUTCMilliseconds(millisec)
millisec
dateObject
0 ~ 999
JavaScript
0
Date
(UTC)
setUTCMilliseconds() 001
var d = new Date()

d.setUTCMilliseconds(1)
document.write(d)
</script>
Thu Oct 10 2013 20:24:44 GMT+0800 ()
toSource()
object.toSource()
Internet Explorer
toSource()
{
this.name=name;
this.job=job;
this.born=born;
}
</script>
toString() Date
dateObject.toString()
dateObject
var d = new Date()
document.write (d.toString())
</script>
Thu Oct 10 2013 20:26:41 GMT+0800 ()
JavaScript toTimeString()
toTimeString() Date
dateObject.toTimeString()
dateObject
JavaScript toDateString()
toDateString() Date
dateObject.toDateString()
dateObject
JavaScript toGMTString()
toGMTString() (GMT) Date
dateObject.toGMTString()
dateObject GMT
toUTCString()
1
GMT
var d = new Date()
document.write (d.toGMTString())
</script>
Thu, 10 Oct 2013 12:28:37 GMT

2
GMT
document.write(born.toGMTString())
</script>
Wed, 20 Jul 1983 17:15:00 GMT
JavaScript toUTCString()
toUTCString() (UTC) Date
dateObject.toUTCString()
dateObject
1
toUTCString() UTC
var d = new Date()
document.write (d.toUTCString())
</script>

Thu, 10 Oct 2013 12:29:20 GMT
2
UTC
document.write(born.toUTCString())
</script>
Wed, 20 Jul 1983 17:15:00 GMT
toLocaleString() Date
dateObject.toLocaleString()
dateObject

var d = new Date()
document.write(d.toLocaleString())
</script>
2013 10 10 8:29:53
2
document.write(born.toLocaleString())
</script>
1983 7 21 1:15:00
JavaScript toLocaleTimeString()
toLocaleTimeString() Date
dateObject.toLocaleTimeString()

dateObject
JavaScript toLocaleDateString()
toLocaleDateString() Date
dateObject.toLocaleDateString()
dateObject
JavaScript UTC()
UTC() 1970 1 1
Date.UTC(year,month,day,hours,minutes,seconds,ms)
year
month
0 ~ 11
day
1 ~ 31
hours
0 ~ 23
minutes
0 ~ 59
seconds
0 ~ 59
ms
0 ~ 999
GMT 1970 1 1
Date.UTC() Date()
Date
Date.UTC() UTC GMT UTC
Date() Date.setTime()
1
1970/01/01 2005/07/08
var d = Date.UTC(2005,7,8)
document.write(d)
</script>
1123459200000
2
var minutes = 1000 * 60
var hours = minutes * 60

var days = hours * 24
var years = days * 365
var t = Date.UTC(2005,7,8)
var y = t/years
document.write("It's been: " + y + " years from 1970/01/01")
document.write(" to 2005/07/08!")
</script>
It's been: 35.62465753424657 years from 1970/01/01 to 2005/07/08!
valueOf() Date
Date
date Date.getTime
JavaScript Math
Math
Math
Math
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
Math Date String Math()
Math.sin() Math
Math
FF
IE
e 2.718
LN2
2 0.693
LN10
10 2.302
LOG2E
2 e 1.414
LOG10E
10 e 0.434
PI
3.14159
SQRT1_2
2 0.707
SQRT2
2 1.414
Math
FF
IE
abs(x)
acos(x)
asin(x)
atan(x)
-PI/2 PI/2 x
atan2(y,x)
x (x,y) -PI/2 PI/2 1
ceil(x)
cos(x)
exp(x)
floor(x)
log(x)
max(x,y)
x y
min(x,y)
x y
pow(x,y)
x y
random()
0 ~ 1
round(x)
sin(x)
sqrt(x)
tan(x)
toSource()
valueOf()
Math
JavaScript E
Math.E e 2.71828
Math.E
Euler
document.write("Euler's number: " + Math.E);
</script>
Euler's number: 2.718281828459045
JavaScript LN2
LN2 loge2 2 0.69314718055994528623
Math.LN2
2
document.write("LN2: " + Math.LN2);
</script>
LN2: 0.6931471805599453
JavaScript LN10
LN10 loge10 10 2.3025850929940459011
Math.LN10

10
document.write("LN10: " + Math.LN10);
</script>
LN10: 2.302585092994046
JavaScript LOG2E
LOG2E log2e 2 e 1.442695040888963387
Math.LOG2E
2 e
document.write("LOG2E: " + Math.LOG2E);
</script>
LOG2E: 1.4426950408889634
JavaScript LOG10E
LOG10E log10e 10 e 0.43429448190325181667
Math.LOG10E
10 e
document.write("LOG10E: " + Math.LOG10E);
</script>
LOG10E: 0.4342944819032518
JavaScript PI
PI 3.141592653589793
Math.PI

PI
document.write("PI: " + Math.PI);
</script>
PI: 3.141592653589793
JavaScript SQRT1_2
SQRT1_2 2 0.7071067811865476
Math.SQRT1_2
1/2
document.write("SQRT1_2: " + Math.SQRT1_2);
</script>
SQRT1_2: 0.7071067811865476
JavaScript SQRT2
SQRT2 2 1.4142135623730951
Math.SQRT2
2
document.write("SQRT2: " + Math.SQRT2);
</script>
SQRT2: 1.4142135623730951
JavaScript abs()
abs()
Math.abs(x)
document.write(Math.abs(7.25) + "<br />")
document.write(Math.abs(-7.25) + "<br />")
document.write(Math.abs(7.25-10))
</script>
7.25
7.25
2.75
JavaScript acos()
acos()
Math.acos(x)
-1.0 ~ 1.0

x 0 PI
x -1.0 ~ 1.0 NaN

x -1 PI
document.write(Math.acos(0.64) + "<br />")
document.write(Math.acos(0) + "<br />")
document.write(Math.acos(-1) + "<br />")
document.write(Math.acos(1) + "<br />")
document.write(Math.acos(2))
</script>
0.8762980611683406
1.5707963267948965
3.141592653589793
0
NaN
JavaScript asin()
asin()

Math.asin(x)
-1.0 ~ 1.0
x -PI/2 PI/2
x -1.0 ~ 1.0 NaN

x 1 PI/2
document.write(Math.asin(0.64) + "<br />")
document.write(Math.asin(0) + "<br />")
document.write(Math.asin(-1) + "<br />")
document.write(Math.asin(1) + "<br />")
document.write(Math.asin(2))
</script>
0.6944982656265559
0
-1.5707963267948965
1.5707963267948965
NaN
JavaScript atan()
atan()
Math.atan(x)
x -PI/2 PI/2
atan()
document.write(Math.atan(0.50) + "<br />")
document.write(Math.atan(-0.50) + "<br />")
document.write(Math.atan(5) + "<br />")
document.write(Math.atan(10) + "<br />")
document.write(Math.atan(-5) + "<br />")
document.write(Math.atan(-10))
</script>
0.4636476090008061
-0.4636476090008061
1.373400766945016
1.4711276743037347
-1.373400766945016
-1.4711276743037347
JavaScript atan2()
atan2() x (x,y)
Math.atan2(y,x)
-PI PI X (x,y)
Y X
atan2() (x,y)
document.write(Math.atan2(0.50,0.50) + "<br />")
document.write(Math.atan2(-0.50,-0.50) + "<br />")
document.write(Math.atan2(5,5) + "<br />")
document.write(Math.atan2(10,20) + "<br />")
document.write(Math.atan2(-5,-5) + "<br />")
document.write(Math.atan2(-10,10))
</script>
0.7853981633974483
-2.356194490192345
0.7853981633974483
0.4636476090008061
-2.356194490192345
-0.7853981633974483
JavaScript ceil()
ceil()
Math.ceil(x)
ceil()

ceil()
document.write(Math.ceil(0.60) + "<br />")
document.write(Math.ceil(5) + "<br />")
document.write(Math.ceil(-5.1) + "<br />")
document.write(Math.ceil(-5.9))
</script>
1
1
5
6
-5
-5
JavaScript cos()
cos()
Math.cos(x)

x -1.0 1.0
document.write(Math.cos(3) + "<br />")
document.write(Math.cos(-3) + "<br />")
document.write(Math.cos(0) + "<br />")
document.write(Math.cos(Math.PI) + "<br />")
document.write(Math.cos(2*Math.PI))
</script>
-0.9899924966004454
-0.9899924966004454
1
-1
1
JavaScript exp()
exp() e x
Math.exp(x)
e x e 2.71828
exp()
document.write(Math.exp(1) + "<br />")
document.write(Math.exp(-1) + "<br />")
</script>
2.718281828459045
0.36787944117144233
148.4131591025766
22026.465794806718
JavaScript floor()
floor()
Math.floor(x)
x x
floor()
In this example we will use the floor() method on different numbers:

document.write(Math.floor(0.60) + "<br />")
document.write(Math.floor(5) + "<br />")
document.write(Math.floor(-5.1) + "<br />")
document.write(Math.floor(-5.9))
</script>
0
0
5
5
-6
-6
JavaScript log()
log()
Math.log(x)
x 0
log()
document.write(Math.log(2.7183) +
document.write(Math.log(2) + "<br
document.write(Math.log(-1))
</script>
"<br />")
/>")
/>")
/>")
1.0000066849139877
0.6931471805599453
0
-Infinity
NaN
JavaScript max()
max()
Math.max(x...)
0 ECMASCript v3
-Infinity NaN
NaN
max()
document.write(Math.max(5,7) + "<br />")
document.write(Math.max(-3,5) + "<br />")
document.write(Math.max(-3,-5) + "<br />")
document.write(Math.max(7.25,7.30))
</script>

7
5
-3
7.3
JavaScript min()
min()
Math.min(x,y)
0 ECMASCript v3
Infinity NaN
NaN
min()
document.write(Math.min(5,7) + "<br />")
document.write(Math.min(-3,5) + "<br />")
document.write(Math.min(-3,-5) + "<br />")
document.write(Math.min(7.25,7.30))
</script>

5
-3
-5
7.25
JavaScript pow()
pow() x y
Math.pow(x,y)
x y
NaN
Infinity
pow()
document.write(Math.pow(0,0) + "<br />")

document.write(Math.pow(-2,3) + "<br />")
document.write(Math.pow(-2,4) + "<br />")
</script>
1
0
1
1
8
-8
16
16
JavaScript random()
random() 0 ~ 1
Math.random()
0.0 ~ 1.0

0 1
document.write(Math.random())
</script>
0.21242664568126202
JavaScript round()
round()
Math.round(x)
0.5
3.5 4 -3.5 -3
document.write(Math.round(0.60) + "<br />")
document.write(Math.round(-4.40) + "<br />")
document.write(Math.round(-4.60))
</script>
1
1
0
-4
-5
JavaScript sin()
sin()
Math.sin(x)
0.017453293 2PI/360

x -1.0 1.0
document.write(Math.sin(3) + "<br />")
document.write(Math.sin(-3) + "<br />")
document.write(Math.sin(0) + "<br />")
document.write(Math.sin(Math.PI) + "<br />")
document.write(Math.sin(Math.PI/2)
</script>
0.1411200080598672
-0.1411200080598672
0
1.2246063538223772e-16
1
JavaScript sqrt()
sqrt()
Math.sqrt(x)
x x 0 NaN
Math.pow()
var
var
var
var
var
a=Math.sqrt(0);
b=Math.sqrt(1);
c=Math.sqrt(9);
d=Math.sqrt(0.64);
e=Math.sqrt(-9);
0
1
3
0.8
NaN
JavaScript tan()
tan()
Math.tan(x)
0.017453293 2PI/360
document.write(Math.tan(0.50) + "<br />")
document.write(Math.tan(-0.50) + "<br />")
document.write(Math.tan(5) + "<br />")
document.write(Math.tan(10) + "<br />")
document.write(Math.tan(-5) + "<br />")
document.write(Math.tan(-10))
</script>
0.5463024898437905
-0.5463024898437905
-3.380515006246586
0.6483608274590866
3.380515006246586
-0.6483608274590866
toSource()

object.toSource()
Internet Explorer
toSource()
{
this.name=name;
this.job=job;
this.born=born;
}
</script>
valueOf() Math
Math

mathObject.valueOf()
Number
Number
Number
var myNum=new Number(value);
var myNum=Number(value);
value Number
Number() new Number

new Number()
NaN
Number
FF
IE
constructor
Number
1.0
4.0
MAX_VALUE
1.0
4.0
MIN_VALUE
1.0
4.0
NaN
1.0
4.0
NEGATIVE_INFINITY
1.0
4.0
POSITIVE_INFINITY
1.0
4.0
prototype
1.0
4.0
Number
FF
IE
toString
1.0
4.0
toLocaleString
1.0
4.0
toFixed
1.0
5.5
toExponential
1.0
5.5
toPrecision
1.0
5.5
valueOf
Number
1.0
4.0
Number
JavaScript JavaScript Number
JavaScript
JavaScript 1.1 Number() Number
Number() new
Number()
NaN
5 5
NaN
Number() Number
MAX_VALUE
var big = Number.MAX_VALUE
var n= new Number(2);

var big = n.MAX_VALUE
toString() Number Number
Number() JavaScript
Number Number Number
var n = 123;
var binary_value = n.toString(2);
JavaScript
ECMAScript
class ECMAScript
constructor Boolean
object.constructor
constructor
var test=new Boolean();
{
}
{
}
{
}
{
}
</script>
This is a Boolean
JavaScript MAX_VALUE
MAX_VALUE JavaScript 1.7976931348623157 x

10308
Number.MAX_VALUE
JavaScript
document.write(Number.MAX_VALUE);
</script>
1.7976931348623157e+308
JavaScript MIN_VALUE
MIN_VALUE JavaScript 0
5 x 10-324
Number.MIN_VALUE
JavaScript
document.write(Number.MIN_VALUE);
</script>
5e-324
JavaScript NaN
NaN Number
isNaN() NaN

Number.NaN
Number.NaN
parseInt() parseFloat()
Number.NaN
JavaScript NaN Number.NaNNaN
Number.NaN
isNaN()
ECMAScript v1 NaN Number.NaN
isNaN() NaN
NaN
var Month=30;
if (Month < 1 || Month > 12)
{
Month = Number.NaN;
}
document.write(Month);
</script>
Nan
JavaScript NEGATIVE_INFINITY
NEGATIVE_INFINITY Number.MIN_VALUE
Number.NEGATIVE_INFINITY
Number.NEGATIVE_INFINITY JavaScript
-Number.MAX_VALUE
JavaScript NEGATIVE_INFINITY -Infinity
0
ECMAScript v1 -Infinity Number.NEGATIVE_INFINITY
NEGATIVE_INFINITY
var x=(-Number.MAX_VALUE)*2
if (x==Number.NEGATIVE_INFINITY)
{
document.write("Value of x: " + x);
}
</script>
Value of x: -Infinity
JavaScript POSITIVE_INFINITY
POSITIVE_INFINITY Number.MAX_VALUE
Number.POSITIVE_INFINITY
Number.POSITIVE_INFINITY JavaScript
Number.MAX_VALUE
JavaScript POSITIVE_INFINITY Infinity
0
ECMAScript v1 Infinity Number.POSITIVE_INFINITY
POSITIVE_INFINITY
var x=(Number.MAX_VALUE)*2
if (x==Number.POSITIVE_INFINITY)
{
document.write("Value of x: " + x);
}
</script>
Value of x: Infinity
toString() Number
NumberObject.toString(radix)
radix
2 ~ 36 10
10 ECMAScript
radix 2 NumberObject
Number TypeError
var number = new Number(1337);
document.write (number.toString())
</script>
1337
toLocaleString() Number
NumberObject.toLocaleString()
Number TypeError
JavaScript toFixed()
toFixed() Number
NumberObject.toFixed(num)
num
0 ~ 20 0 20
0

NumberObject num
0 num
le+21 NumberObject.toString()
num RangeError0 ~ 20
Number TypeError
Show the number 13.37 with one decimal:

var num = new Number(13.37);
document.write (num.toFixed(1))
</script>
Show the number 13.37 with one decimal:

13.4
JavaScript toExponential()
toExponential()
NumberObject.toExponential(num)
num
0 ~ 20 0 20
NumberObject
num 0
Number TypeError
Show 10,000 as an exponential notation:

var num = new Number(10000);
document.write (num.toExponential(1))
</script>

1.0e+4
JavaScript toPrecision()
toPrecision()

NumberObject.toPrecision(num)
num
1 ~ 21 1
21 num
toString()
NumberObject num num

NumberObject
num-1
0
Number TypeError

var num = new Number(10000);
document.write (num.toPrecision(4))
</script>

1.000e+4
valueOf()
NumberObject.valueOf()
NumberObject
Number TypeError
JavaScript String
String
String
String
new String(s);
String(s);
s String

String() new String
s s
new String() s
String
FF
IE
constructor
length
prototype
String
FF
IE
anchor()
HTML
big()
blink()
bold()
charAt()
charCodeAt()
Unicode
concat()
fixed()
fontcolor()
fontsize()
fromCharCode()
indexOf()
italics()
lastIndexOf()
link()
localeCompare()
match()
replace()
search()
slice()
small()
split()
strike()
sub()
substr()
substring()
sup()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toUpperCase()
toSource()
toString()
valueOf()
String
JavaScript
String length
String
JavaScript immutableString
String.toUpperCase()
Netscape JavaScript Firefox

s s[2]
s.charAt(2) for/in
ECMAScript length
JavaScript
ECMAScript
class ECMAScript
JavaScript length
length
stringObject.length
length
var txt="Hello World!"
document.write(txt.length)
</script>
12
JavaScript anchor()
anchor() HTML
stringObject.anchor(anchorname)
anchorname
var txt="Hello world!"
document.write(txt.anchor("myanchor"))
</script>
HTML
<a name="myanchor">Hello world!</a>
JavaScript big()
big()
stringObject.big()

"Hello world!"
var str="Hello world!"
document.write(str.big())
</script>
JavaScript blink()
blink()
stringObject.blink()
Internet Explorer
"Hello world!"
document.write(str.blink())
</script>
JavaScript bold()
bold()
stringObject.bold()
"Hello world!"
document.write(str.bold())
</script>
JavaScript charAt()
charAt()
JavaScript
1
stringObject.charAt(index)
index
0 index 0 string.length
"Hello world!" 1
document.write(str.charAt(1))
</script>
JavaScript charCodeAt()
charCodeAt() Unicode 0 - 65535
charCodeAt() charAt()
stringObject.charCodeAt(index)
index

0 index
charCodeAt() NaN
"Hello world!" 1 Unicode

document.write(str.charCodeAt(1))
</script>
101
JavaScript concat()
concat()
stringObject.concat(stringX,stringX,...,stringX)
stringX
concat() stringObject
stringObject
stringObject.concat() Array.concat()

" + "
concat()
var str1="Hello "
var str2="world!"
document.write(str1.concat(str2))
</script>
Hello world!
JavaScript fixed()
fixed()
stringObject.fixed()
"Hello world!"
document.write(str.fixed())
</script>
JavaScript fontcolor()
fontcolor()
stringObject.fontcolor(color)
color
font-color(red)RGB (rgb(255,0,0))
(#FF0000)
"Hello world!"
document.write(str.fontcolor("Red"))
</script>
JavaScript fontsize()
fontsize()

stringObject.fontsize(size)
size 1 7
"Hello world!"
document.write(str.fontsize(7))
</script>
JavaScript fromCharCode()
fromCharCode() Unicode
String.fromCharCode(numX,numX,...,numX)
numX
Unicode Unicode
String Unicode
String
String.fromCharCode() myStringObject.fromCharCode()

Unicode "HELLO" "ABC"
document.write(String.fromCharCode(72,69,76,76,79))
document.write(String.fromCharCode(65,66,67))
</script>
HELLO
ABC
JavaScript indexOf()
indexOf()
stringObject.indexOf(searchvalue,fromindex)
searchvalue
fromindex
0
stringObject.length - 1
stringObject searchvalue
fromindex fromindex
searchvalue searchvalue stringObject 0
indexOf()
-1
"Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>
0
-1
6
JavaScript italics()
italics()
stringObject.italics()

"Hello world!"
document.write(str.italics())
</script>
JavaScript lastIndexOf()
lastIndexOf()
stringObject.lastIndexOf(searchvalue,fromindex)
searchvalue
fromindex
0
stringObject.length - 1
stringObject fromindex searchvalue

searchvalue
stringObject searchvalue
fromindex fromindex
searchvalue searchvalue stringObject stringObject
0
lastIndexOf()
-1
"Hello world!"
document.write(str.lastIndexOf("Hello") + "<br />")
document.write(str.lastIndexOf("World") + "<br />")
document.write(str.lastIndexOf("world"))
</script>
0
-1
6
JavaScript link()
link()
stringObject.link(url)
url
URL
"Free Web Tutorials!"

var str="Free Web Tutorials!"
document.write(str.link("http://www.w3school.com.cn"))
</script>
JavaScript localeCompare()
stringObject.localeCompare(target)
target
stringObject
stringObject target localeCompare() 0

stringObject target 0
0
< > Unicode

ch c d
localeCompare() ECMAscript
var str;
str.sort (function(a,b){return a.localeCompare(b)})
JavaScript match()
match()
indexOf() lastIndexOf()
stringObject.match(searchvalue)
stringObject.match(regexp)
searchvalue
regexp
RegExp RegExp
RegExp RegExp
regexp g

match() stringObject regexp
regexp g
regexp g match() stringObject
match() null
0
index stringObject
input stringObject
regexp g match() stringObject
null
stringObject index input

match()
RegExp.exec()
1
"Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>
world
null
null
world!
2

var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))
</script>
1,2,3
JavaScript replace()
replace()
stringObject.replace(regexp/substr,replacement)
regexp/substr
RegExp
RegExp
replacement
replacement regexp
stringObject replace() stringObject
regexp replacement regexp

g replace()
replacement
replacement $
$1$2...$99
regexp 1 99
$&
regexp
$`
$'
$$
ECMAScript v3 replace() replacement
0 stringObject
stringObject
1
"W3School" "Microsoft"
var str="Visit Microsoft!"
document.write(str.replace(/Microsoft/, "W3School"))
</script>
Visit W3School!
2
"Microsoft" "W3School"
var str="Welcome to Microsoft! "
str=str + "We are proud to announce that Microsoft has "
str=str + "one of the largest Web Developers sites in the world."
document.write(str.replace(/Microsoft/g, "W3School"))
</script>
Welcome to W3School! We are proud to announce that W3School

has one of the largest Web Developers sites in the world.
3
text = "javascript Tutorial";

text.replace(/javascript/i, "JavaScript");
4
"Doe, John" "John Doe"
name = "Doe, John";
name.replace(/(\w+)\s*, \s*(\w+)/, "$2 $1");
5
name = '"a", "b"';

name.replace(/"([^"]*)"/g, "'$1'");
6
name = 'aaa bbb ccc';

uw=name.replace(/\b\w+\b/g, function(word){
return word.substring(0,1).toUpperCase()+word.substring(1);}
);
JavaScript search()
search()
stringObject.search(regexp)
regexp
stringObject RegExp
stringObject regexp
-1
search() g regexp lastIndex

stringObject
1
"W3School"
var str="Visit W3School!"
document.write(str.search(/W3School/))
</script>
6
w3school search()
document.write(str.search(/w3school/))
</script>
-1
2
document.write(str.search(/w3school/i))
</script>
JavaScript slice()
slice()
stringObject.slice(start,end)
start
-1 -2
end
start
stringObject start start end

end
String slice()substring() substr()

slice() substring() slice() substr()
substr()
String.slice() Array.slice()
1
6
var str="Hello happy world!"
document.write(str.slice(6))
</script>
happy world!
2
6 11
var str="Hello happy world!"
document.write(str.slice(6,11))
</script>
happy
JavaScript small()
small()
stringObject.small()
"Hello world!"
document.write(str.small())
</script>
JavaScript split()
split()
stringObject.split(separator,howmany)
separator
stringObject
howmany
separator stringObject
separator
separator
("") separator stringObject
String.split() Array.join
var str="How are you doing today?"
document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))
</script>
How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you
2
"2:3:4:5".split(":")
//["2", "3", "4", "5"]
"|a|b|c".split("|") //["", "a", "b", "c"]
3
var words = sentence.split(' ')

separator
var words = sentence.split(/\s+/)
4
"hello".split("")
// ["h", "e", "l", "l", "o"]
howmany
"hello".split("", 3)
// ["h", "e", "l"]
JavaScript strike()
strike()
stringObject.strike()
"Hello world!"
document.write(str.strike())
</script>
JavaScript sub()
sub()

stringObject.sub()
"Hello world!"
document.write(str.sub())
</script>
JavaScript substr()
substr() start
stringObject.substr(start,length)
start
-1 -2
length
stringObject
stringObject start start

length length start stringObject
substr() substring() slice()
ECMAscript
IE 4 start BUG start 0
BUG
1
substr()
document.write(str.substr(3))
</script>
lo world!
2
substr()
document.write(str.substr(3,7))
</script>
lo worl
JavaScript substring()
substring()
stringObject.substring(start,stop)
start
stringObject
stop
stringObject
1
stringObject start stop-1

stop start
substring() start stop

start stop 0
start stop
slice() substr() substring()
substring()
document.write(str.substring(3))
</script>
lo world!
2
substring()
document.write(str.substring(3,7))
</script>
lo w
JavaScript sup()
sup()
stringObject.sup()

"Hello world!"
document.write(str.sup())
</script>
JavaScript toLocaleLowerCase()
toLocaleLowerCase()
stringObject.toLocaleLowerCase()
stringObject
toLowerCase() toLocaleLowerCase()
toLowerCase()
"Hello world!"
var str="Hello World!"

document.write(str.toLocaleLowerCase())
</script>
JavaScript toLocaleUpperCase()
toLocaleUpperCase()
stringObject.toLocaleUpperCase()
stringObject
toUpperCase() toLocaleUpperCase()
toUpperCase()
"Hello world!"
document.write(str.toLocaleUpperCase())
</script>
JavaScript toLowerCase()
toLowerCase()
stringObject.toLowerCase()
stringObject
"Hello world!"
document.write(str.toLowerCase())
</script>
JavaScript toUpperCase()
toUpperCase()
stringObject.toUpperCase()

stringObject
"Hello world!"
document.write(str.toUpperCase())
</script>
toString()
stringObject.toString()
stringObject
String TypeError
array.toString() boolean.toString() date.toString() Number.toString()

array.toLocaleString() date.toLocaleString() Number.toLocaleString()
stringObject.valueOf()
JavaScript
ECMAScript
ECMAScript
valueOf() String
String
stringObject.valueOf()
String TypeError
JavaScript RegExp
RegExp
RegExp
/pattern/attributes
RegExp
new RegExp(pattern, attributes);
pattern
attributes "g""i" "m"
ECMAScript m pattern
RegExp pattern
RegExp() RegExp
RegExp
new RegExp() new
pattern pattern RegExp
SyntaxError - pattern attributes "g""i" "m"
TypeError - pattern RegExp attributes
[abc]
[âbc]
[0-9]
0 9
[a-z]
a z
[A-Z]
A Z
[A-z]
A z
[adgk]
[âdgk]
(red|blue|green)
Metacharacter
\w
\W
\d
\D
\s
\S
\b
\B
\0
NUL
\n
\f
\r
\t
\v
\xxx
xxx
\xdd
dd
\uxxxx
xxxx Unicode
n+
n*
n?
n{X}
X n
n{X,Y}
X Y n
n{X,}
X n
n$
^n
?=n
?!n
RegExp
FF
IE
global
RegExp g
ignoreCase
RegExp i
lastIndex
multiline
RegExp m
source
RegExp
FF
IE
compile
exec
test
true false
String
FF
IE
search
match
replace
split
JavaScript RegExp i
new RegExp("regexp","i")
/regexp/i
"w3school"
var str="Visit W3School";
var patt1=/w3school/i;
Visit W3School
JavaScript RegExp g
new RegExp("regexp","g")
/regexp/g
"is"
var str="Is this all there is?";
var patt1=/is/g;
Is this all there is?

2
"is"
var patt1=/is/gi;
JavaScript RegExp [abc]
[abc]
new RegExp("[abc]")
/[abc]/
[abc]

[a-h]
var patt1=/[a-h]/g;
JavaScript RegExp [âbc]
[âbc]
new RegExp("[^xyz]")
/[^xyz]/
[âbc]
[a-h]
var patt1=/[â-h]/g;

JavaScript RegExp .
new RegExp("regexp.")
/regexp./
"h.t"
var str="That's hot!";
var patt1=/h.t/g;
That's hot!
JavaScript RegExp \w
\w
new RegExp("\w")
/\w/
\w
var str="Give 100%!";

var patt1=/\w/g;
Give 100%!
JavaScript RegExp \W
\W
a-zA-Z0-9

new RegExp("\W")
/\W/
\W

var patt1=/\W/g;
Give 100%!
JavaScript RegExp \d
\d
new RegExp("\d")
/\d/

\d

var patt1=/\d/g;
Give 100%!
JavaScript RegExp \D
\D
new RegExp("\D")
/\D/
\D

var patt1=/\D/g;
Give 100%!
JavaScript RegExp \s
\s
(space character)
(tab character)
(carriage return character)
(new line character)
(vertical tab character)
(form feed character)
new RegExp("\s")
/\s/
\s

var patt1=/\s/g;

JavaScript RegExp \S
\S
(space character)
(tab character)
(carriage return character)
(new line character)
(vertical tab character)
(form feed character)
new RegExp("\S")
/\S/
\S

var patt1=/\S/g;
JavaScript RegExp \b
\b
[\b]
null
\b
/\bm/ "moon" 'm'

/oo\b/ "moon" 'oo' 'oo' 'n'
/oon\b/ "moon" 'oon' 'oon'
/\w\b\w/
new RegExp("\bregexp")
/\bregexp/
\b
"W3"
var patt1=/\bW3/g;
Visit W3School
JavaScript RegExp \B
\B
null
\B
/\B../ "noonday" 'oo' /y\B./ "possibly yesterday." 'ye'
new RegExp("\Bregexp")
/\Bregexp/
\B
"School"
var patt1=/\BSchool/g;
Visit W3School
JavaScript RegExp \n
\n
\n -1
new RegExp("\n")
/\n/
\n
var str="Visit W3School.\nLearn Javascript.";

var patt1=/\n/;
Visit W3School.\nLearn Javascript.
JavaScript RegExp \xxx
\xxx xxx
null
new RegExp("\xxx")
/\xxx/
\xxx
127 (W)
var str="Visit W3School. Hello World!";
var patt1=/\127/g;
Visit W3School. Hello World!
JavaScript RegExp \xdd
\xdd dd
null
new RegExp("\xdd")
/\xdd/
\xdd
57 (W)
var patt1=/\x57/g;
JavaScript RegExp \uxxxx
\uxxxx xxxx Unicode

null
new RegExp("\uxxxx")
/\uxxxx/
\uxxxx

0057 (W)
var patt1=/\u0057/g;
JavaScript RegExp +
n+ n
new RegExp("n+")
/n+/
1
"o"
var str="Hellooo World! Hello W3School!";
var patt1=/o+/g;

Hellooo World! Hello W3School!
2
var str="Hello World! Hello W3School!";

var patt1=/\w+/g;
Hello World! Hello W3School!
JavaScript RegExp *
n+ n
new RegExp("n*")
/n*/
1
"l" "o"
var str="Hellooo World! Hello W3School!";

var patt1=/lo*/g;
Hellooo World! Hello W3School!

2
"1" "0"
var str="1, 100 or 1000?";
var patt1=/10*/g;
1, 100 or 1000?
JavaScript RegExp ?
n? n
new RegExp("n?")
/n?/

"1" "0"
var str="1, 100 or 1000?";
var patt1=/10?/g;
1, 100 or 1000?
JavaScript RegExp {X}
n{X,} X n
X
new RegExp("n{X}")
/n{X}/
{X}
var str="100, 1000 or 10000?";

var patt1=/\d{4}/g;

100, 1000 or 10000?
JavaScript RegExp {X,Y}
n{X,Y} X Y n
X Y
new RegExp("n{X,Y}")
/n{X,Y}/
{X,Y}
var str="100, 1000 or 10000?";

var patt1=/\d{3,4}/g;
100, 1000 or 10000?
JavaScript RegExp {X,}
n{X,} X n
X
new RegExp("n{X,}")
/n{X,}/
{X,}
var str="100, 1000 or 10000?";

var patt1=/\d{3,}/g;
100, 1000 or 10000?
JavaScript RegExp $
n$ n

new RegExp("n$")
/n$/
"is"
var str="Is this his";
var patt1=/is$/g;
Is this his
JavaScript RegExp ^
n^ n
new RegExp("^n")
/^n/
"is"
var str="Is this his";
var patt1=/Îs/g;
Is this his
JavaScript RegExp ?=
?=n n
new RegExp("regexp(?=n)")
/regexp(?=n)/
?=
"all" "is"
var str="Is this all there is";

var patt1=/is(?= all)/g;
Is this all there is
JavaScript RegExp ?!
?!n n
new RegExp("regexp(?!n)")
/regexp(?!n)/
?!
"all" "is"
var str="Is this all there is";
var patt1=/is(?! all)/gi;
Is this all there is
JavaScript global
global "g"
g true false
RegExpObject.global
g
var str = "Visit W3School.com.cn";
var patt1 = new RegExp("W3");
if(patt1.global)
{
alert("Global property is set");
}
else
{
alert("Global property is NOT set.");
}
</script>
JavaScript ignoreCase
ignoreCase "i"
"i" true false

RegExpObject.ignoreCase
i
var str = "Visit W3School";
var patt1 = new RegExp("W3");
if(patt1.ignoreCase)
{
alert("ignoreCase property is set");
}
else
{
alert("ignoreCase property is NOT set.");
}
</script>
JavaScript lastIndex
lastIndex
RegExpObject.lastIndex
RegExp.exec() RegExp.test() lastIndex

exec() test() lastIndex 0
g RegExp lastIndex
lastIndex
var str = "The rain in Spain stays mainly in the plain";
var patt1 = new RegExp("ain", "g");
patt1.test(str)
document.write("Match found. index now at: " + patt1.lastIndex);
</script>
JavaScript multiline
multiline m
^ $
/W3School$/im "w3school" "W3School\nisgreat" \n

\u000A
m true false
RegExpObject.multiline

m
var patt1 = new RegExp("W3","m");
if(patt1.multiline)
{
alert("Multiline property is set");
}
else
{
alert("Multiline property is NOT set.");
}
</script>
JavaScript source
source
gim
RegExpObject.source
var patt1 = new RegExp("W3S","g");
document.write("The regular expression is: " + patt1.source);
</script>
JavaScript compile()
compile()
compile()
RegExpObject.compile(regexp,modifier)
regexp
modifier
"g" "i" "gi"
"man" "person" compile()

"person" "man" "woman"
var str="Every man in the world! Every woman on earth!";
patt=/man/g;
str2=str.replace(patt,"person");
document.write(str2+"<br />");
patt=/(wo)?man/g;
patt.compile(patt);
str2=str.replace(patt,"person");
document.write(str2);
</script>

Every person in the world! Every woperson on earth!
Every person in the world! Every person on earth!
JavaScript exec()
exec()
RegExpObject.exec(string)
string
null
exec() test()
String
exec() null 0
1 RegExpObject 1
2 RegExpObject 2
length exec()
index input
string RegExp exec()
String.match()
RegExpObject exec()
RegExpObject lastIndex string exec()
RegExpObject lastIndex
exec()
exec() null lastIndex
lastIndex 0
RegExpObject exec()
exec() String.match()
exec()
W3School
var patt = new RegExp("W3School","g");
var result;
while ((result = patt.exec(str)) != null)
document.write(result);
document.write("<br />");
document.write(patt.lastIndex);
}
</script>
W3School
14
JavaScript test()
test() .

RegExpObject.test(string)
string
string RegExpObject true false
RegExp r test() s
(r.exec(s) != null)
"W3School"
var patt1 = new RegExp("W3School");
var result = patt1.test(str);
document.write("Result: " + result);
</script>
Result: true
JavaScript
JavaScript

FF
IE
decodeURI()
URI
5.5
decodeURIComponent()
URI
5.5
encodeURI()
URI
5.5
encodeURIComponent()
URI
5.5
escape()
eval()
JavaScript
getClass()
JavaObject JavaClass
isFinite()
isNaN()
Number()
parseFloat()
parseInt()
String()
unescape()
escape()
FF
IE
Infinity
java
java.* JavaPackage
NaN
Packages
JavaPackage
undefined
5.5

JavaScript
JavaScript this
JavaScript parseInt()
parseInt JavaScript
JavaScript
ECMAScript JavaScript JavaScript
LiveConnect Java JavaScript

java Package getClass() JavaScript
Window JavaScript Web
JavaScript for/in
var variables = "";

for (var name in this)
{
variables += name + "<br />";
}
document.write(variables);
JavaScript decodeURI()
decodeURI() encodeURI() URI

decodeURI(URIstring)
URIstring
URI
URIstring
decodeURI() URI
var test1="http://www.w3school.com.cn/My first/"
document.write(encodeURI(test1)+ "<br />")
document.write(decodeURI(test1))
</script>
http://www.w3school.com.cn/My%20first/
http://www.w3school.com.cn/My first/
JavaScript decodeURIComponent()
decodeURIComponent() encodeURIComponent() URI

decodeURIComponent(URIstring)
URIstring
URI
URIstring
decodeURIComponent() URI
var test1="http://www.w3school.com.cn/My first/"
document.write(encodeURIComponent(test1)+ "<br />")
document.write(decodeURIComponent(test1))
</script>
http%3A%2F%2Fwww.w3school.com.cn%2FMy%20first%2F
http://www.w3school.com.cn/My first/
JavaScript encodeURI()
encodeURI() URI

encodeURI(URIstring)
URIstring
URI
URIstring
ASCII ASCII - _ . !
~*'()
URI URI ASCII
encodeURI() ;/?:@&=+$,#
URI ? # encodeURIComponent()
encodeURI() URI
document.write(encodeURI("http://www.w3school.com.cn")+ "<br />")
document.write(encodeURI("http://www.w3school.com.cn/My first/"))
document.write(encodeURI(",/?:@&=+$#"))
</script>
http://www.w3school.com.cn
http://www.w3school.com.cn/My%20first/
,/?:@&=+$#
JavaScript encodeURIComponent()
encodeURIComponent() URI
encodeURIComponent(URIstring)
URIstring
URI
URIstring
ASCII ASCII - _ . !
~*'()
;/?:@&=+$,# URI
encodeURIComponent() encodeURI()
URI

document.write(encodeURIComponent("http://www.w3school.com.cn"))
document.write(encodeURIComponent("http://www.w3school.com.cn/p
1/"))
document.write(encodeURIComponent(",/?:@&=+$#"))
</script>
http%3A%2F%2Fwww.w3school.com.cn
http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F
%2C%2F%3F%3A%40%26%3D%2B%24%23
JavaScript escape()
escape()
escape(string)
string
string

ASCII ASCII *
@ - _ + . /
unescape() escape()
ECMAScript v3 decodeURI() decodeURIComponent()
escape()
document.write(escape("Visit W3School!") + "<br />")
document.write(escape("?!=()#%&"))
</script>
Visit%20W3School%21
%3F%21%3D%28%29%23%25%26
JavaScript eval()
eval() JavaScript
eval(string)
string
JavaScript
string
string
eval() String
eval eval()
ECMAScript EvalError
SyntaxError
eval() EvalError
eval() Javascript eval()
eval()
1
eval()
eval("x=10;y=20;document.write(x*y)")
document.write(eval("2+2"))
var x=10
document.write(eval(x+17))
</script>

200
4
27
2
eval()
eval("2+3") // 5
var myeval = eval; // EvalError
myeval("2+3");
// EvalError
eval()
try
{
alert("Result:" + eval(prompt("Enter an expression:","")));
}
catch(exception) {
alert(exception);
}
JavaScript getClass()
getClass() JavaObject JavaClass
getClass(javaobj)
javaobj
JavaObject

javaobj JavaClass
JavaObject JavaClass
JavaClass JavaClass Java Java Java
Java JavaObject
JavaScript getClass() Java getClass

JavaScript JavaClass Java java.lang.Class
Java Rectangle
var obj = new java.awt.Rectangle();
obj JavaObject JavaScript JavaScript getClass()
JavaClass JavaClass java.awt.Rectangle
var cls = getClass(obj);
Java getClass()
cls = obj.getClass();
cls java.lang.class Java Object
java.lang.class Java java.awt.Rectangle Java
JavaObject obj do true
(getClass(obj.getClass()) == java.lang.Class)
JavaScript isFinite()
isFinite()

isFinite(number)
number
number true number

NaN
false
isFinite()
document.write(isFinite(123)+ "<br />")
document.write(isFinite(-1.23)+ "<br />")
document.write(isFinite(5-2)+ "<br />")
document.write(isFinite(0)+ "<br />")
document.write(isFinite("Hello")+ "<br />")
document.write(isFinite("2005/12/12")+ "<br />")
</script>
true
true
true
true
false
false
JavaScript isNaN()
isNaN()
isNaN(x)
x NaN true x
, false
isNaN() NaN 0
NaN false
NaN == === isNaN()
isNaN() parseFloat() parseInt()

isNaN() 0
<script>
document.write(isNaN(123));
document.write(isNaN(-1.23));
document.write(isNaN(5-2));
document.write(isNaN(0));
document.write(isNaN("Hello"));
document.write(isNaN("2005/12/12"));
</script>
false
false
false
false
true
true
JavaScript Number()
Number()
Number(object)
object
JavaScript
Date Number() 1970 1 1

Number() NaN
var
var
var
var
var
test1=
test2=
test3=
test4=
test5=
new
new
new
new
new
Boolean(true);
Boolean(false);
Date();
String("999");
String("999 888");
document.write(Number(test1)+
"<br
"<br
"<br
"<br
"<br
/>");
/>");
/>");
/>");
/>");
</script>
1
0
1256657776588
999
NaN
JavaScript parseFloat()
parseFloat()
parseFloat(string)
string
parseFloat
parseFloat +
- (0-9)e E
parseFloat NaN
isNaN parseFloat NaN NaN
NaN
parseFloat() NaN
parseInt()
1
parseFloat()
document.write(parseFloat("10"))
document.write(parseFloat("10.00"))
document.write(parseFloat("34 45 66"))
document.write(parseFloat(" 60 "))
document.write(parseFloat("40 years"))
document.write(parseFloat("He was 40"))
</script>
10
10
10.33
34
60
40
NaN
2
3.14
document.write(parseFloat("314e-2"))
document.write(parseFloat("0.0314E+2"))
document.write(parseFloat("3.14more non-digit characters"))
</script>
3.14
3
NaN
document.write(parseFloat("FF2"))
</script>
NaN
JavaScript parseInt()
parseInt()
parseInt(string, radix)
string
radix
2 ~ 36
0 10 0x
0X 16
2 36 parseInt() NaN
radix 0parseInt() string

string "0x" parseInt() string
string 0 ECMAScript v3 parseInt()
string 1 ~ 9 parseInt()
parseFloat() NaN

parseInt()
parseInt("10");
parseInt("19",10);
parseInt("11",2);
parseInt("17",8);
parseInt("1f",16);
parseInt("010");
// 10
// 19 (10+9)
// 3 (2+1)
// 15 (8+7)
// 31 (16+15)
// 10 8
JavaScript String()
String()
String(object)
object
JavaScript
var
var
var
var
var
var
var
test1= new Boolean(1);

test2= new Boolean(0);
test3= new Boolean(true);
test4= new Boolean(false);
test5= new Date();
test6= new String("999 888");
test7=12345;
document.write(String(test1)+
"<br
"<br
"<br
"<br
"<br
"<br
"<br
/>");
/>");
/>");
/>");
/>");
/>");
/>");
</script>
true
false
true
false
Wed Oct 28 00:17:40 UTC+0800 2009
999 888
12345
JavaScript unescape()
unescape() escape()
unescape(string)
string
string

%xx %uxxxx x
Unicode \u00xx \uxxxx
ECMAScript v3 unescape()
decodeURI() decodeURIComponent()
escape() unescape()
var test1="Visit W3School!"
test1=escape(test1)
document.write (test1 + "<br />")
test1=unescape(test1)
document.write(test1 + "<br />")
</script>
Visit%20W3School%21
Visit W3School!
JavaScript Infinity
Infinity

Infinity
for/in Infinity delete

Infinity
infinity
var t1=1.7976931348623157E+10308
document.write(t1)
var t2=-1.7976931348623157E+10308
document.write(t2)
</script>
Infinity
-Infinity
JavaScript java
java.* JavaPackage

java
LiveConnect Java JavaScript java

JavaPackage java.* java.util
JavaScript java.util java.* Java
Packages
JavaScript NaN
NaN
NaN
for/in NaN delete

NaN
isNaN() NaN
infinity
var test1="300"
var test2="Hello World!"

document.write(Number(test1)+ "<br />")
document.write(Number(test2)+ "<br />")
document.write(isNaN(test1)+ "<br />")
document.write(isNaN(test2))
</script>
300
NaN
false
true
JavaScript Packages
JavaPackage
Packages
LiveConnect Java JavaScript Packages

JavaPackage Java
Packages.javax.swing Java javax.swing java Packages.java
JavaScript undefined
undefined JavaScript undefined
undefined
for/in undefined delete

undefined
undefined
=== == undefined
null
null undefined
var t1=""
var t2
if (t1===undefined) {document.write("t1 is undefined")}
if (t2===undefined) {document.write("t2 is undefined")}
</script>
t2 is undefined
Window
Window
Window
frame iframe
HTML window
window
window
IE: Internet Explorer, F: Firefox, O: Opera.
Window
IE
frames[]
Window Window
<iframe> frames.length frames[]
frames[]
frames[]
Window
IE
closed
defaultStatus
No
document
Document
Document
history
History History
innerheight
No
No
No
innerwidth
No
No
No
length
location
Location
name
Location
Navigator
Navigator Navigator
opener
outerheight
No
No
No
outerwidth
No
No
No
pageXOffset
No
No
No
pageYOffset
No
No
No
parent
Screen
Screen Screen
self
Window 4
status
No
top
window
window self
x
y IE Safari Opera
screenLeft screenTop Firefox Safari
screenX screenY
screenLeft
screenTop
screenX
screenY
Window
IE
alert()
blur()
clearInterval()
setInterval() timeout
clearTimeout()
setTimeout() timeout
close()
confirm()
createPopup()
pop-up
No
No
focus()
moveBy()
moveTo()
open()
print()
prompt()
resizeBy()
resizeTo()
1.5
scrollBy()
scrollTo()
setInterval()
setTimeout()
Window
Window JavaScript Window
document
window.document
alert()
Window.alert()
Window JavaScript
Window window self

parent top
frame[] Window Window
frame[i]
//
self.frame[i] //
w.frame[i]
// w

parent
//
self.parent //
w.parent
// w
top
//
self.top
//
f.top
// f
Window.open() open()
opener
Window alert()
confirm() prompt
HTML DOM closed
closed
Windows
closed true
window.closed
<html>
<head>
function ifClosed()
{
document.write("'myWindow' has been closed!")

}
function ifNotClosed()
{
document.write("'myWindow' has not been closed!")
}
function checkWin()
{
if (myWindow.closed)
ifClosed()
else
ifNotClosed()
}
</script>
</head>
<body>
myWindow=window.open('','','width=200,height=100')
myWindow.document.write("This is 'myWindow'")
</script>
<input type="button" value="Has 'myWindow' been closed?"
onclick="checkWin()">
</body>
</html>
HTML DOM defaultStatus
defaultStatus
window.defaultStatus=sometext
<html>
<body>
window.defaultStatus="This is the default text in the status bar!!";
</script>
<p>Look at the text in the statusbar.</p>
</body>
</html>
HTML DOM innerheightinnerwidth
IE document.documentElement document.body IE
clientWidth clientHeight
HTML DOM name
name
open() <frame> name
<a> <form> target

target

window.name=name
<html>
<head>
function checkWin()
{
document.write(myWindow.name)
}
</script>
</head>
<body>
myWindow=window.open('','MyName','width=200,height=100')
</script>
<input type="button" value="What's the name of 'myWindow'?"
onclick="checkWin()">
</body>
</html>
HTML DOM opener
opener Window
opener

window.opener
Window operner Window

operner
opener
<html>
<body>
myWindow=window.open('','MyName','width=200,height=100')
myWindow.focus()
myWindow.opener.document.write("This is the parent window")
</script>
</body>
</html>
HTML DOM outerheight
outerheight
window.outerheight=pixels

IE
100x100
<html>
<body>
myWindow=window.open('','')
myWindow.outerheight="100"
myWindow.outerwidth="100"
myWindow.focus()
</script>
</body>
</html>
HTML DOM outerwidth
outerwidth
window.outerwidth=pixels
IE

100x100
<html>
<body>
myWindow=window.open('','')
myWindow.outerheight="100"
myWindow.outerwidth="100"
myWindow.focus()
</script>
</body>
</html>
HTML DOM self
self Window
window.self
<html>
<head>
function breakout()
{
if (window.top!=window.self)
{
window.top.location="tryjs_breakout.htm"
}
}
</script>
</head>
<body>
<input type="button" onclick="breakout()"
value="Break out of frame!">
</body>
</html>
HTML DOM status
status
window.status=sometext
status
status
defaultStatus
<html>
<body>
window.status="Some text in the status bar!!"
</script>
</body>
</html>
HTML DOM top
top
top
top
window.top
<html>
<head>
function breakout()
{
if (window.top!=window.self)
{
window.top.location="tryjs_breakout.htm"
}
}
</script>
</head>
<body>
<form>
Click the button to break out of the frame:
<input type="button" onclick="breakout()" value="Break out!">

</form>
</body>
</html>
HTML DOM alert()
alert() OK
alert(message)
message
window HTML
<html>
<head>
function display_alert()
{
alert("I am an alert box!!")
}
</script>
</head>
<body>
<input type="button" onclick="display_alert()"
value="Display alert box" />
</body>
</html>
HTML DOM blur()
blur()
window.blur()
blur() Window
<html>
<body>
myWindow.blur()
</script>
</body>
</html>
HTML DOM clearInterval()
clearInterval() setInterval() timeout

clearInterval() setInterval() ID
clearInterval(id_of_setinterval)
id_of_setinterval
setInterval() ID
50 clock() clock
<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>
</body>
</html>
HTML DOM clearTimeout()
clearTimeout() setTimeout() timeout
clearTimeout(id_of_settimeout)
id_of_settimeout
setTimeout() ID
timedCount()
<html>
<head>
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">

</form>
</body>
</html>
HTML DOM close()
close()
window.close()
close() window self.close()

close()
JavaScript JavaScript
<html>
<head>
function closeWin()
{
myWindow.close()
}
</script>
</head>
<body>
</script>
<input type="button" value="Close 'myWindow'"
onclick="closeWin()" />
</body>
</html>
HTML DOM confirm()
confirm() OK
confirm(message)
message
window HTML
confirm() true confirm()

false
confirm() JavaScript

<html>
<head>
function disp_confirm()
{
var r=confirm("Press a button")
if (r==true)
{
document.write("You pressed OK!")
}
else
{
document.write("You pressed Cancel!")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_confirm()"
value="Display a confirm box" />
</body>
</html>
HTML DOM createPopup()
createPopup() pop-up
window.createPopup()

<html>
<head>
function show_popup()
{
var p=window.createPopup()
var pbody=p.document.body
pbody.style.backgroundColor="lime"
pbody.style.border="solid black 1px"
pbody.innerHTML="This is a pop-up! Click outside to close."
p.show(150,150,200,50,document.body)
}
</script>
</head>
<body>
<button onclick="show_popup()">Create pop-up!</button>
</body>
</html>
HTML DOM focus()
focus()
window.focus()
<html>
<body>
myWindow.focus()
</script>
</body>
</html>
HTML DOM moveBy()
moveBy()
window.moveBy(x,y)
50
<html>
<head>
function moveWin()
{
myWindow.moveBy(50,50)
}
</script>
</head>
<body>
</script>
<input type="button" value="Move 'myWindow'"
onclick="moveWin()" />
</body>
</html>
HTML DOM moveTo()
moveTo()
window.moveTo(x,y)
<html>
<head>
function moveWin()
{
myWindow.moveTo(50,50)
}
</script>
</head>
<body>
</script>
<input type="button" value="Move 'myWindow'"
onclick="moveWin()" />
</body>
</html>
HTML DOM open()
open()
window.open(URL,name,features,replace)
URL
URL
name
<a>
<form> target
open()
features
features
replace
URL
true - URL
false - URL
Window.open() Document.open()
Window.open() open()
1
www.w3school.com.cn
<html>
<head>
function open_win()
{
window.open("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type=button value="Open Window" onclick="open_win()" />
</body>
</html>
2
about:blank
<html>
<body>
myWindow.focus()
</script>
</body>
</html>
Window Features
channelmode=yes|no|1|0
no
directories=yes|no|1|0
yes
fullscreen=yes|no|1|0
no
height=pixels
left=pixels
location=yes|no|1|0
yes
menubar=yes|no|1|0
yes
resizable=yes|no|1|0
yes
scrollbars=yes|no|1|0
yes
status=yes|no|1|0
yes
titlebar=yes|no|1|0
yes
toolbar=yes|no|1|0
yes
top=pixels
width=pixels
HTML DOM print()
print()
print()

window.print()
1
<html>
<head>
function printpage()
{
window.print()
}
</script>
</head>
<body>
<input type="button" value="Print this page"
onclick="printpage()" />
</body>
</html>
HTML DOM prompt()
prompt()
prompt(text,defaultText)
text
HTML
defaultText

null
prompt() JavaScript
1
<html>
<head>
function disp_prompt()
{
var name=prompt("Please enter your name","")
if (name!=null && name!="")
{
document.write("Hello " + name + "!")
}
}
</script>
</head>
<body>
<input type="button" onclick="disp_prompt()"
value="Display a prompt box" />
</body>
</html>
HTML DOM resizeBy()
resizeBy()

resizeBy(width,height)
width
height
1
<html>
<head>
function resizeWindow()
{
window.resizeBy(-100,-100)
}
</script>
</head>
<body>
<input type="button" onclick="resizeWindow()"
value="Resize window">
</body>
</html>
HTML DOM resizeTo()
resizeTo()
resizeTo(width,height)
width
height
<html>
<head>
function resizeWindow()
{
window.resizeTo(500,300)
}
</script>
</head>
<body>
<input type="button" onclick="resizeWindow()"
value="Resize window">
</body>
</html>
HTML DOM scrollBy()
scrollBy()
scrollBy(xnum,ynum)
xnum
ynum

100
<html>
<head>
function scrollWindow()
{
window.scrollBy(100,100)
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="Scroll" />
<p>SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL SCROLL</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
HTML DOM scrollTo()
scrollTo()
scrollTo(xpos,ypos)
xpos
ypos
100,500
<html>
<head>
function scrollWindow()
{
window.scrollTo(100,500)
}
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="Scroll" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
HTML DOM setInterval()
setInterval()
setInterval() clearInterval()
setInterval() ID clearInterval()
setInterval(code,millisec[,"lang"])
code
millisec
code
Window.clearInterval() code

<html>
<body>
<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>
</body>
</html>
HTML DOM setTimeout()
setTimeout()
setTimeout(code,millisec)
code
JavaScript
millisec

setTimeout() code setInterval() code
setTimeout()
<html>
<head>
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!"
onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will be
displayed after 5 seconds.</p>
</body>
</html>
Navigator
Navigator
Navigator
navigator
Navigator
IE
plugins[]
Plugin
Plug-in
MIME
plugins[] IE 4 IE 4
IE 4 Plugin
Navigator
IE
appCodeName
appMinorVersion
No
No
appName
appVersion
browserLanguage
No
cookieEnabled
cookie
cpuClass
CPU
No
No
onLine
No
No
platform
systemLanguage
OS
No
No
userAgent
user-agent
userLanguage
OS
No
Navigator
IE
javaEnabled()
Java
taintEnabled()
(data tainting)
Navigator
Navigator
Netscape Navigator
JavaScript
Navigator Window navigator
HTML DOM appCodeName
appCodeName
Netscape "Mozilla"
Microsoft "Mozilla"
navigator.appCodeName
<html>
<body>
document.write("<p>CodeName: ")
document.write(navigator.appCodeName + "</p>")
</script>
</body>
</html>
HTML DOM appMinorVersion
appMinorVersion
navigator.appMinorVersion
<html>
<body>
document.write("<p>MinorVersion: ")
document.write(navigator.appMinorVersion + "</p>")
</script>
</body>
</html>
HTML DOM appName
appName
appName Netscape
"Netscape" IE "Microsoft Internet Explorer"
navigator.appMinorVersion

<html>
<body>
document.write("<p>Name: ")
document.write(navigator.appName + "</p>")
</script>
</body>
</html>
HTML DOM appVersion
appVersion
parseInt()
navigator.appVersion
<html>
<body>
document.write("<p>Version: ")
document.write(navigator.appVersion + "</p>")
</script>
</body>
</html>
HTML DOM browserLanguage
browserLanguage
navigator.browserLanguage
<html>
<body>
document.write("<p>BrowserLanguage: ")
document.write(navigator.browserLanguage + "</p>")
</script>
</body>
</html>
HTML DOM cookieEnabled
cookieEnabled cookie true

cookie false

navigator.cookieEnabled
<html>
<body>
document.write("<p>CookieEnabled: ")
document.write(navigator.cookieEnabled + "</p>")
</script>
</body>
</html>
HTML DOM cpuClass
cpuClass CPU
navigator.cpuClassd
<html>
<body>
document.write("<p>CPUClass: ")
document.write(navigator.cpuClass + "</p>")
</script>
</body>
</html>
HTML DOM onLine
onLine
IE 4+
navigator.onLine
<html>
<body>
document.write("<p>OnLine: ")
document.write(navigator.onLine + "</p>")
</script>
</body>
</html>
HTML DOM platform
platform
"Win32" "MacPPC"
"Linuxi586"

navigator.platform
<html>
<body>
document.write("<p>Platform: ")
document.write(navigator.platform + "</p>")
</script>
</body>
</html>
HTML DOM systemLanguage
systemLanguage
navigator.systemLanguage
<html>
<body>
document.write("<p>SystemLanguage: ")
document.write(navigator.systemLanguage + "</p>")
</script>
</body>
</html>
HTML DOM userAgent
userAgent HTTP
navigator.appCodeName navigator.appVersion
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)
user-agent header
navigator.userAgent
<html>
<body>
document.write("<p>UserAgent: ")
document.write(navigator.userAgent + "</p>")
</script>
</body>
</html>
HTML DOM userLanguage
userLanguage

navigator.userLanguage
<html>
<body>
document.write("<p>UserLanguage: ")
document.write(navigator.userLanguage + "</p>")
</script>
</body>
</html>
HTML DOM javaEnabled()
javaEnabled() Java
true false
navigator.javaEnabled()
navigator.javaEnabled() Java
Java
Java
<html>
<body>
alert(navigator.javaEnabled())
</script>
</body>
</html>
true
HTML DOM taintEnabled()
taintEnabled() data tainting
navigator.taintEnabled()
data tainting
<html>
<body>
alert(navigator.taintEnabled())
</script>
</body>
</html>
false
Screen
Screen
Screen
screen
Screen
IE
availHeight
( Windows
)
availWidth
( Windows
)
bufferDepth
No
No
colorDepth
deviceXDPI
No
No
deviceYDPI
No
No
fontSmoothingEnabled
No
No
height
logicalXDPI
No
No
logicalYDPI
No
No
pixelDepth
No
updateInterval
No
No
width
Screen
Window screen Screen Screen
JavaScript
16 8 JavaScript
HTML DOM availHeight
availHeight Windows
screen.availHeight
<html>
<body>
document.write("<p>Available Height: ")
document.write(screen.availHeight + "</p>")
</script>
</body>
</html>
HTML DOM availWidth
availWidth Windows
screen.availWidth
<html>
<body>
document.write("<p>Available Width: ")
document.write(screen.availWidth + "</p>")
</script>
</body>
</html>
HTML DOM bufferDepth
bufferDepth off-screen bitmap buffer
screen.bufferDepth=number

<html>
<body>
document.write("<p>Buffer Depth: ")
document.write(screen.bufferDepth + "</p>")
</script>
</body>
</html>
HTML DOM colorDepth
colorDepth
screen.colorDepth
<html>
<body>
document.write("<p>Color Depth: ")
document.write(screen.colorDepth + "</p>")
</script>
</body>
</html>
HTML DOM deviceXDPI
deviceXDPI
screen.deviceXDPI
<html>
<body>
document.write("<p>Device XDPI: ")
document.write(screen.deviceXDPI + "</p>")
</script>
</body>
</html>
HTML DOM deviceYDPI
deviceYDPI
screen.deviceYDPI

<html>
<body>
document.write("<p>Device YDPI: ")
document.write(screen.deviceYDPI + "</p>")
</script>
</body>
</html>
HTML DOM fontSmoothingEnabled
fontSmoothingEnabled
sscreen.fontSmoothingEnabled
<html>
<body>
document.write("<p>FontSmoothingEnabled: ")
document.write(screen.fontSmoothingEnabled + "</p>")
</script>
</body>
</html>
HTML DOM height
height
screen.height
<html>
<body>
document.write("<p>Height: ")
document.write(screen.height + "</p>")
</script>
</body>
</html>
HTML DOM logicalXDPI
logicalXDPI
screen.logicalXDPI

<html>
<body>
document.write("<p>Logical XDPI: ")
document.write(screen.logicalXDPI + "</p>")
</script>
</body>
</html>
HTML DOM logicalYDPI
logicalYDPI
screen.logicalYDPI
<html>
<body>
document.write("<p>Logical YDPI: ")
document.write(screen.logicalYDPI + "</p>")
</script>
</body>
</html>
HTML DOM pixelDepth
pixelDepth
screen.pixelDepth
<html>
<body>
document.write("<p>Pixel Depth: ")
document.write(screen.pixelDepth + "</p>")
</script>
</body>
</html>
HTML DOM updateInterval
updateInterval
screen.updateInterval=number

<html>
<body>
document.write("<p>Update Interval: ")
document.write(screen.updateInterval + "</p>")
</script>
</body>
</html>
HTML DOM width
width
screen.width
<html>
<body>
document.write("<p>Width: ")
document.write(screen.width + "</p>")
</script>
</body>
</html>
History
History
History URL
History window window.history
History
History
IE
length
URL
History
IE
back()
history URL
forward()
history URL
go()
history
History
History History
URL back()forward() go()
history.back()
history.go(-2)
HTML DOM length
length
IE 6 Opera 9 0 Firefox 1.5 1
history.length
<html>
<body>
document.write(history.length);
</script>
</body>
</html>
HTML DOM back()
back() URL
history.go(-1)

history.back()
<html>
<head>
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>
HTML DOM forward()
forward() URL
history.go(1)
history.forward()
<html>
<head>
function goForward()
{
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()" />
</body>
</html>
HTML DOM go()
go()
history.go(number|URL)
URL URL URL number URL

History URL
<html>
<head>
function goBack()
{
window.history.go(-1)
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()" />
</body>
</html>
Location
Location
Location URL
Location Window window.location
<html>
<head>
function currLocation()
{
alert(window.location)
}
function newLocation()
{
window.location="/index.html"
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value=" URL">
<input type="button" onclick="newLocation()" value=" URL">

</body>
</html>
Location
IE
hash
(#) URL
host
URL
hostname
URL
href
URL
pathname
URL
port
URL
protocol
URL
search
(?) URL
Location
IE
assign()
reload()
replace()
Location
Location Window Location
Web href URL URL
Anchor Area URL Location
href location
location.href
Anchor Location
URL Location
URL Location href

URL
location location.href URL URL
URL Location URL
URL Location
hash
search URL
URL Location reload() replace()
HTML DOM hash
hash URL #
location.hash=anchorname
URL : http://example.com:1234/test.htm#part2
<html>
<body>
document.write(location.hash);
</script>
</body>
</html>
#part2
HTML DOM host
host URL
location.host
<html>
<body>
document.write(location.host);
</script>
</body>
</html>
example.com:1234
HTML DOM hostname
hostname URL

location.hostname
<html>
<body>
document.write(location.hostname);
</script>
</body>
</html>
example.com
HTML DOM href
href URL
URL URL
location.href=URL
<html>
<body>
document.write(location.href);
</script>
</body>
</html>
http://example.com:1234/test.htm#part2
HTML DOM pathname
pathname URL
location.pathname=path
URL : http://example.com:1234/test/test.htm#part2
<html>
<body>
document.write(location.pathname);
</script>
</body>
</html>
/test/test.htm
HTML DOM port
port URL
location.port=portnumber
<html>
<body>
document.write(location.port);
</script>
</body>
</html>
1234
HTML DOM protocol
protocol URL

location.protocol=path
<html>
<body>
document.write(location.protocol);
</script>
</body>
</html>
http:
HTML DOM search
search URL ?
location.search=path_from_questionmark
URL : http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search
<html>
<body>
document.write(location.search);
</script>
</body>
</html>
?f=hdom_loc_search
HTML DOM assign()
assign()
location.assign(URL)
assign()
<html>
<head>
function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()" />

</body>
</html>
HTML DOM reload()
reload()
location.reload(force)
false HTTP If-Modified-Since

reload()
true
Shift
<html>
<head>
function reloadPage()
{
window.location.reload()
}
</script>
</head>
<body>
<input type="button" value="Reload page"
onclick="reloadPage()" />
</body>
</html>
HTML DOM replace()
replace()
location.replace(newURL)
replace() History URL

History
replace()
<html>
<head>
function replaceDoc()
{
window.location.replace("http://www.w3school.com.cn")
}
</script>
</head>
<body>
<input type="button" value="Replace document" onclick="replaceDoc()"
/>
</body>
</html>
HTML DOM Document

Document
HTML Document
Document HTML
Document Window window.document
IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C .
Document
IE
W3C
all[]
HTML
No
anchors[]
Anchor
Yes
applets
Applet
forms[]
Form
Yes
images[]
Image
Yes
links[]
Area Link
Yes
Document
body
<body>
<frameset>
cookie
IE
W3C
cookie
Yes
domain
Yes
lastModified
No
No
referrer
URL
Yes
title
Yes
URL
URL
Yes
Document
IE
W3C
close()
document.open()
Yes
getElementById()
id
Yes
getElementsByName()
Yes
getElementsByTagName()
Yes
open()

document.write() document.writeln()
Yes
write()
HTML JavaScript
Yes
writeln()
write()
Yes
Document
HTMLDocument DOM Document HTML
HTMLCollection
0 DOM Document.getElementsByTagName()
write()
1 DOM HTMLDocument getElementById()

2 DOM Document HTMLDocument
HTML DOM all
all HTML
document.all[i]
document.all[name]
document.all.tags[tagname]
all[] HTML all[]

IE 4
all[] Document getElementById() getElementsByTagName()
Document getElementsByName() all[]
all[]
all[] HTML name
id name
HTML DOM anchors
anchors Anchor
document.anchors[]

<html>
<body>
<a name="first">First anchor</a><br />
<a name="second">Second anchor</a><br />
<a name="third">Third anchor</a><br />
<br />
Number of anchors in this document:
document.write(document.anchors.length)
</script>
</body>
</html>
HTML DOM forms
forms Form
document.forms[]
<html>
<body>
<form name="Form1"></form>
document.write("This document contains: ")
document.write(document.forms.length + " forms.")

</script>
</body>
</html>
HTML DOM images
images Image
document.images[]
0 DOM <object>
<html>
<body>
<img border="0" src="hackanm.gif" width="48" height="48">
<br />
<img border="0" src="compman.gif" width="107" height="98">
<br /><br />
document.write("This document contains: ")
document.write(document.images.length + " images.")
</script>
</body>
</html>
HTML DOM links
links Area Link
document.links[]
<html>
<body>
<img src="planets.gif"
width="145" height="126"
usemap="#planetmap" />
<map name="planetmap">
<area id="venus" shape="circle"
coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
<br />
Number of links in this document:
document.write(document.links.length)
</script>
</body>
</html>
HTML DOM cookie
cookie cookie
document.cookie
cookie
<html>
<body>
The cookies associated with this document is:
document.write(document.cookie)
</script>
</body>
</html>
HTML DOM domain
domain
document.domain
web
domain
<html>
<body>
The domain name for this document is:
document.write(document.domain)
</script>
</body>
</html>
HTML DOM lastModified
lastModified
document.lastModified
Last-Modified HTTP Web
<html>
<body>
This document was last modified on:
document.write(document.lastModified)
</script>
</body>
</html>
HTML DOM referrer
referrer URL

document.referrer
null JavaScript
HTTP
<html>
<body>
The referrer of this document is:
document.write(document.referrer)
</script>
</body>
</html>
HTML DOM title
title HTML title
document.title
<html>
<head>
<title>My title</title>
</head>
<body>
The title of the document is:
document.write(document.title)
</script>
</body>
</html>
HTML DOM URL
URL URL
document.URL
Window location.href URL

URL URL location.href
URL
<html>
<body>
The URL of this document is:
document.write(document.URL)
</script>
</body>
</html>
HTML DOM close()
close() document.open
document.close()
open()
write() close()
close() write() open()
<html>
<head>
function createNewDoc()
{
var newDoc=document.open("text/html","replace");
var txt="<html><body>Learning about the DOM is FUN!</body></html>";
newDoc.write(txt);
newDoc.close();
}
</script>
</head>
<body>
<input type="button" value="Write to a new document"
onclick="createNewDoc()">
</body>
</html>
HTML DOM getElementById()
getElementById() ID
document.getElementById(id)
HTML DOM getElementById()

getElementsByName() getElementsByTagName()
getElementById()
id
ID
1
<html>
<head>
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>
2
getElementById() DOM
getElementById()
function id(x) {
if (typeof x == "string") return document.getElementById(x);
return x;
}
ID x
= id(x)
HTML DOM getElementsByName()
getElementsByName()
document.getElementsByName(name)
getElementById() name id
name HTML
name
getElementsByName()
<html>
<head>
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many elements named 'myInput'?" />
</body>
</html>
HTML DOM getElementsByTagName()
document.getElementsByTagName(tagname)
"*" getElementsByTagName()

1
<html>
<head>
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />
</body>
</html>
2
getElementsByTagName() HTML
var tables = document.getElementsByTagName("table");

alert ("This document contains " + tables.length + " tables");
3
var myParagragh = document.getElementsByTagName("p")[3];

getElementById()
HTML DOM open()
open()
document.open(mimetype,replace)
mimetype
"text/html"
replace
HTML write()
writeln()
open() write()
close
<html>
<head>
function createNewDoc()
{
var newDoc=document.open("text/html","replace");
var txt="<html><body>Learning about the DOM is FUN!</body></html>";
newDoc.write(txt);
newDoc.close();
}
</script>
</head>
<body>
<input type="button" value="Write to a new document"
onclick="createNewDoc()">
</body>
</html>
HTML DOM write()
write() HTML JavaScript

(exp1,exp2,exp3,...)
document.write(exp1,exp2,exp3,....)
DOM write()
write() HTML
close()

<html>
<body>
document.write("Hello World!");
</script>
</body>
</html>
HTML DOM writeln()
writeln() write()
document.writeln(exp1,exp2,exp3,....)
<pre>
<html>
<body>
document.writeln("Hello World!");
</script>
</body>
</html>
HTML DOM Anchor

Anchor
Anchor HTML
HTML <a> Anchor
href name
Document anchors[]
document.getElementById()
Anchor
IE
W3C
accessKey
No
Yes
charset
Yes
coords
Yes
href
URL
Yes
hreflang
Yes
id
id
Yes
innerHTML
No
name
Yes
rel
URL
No
Yes
rev
URL
No
Yes
shape
Yes
tabIndex
Tab
Yes
target
Yes
type
MIME
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Anchor
IE
W3C
blur()
Yes
focus()
Yes
HTML DOM Area

Area
Area
HTML <area> Area
Area
IE
W3C
accessKey
No
Yes
alt
Yes
coords
Yes
hash
URL
No
No
host
URL
No
No
href
URL
Yes
id
id
Yes
noHref
Yes
pathname
URL
No
protocol
URL
No
search
URL
No
shape
Yes
tabIndex
tab
Yes
target
link-URL
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM Base

Base
Base HTML base
HTML <base> Base
Base
IE
W3C
href
URL
Yes
id
<base> id
Yes
target
Yes
HTML DOM Body

Body
Body (HTML body)
Body
IE
W3C
className
class
Yes
dir
Yes
id
body id
Yes
lang
Yes
title
Yes
HTML DOM Button

Button
Button
HTML <button> Button
Button
IE
W3C
accessKey
Yes
disabled
Yes
form
Yes
id
id
Yes
name
Yes
tabIndex
Tab
Yes
type
Yes
value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM Canvas

Canvas
Canvas HTML - <canvas> API
CanvasRenderingContext2D Canvas getContext()

"2d"
<canvas> Safari 1.3 Firefox 1.5 Opera 9
IE <canvas> API excanvas.sourceforge.net
ExplorerCanvas
<canvas> Mozilla Canvas
Canvas
Canvas
height
300
width

300
Canvas
getContext()
HTML DOM getContext()
getContext()
Canvas.getContext(contextID)
contextID "2d"
API
<canvas> 3D getContext()
"3d"
CanvasRenderingContext2D Canvas
2 3
"2d" CanvasRenderingContext2D
HTML DOM Form

Form
Form HTML
HTML <form> Form
Form
IE
W3C
elements[]
Yes
Form
IE
W3C
acceptCharset
No
No
No
Yes
action
action
Yes
enctype
MIME
Yes
id
id
Yes
length
Yes
method
HTTP
Yes
name
Yes
target
Frame Window
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Form
IE
W3C
reset()
Yes
submit()
Yes
Form
IE
W3C
onreset
Yes
onsubmit
Yes
HTML DOM Frame

Frame
Frame HTML
HTML <frame> Frame
Frame
IE
W3C
contentDocument
No
Yes
frameBorder
Yes
id
id
Yes
longDesc
URL
Yes
marginHeight
Yes
marginWidth
Yes
name
Yes
noResize
Yes
scrolling
No
No
Yes
src
URL
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM Frameset

Frameset
Frameset HTML
Frameset
IE
W3C
cols
Yes
id
id
Yes
rows
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM IFrame

IFrame
IFrame HTML
HTML <iframe> IFrame
IFrame
IE
W3C
align
iframe
Yes
contentDocument
No
Yes
frameBorder
iframe
No
Yes
height
iframe
Yes
id
iframe id
Yes
longDesc
iframe URL
Yes
marginHeight
iframe
Yes
marginWidth
iframe
Yes
name
iframe
Yes
scrolling
iframe
No
No
Yes
src
iframe URL
Yes
iframe
width
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM Image

Image
Image
<img> Image
Image
IE
W3C
align
Yes
alt
Yes
border
Yes
complete
No
height
Yes
hspace
Yes
id
id
Yes
isMap
Yes
longDesc
URL
Yes
lowsrc
URL
No
name
Yes
src
URL
Yes
useMap
usemap
Yes
vspace
Yes
width
Yes
IE
W3C
className
class
Yes
title
title
Yes
Image
IE
W3C
onabort
Yes
onerror
Yes
onload
Yes
HTML DOM Button

Button
Button HTML
onclick
HTML <input type="button"> Button
elements[]
Button
IE
W3C
accessKey
Yes
alt
Yes
disabled
Yes
form
Yes
id
id
Yes
name
Yes
tabIndex
tab
Yes
type
Yes
value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Button
IE
W3C
blur()
Yes
click()
Yes
focus()
Yes
HTML DOM Checkbox

Checkbox
Checkbox HTML
HTML <input type="checkbox"> Checkbox
elements[]
Checkbox
IE
W3C
accessKey
checkbox
Yes
alt
checkbox
Yes
checked
checkbox
Yes
defaultChecked
checked
Yes
disabled
checkbox
Yes
form
checkbox
Yes
id
checkbox id
Yes
name
checkbox
Yes
tabIndex
checkbox tab
Yes
type
checkbox
Yes
value
checkbox value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Checkbox
IE
W3C
blur()
checkbox
Yes
click()
checkbox
Yes
focus()
checkbox
Yes
HTML DOM FileUpload

FileUpload
HTML <input type="file"> FileUpload
value file-upload
file-upload HTML JavaScript

HTML value value
file-upload onchange
elements[] document.getElementById()
FileUpload
FileUpload
accept
MIME
accessKey
FileUpload
alt
<input type="file">
IE
W3C
Yes
Yes
Yes
defaultValue
FileUpload
disabled
FileUpload
form
FileUpload
Yes
id
FileUpload id
Yes
name
FileUpload
Yes
tabIndex
FileUpload tab
type
FileUpload "file" 4
Yes
value
FileUpload
Yes
Yes
Yes
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
W3C
FileUpload
IE
blur()
FileUpload
Yes
focus()
FileUpload
Yes
select()
FileUpload
HTML DOM Hidden

Hidden
Hidden HTML
Yes
value
Web
HTML <input type="hidden"> Hidden

elements[]
Hidden
IE
W3C
alt
Yes
form
Yes
id
id
Yes
name
Yes
type
Yes
value
value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM Password

Password
Password HTML
HTML <input type="password"> Password
"text" onchange
elements[] array
Password
IE
W3C
accessKey
Yes
alt
Yes
defaultValue
Yes
disabled
Yes
form
Yes
id
id
Yes
maxLength
Yes
name
Yes
readOnly
Yes
size
Yes
tabIndex
tab
Yes
type
Yes
value
value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Password
IE
W3C
blur()
Yes
focus()
Yes
select()
Yes
HTML DOM Radio

Radio
Radio HTML
HTML <input type="radio"> Radio
onclick
elements[] Radio
Radio
IE
W3C
accessKey
Yes
alt
Yes
checked
Yes
defaultChecked
Yes
disabled
Yes
form
Yes
id
id
Yes
name
Yes
tabIndex
tab
Yes
type
Yes
value
value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Radio
IE
W3C
blur()
No
Yes
click()
No
Yes
focus()
No
Yes
HTML DOM Reset

Reset
Reset HTML
HTML <input type="reset"> Reset
HTML value JavaScript defaultValue

onclick fasle
Form.reset() Form.onreset
elements[]
Reset
IE
W3C
accesskey
Yes
alt
Yes
disabled
Yes
form
Yes
id
id
Yes
name
Yes
tabIndex
tab
Yes
type
Yes
value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Reset
IE
W3C
blur()
Yes
click()
Yes
focus()
Yes
HTML DOM Submit

Submit
Submit HTML (submit button)
HTML <input type="submit"> Submit
onclick fasle
Form.submit() Form.onsubmit
elements[]
Submit
IE
W3C
accessKey
Yes
alt
Yes
disabled
Yes
form
Yes
id
id
Yes
name
Yes
tabIndex
tab
Yes
type
Yes
value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Submit
IE
W3C
blur()
Yes
click()
Yes
focus()
Yes
HTML DOM Text

Text
Text HTML
HTML <input type="text"> Text
onchange
HTML <textarea> Textarea
<input type="text"> type "password" Input
Password
elements[]
Text
IE
W3C
accessKey
Yes
alt
Yes
defaultValue
Yes
disabled
Yes
form
Yes
id
id
Yes
maxLength
Yes
name
Yes
readOnly
Yes
size
Yes
tabIndex
tab
Yes
type
Yes
value
value
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Text
IE
W3C
blur()
Yes
focus()
Yes
select()
Yes
HTML DOM Link

Link
Link HTML <link> <link>
<link> HTML head

Link
IE
W3C
charset
URL
Yes
disabled
URL
Yes
href
URL
Yes
hreflang
URL
Yes
id
<link> id
Yes
media
Yes
name
<link>
No
No
Yes
rel
URL
Yes
rev
URL
Yes
type
URL MIME
Yes
IE
W3C
dir
Yes
lang
Yes
HTML DOM Meta

Meta
Meta HTML <meta>
<meta> HTML (meta-information)
Meta
IE
W3C
content
<meta> content
Yes
httpEquiv
content HTTP
Yes
name
content
Yes
scheme
content
Yes
HTML DOM content
content <meta> content
metaObject.content=text
<meta> content
<html>
<head>
<meta name="keywords" content="HTML,DHTML,CSS,JavaScript" />
</head>
<body>
x=document.getElementsByTagName("meta")[0];
document.write("Meta content: " + x.content);
</script>
</body>
</html>
HTML DOM httpEquiv
httpEquiv content HTTP
metaObject.httpEquiv=content-type|expires|refresh|set-cookie
5
<html>
<head>
<meta http-equiv="refresh" content="5" />
</head>
<body>
document.write("Http equiv: " + x.httpEquiv);
</script>
</body>
</html>
HTML DOM scheme
scheme content
metaObject.scheme=format
content
<html>
<head>
<meta name="revised" content="2006-11-03" scheme="YYYY-MM-DD" />
</head>
<body>
document.write("Content format: " + x.scheme);
</script>
</body>
</html>
HTML DOM Object

Object
Object HTML <object>
<object> Java appletActiveXPDF
Flash
W3C: W3C .
Object
W3C
align
Yes
archive
Yes
border
Yes
code
URL Java
Yes
codeBase
URL
Yes
codeType
Yes
data
Yes
declare
Yes
form
Yes
height
Yes
hspace
Yes
name
Yes
standby
Yes
type
data
Yes
useMap
Yes
vspace
Yes
width
Yes
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM Option

Option
Option HTML
HTML <option> Option
elements[] Option
Option
IE
W3C
defaultSelected
selected
Yes
disabled
Yes
form
<form>
Yes
id
id
Yes
index
Yes
label
selected
selected
Yes
text
Yes
value
Yes
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM Select

Select
Select HTML
HTML <select> Select
elements[] Select
Select
IE
W3C
options[]
Yes
Select
IE
W3C
disabled
Yes
form
Yes
id
id
Yes
length
Yes
multiple
Yes
name
Yes
selectedIndex
Yes
size
Yes
tabIndex
tab
Yes
type
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Select
IE
W3C
add()
Yes
blur()
Yes
focus()
Yes
remove()
Yes
Select
IE
W3C
onchange
Yes
HTML DOM Table

Table
Table HTML
HTML <table> Table
Table
IE
W3C
cells[]
No
rows[]
Yes
tBodies[]
tbody
HTML DOM cells
cells
tableObject.cells[]
cells
<html>
Yes
<head>
function cell()
{
var x=document.getElementById('myTable').rows[0].cells;
alert(x[0].innerHTML);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
<br />
<input type="button" onclick="cell()" value="Alert first cell">
</body>
</html>
HTML DOM rows
rows TableRow HTMLCollection

<thead><tfoot> <tbody>
tableObject.rows[]
rows
<html>
<head>
function showRow()
{
alert(document.getElementById('myTable').rows[0].innerHTML)
}
</script>
</head>
<body>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="showRow()" value="Show innerHTML">
</body>
</html>
Table
IE
W3C
align
bgColor
border
Yes
caption
<caption>
Yes
cellPadding
Yes
cellSpacing
Yes
frame
Yes
id
id
Yes
rules
Yes
summary
Yes
tFoot
TFoot null 4
Yes
tHead
THead
null
Yes
width
Yes
HTML DOM caption
caption caption
<caption> <caption> <table>
captioncaption
tableObject.caption=captionObject
<caption>
<html>
<head>
function alertCaption()
{
alert(document.getElementById("table1").caption.innerHTML);
}
</script>
</head>
<body>
<table id="table1" border="1">
<caption>This is a table caption</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick=alertCaption()
value="Alert table caption" />
</body>
</html>
HTML DOM cellPadding
cellPadding
tableObject.cellPadding=pixels
The following example changes the cell padding of a table:

<html>
<head>
function padding()
{
document.getElementById('myTable').cellPadding="15"
}
</script>
</head>
<body>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="padding()" value="Change Cellpadding">
</body>
</html>
HTML DOM cellSpacing
cellSpacing
tableObject.cellSpacing=pixels
cellSpacing
<html>
<head>
function spacing()
{
document.getElementById('myTable').cellSpacing="15"
}
</script>
</head>
<body>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="spacing()" value="Change Cellspacing">
</body>
</html>
HTML DOM frame
frame
tableObject.frame=void|above|below|hsides|vsides|lhs|rhs|box|bord
er
<html>
<head>
function aboveFrames()
{
document.getElementById('myTable').frame="above"
}
function belowFrames()
{
document.getElementById('myTable').frame="below"
}
</script>
</head>
<body>
<table id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="aboveFrames()"
value="Show above frames">
<input type="button" onclick="belowFrames()"
value="Show below frames">
</body>
</html>
HTML DOM rules
rules
tableObject.rules=none|groups|rows|cols|all
<html>
<head>
function rowRules()
{
document.getElementById('myTable').rules="rows"
}
function colRules()
{
document.getElementById('myTable').rules="cols"
}
</script>
</head>
<body>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button"
value="Show only row
<input type="button"
value="Show only col
onclick="rowRules()"
borders">
onclick="colRules()"
borders">
</body>
</html>
HTML DOM summary
summary
summary
tableObject.summary=text
<html>
<head>
function alertSummary()
{
alert(document.getElementById("table1").summary);
}
</script>
</head>
<body>
<table id="table1" border="1"
summary="Example table of employees">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick=alertSummary()
value="Alert table summary" />
</body>
</html>
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Table
IE
W3C
createCaption()
caption
Yes
createTFoot()
tFoot
Yes
createTHead()
tHead
Yes
deleteCaption()
caption
Yes
deleteRow()
Yes
deleteTFoot()
tFoot
Yes
deleteTHead()
tHead
Yes
insertRow()
Yes
HTML DOM createCaption()
createCaption() <caption>
tableObject.createCaption()
HTMLElement <caption>
<caption> <caption>
<html>
<head>
function createCaption()
{
var x=document.getElementById('myTable').createCaption()
x.innerHTML="My table caption"
}
</script>
</head>
<body>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="createCaption()"
value="Create caption">
</body>
</html>
HTML DOM createTFoot()
createTFoot() <tfoot>
tableObject.createTFoot()
TableSection <tfoot>
<tfoot>
<html>
<head>
{
var x=document.getElementById('myTable').createTFoot()
x.innerHTML="My table foot"
}
</script>
</head>
<body>

<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
</body>
</html>
HTML DOM createTHead()
createTHead() <thead>
tableObject.createTHead()
TableSection <thead>
<thead>
<html>
<head>
{
var x=document.getElementById('myTable').createTHead()
x.innerHTML="My table head"

}
</script>
</head>
<body>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
</body>
</html>
HTML DOM deleteCaption()
deleteCaption() caption
tableObject.deleteCaption()
<caption>
<html>
<head>
function deleteCaption()
{
document.getElementById('myTable').deleteCaption()
}
</script>
</head>
<body>
<caption>My table caption</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="deleteCaption()"
value="Delete caption" />
</body>
</html>
HTML DOM deleteRow()
deleteRow()
tableObject.deleteRow(index)
index
<thead> <tfoot>
The following example deletes the first row of the table:

<html>
<head>
function delRow()
{
document.getElementById('myTable').deleteRow(0)
}
</script>
</head>
<body>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="delRow()"
value="Delete first row">
</body>
</html>
HTML DOM deleteTFoot()
deleteTFoot() <tfoot>
tableObject.deleteTFoot()
<tfoot>
<html>
<head>
function delRow()
{
document.getElementById('myTable').deleteTFoot()
}
</script>
</head>
<body>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tfoot><td>my table foot</td></tfoot>
</table>
<br />
value="Delete table foot">
</body>
</html>
HTML DOM deleteTHead()
deleteTHead() <thead>
tableObject.deleteTHead()
<thead>
<html>
<head>
function delRow()
{
document.getElementById('myTable').deleteTHead()
}
</script>
</head>
<body>
<thead><td>my table head</td></thead>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
value="Delete table foot">
</body>
</html>
HTML DOM insertRow()
insertRow()
tableObject.insertRow(index)
TableRow
TableRow <tr>
index index
<tbody>
index 0 INDEX_SIZE_ERR
DOMException
TableRow.insertCell()
<html>
<head>
function insRow()
{
document.getElementById('myTable').insertRow(0)
}
</script>
</head>
<body>
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()"
value="Insert new row">
</body>
</html>
HTML DOM TableCell

TableCell
TableCell HTML
HTML <td> TableCell
TableCell
IE
W3C
abbr
Yes
align
Yes
axis
Yes
cellIndex
Yes
ch
Yes
chOff
Yes
colSpan
headers
header-cell id
id
id
Yes
Yes
Yes
innerHTML
No
Yes
HTML
rowSpan
scope
vAlign
Yes
width
Yes
Yes
HTML DOM abbr
abbr
tabledataObject.abbr=text
abbr
<html>
<head>
function alertAbbr()
{
alert(document.getElementById('td1').abbr);
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td id="td1" abbr="Some text">Peter</td>
<td id="td2">Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="alertAbbr()"
value="Alert abbr" />
</body>
</html>
HTML DOM axis
axis
axis
tabledataObject.axis=text
axis
<html>
<head>
function alertAxis()
{
alert(document.getElementById('td3').axis);
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>City</th>
</tr>
<tr>
<td id="td1">Harry</td>
<td id="td2">Potter</td>
<td id="td3" axis="location">NY</td>
</tr>
<tr>
<td id="td4">Peter</td>
<td id="td6" axis="location">Las Vegas</td>
</tr>
</table>
<br />
<input type="button" onclick="alertAxis()"
value="Alert axis" />
</body>
</html>
HTML DOM cellIndex
cellIndex
tabledataObject.cellIndex
cell index
<html>
<head>
function alertTd1()
{
alert(document.getElementById('td1').cellIndex);
}
function alertTd2()
{
alert(document.getElementById('td2').cellIndex);
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
</tr>
</table>
<br />
<input type="button" onclick="alertTd1()"
value="Alert cell index of 'Peter'" />
<br />
<input type="button" onclick="alertTd2()"
value="Alert cell index of 'Griffin'" />
</body>
</html>
HTML DOM colSpan
colSpan
tabledataObject.colSpan=number_of_columns
<html>
<head>
function changeColSpan()
{
document.getElementById("td1").colSpan="2";
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
</tr>
</table>
<br />
<input type="button" onclick=changeColSpan()
value="Change colspan" />
</body>
</html>
HTML DOM rowSpan
rowSpan
tabledataObject.rowSpan=number_of_rows
<html>
<head>
function changeRowSpan()
{
document.getElementById("td2").rowSpan="2";
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
</tr>
<tr>
<td id="td3">Harry</td>
<td id="td4">Potter</td>
</tr>
</table>
<br />
<input type="button" onclick=changeRowSpan()
value="Change rowspan" />
</body>
</html>
HTML DOM vAlign
vAlign
tabledataObject.vAlign=top|middle|bottom|baseline
<html>
<head>
function topAlign()
{
document.getElementById('td1').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Text</th>
</tr>
<tr>
<td id="td3">Hello my name is Peter Griffin.
I need a long text for this example.
I need a long text for this example.</td>
</tr>
</table>
<br />
<input type="button" onclick="topAlign()"
value="Top-align table cells" />
</body>
</html>
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
HTML DOM TableRow

TableRow
TableRow HTML
HTML <tr> TableRow
TableRow
IE
W3C
cells[]
Yes
TableRow
IE
W3C
align
Yes
ch
Yes
chOff
Yes
id
id
Yes
innerHTML
HTML
No
rowIndex
Yes
sectionRowIndex
tBody tHead tFoot
vAlign
HTML DOM rowIndex
rowIndex row index
Yes
4
Yes
tablerowObject.rowIndex
<html>
<head>
function alertRowIndex()
{
alert(document.getElementById("tr1").rowIndex);
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="alertRowIndex()"
value="Alert row index" />
</body>
</html>
HTML DOM vAlign
vAlign
tablerowObject.vAlign=top|bottom|middle|baseline
<html>
<head>
function topAlign()
{
document.getElementById('tr2').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
<th>Text</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
<td>Hello my name is Peter Griffin.
I need a long text for this example.
I need a long text for this example.</td>
</tr>
</table>
<br />
<input type="button" onclick="topAlign()"
value="Top-align table row" />
</body>
</html>
TableRow
IE
W3C
deleteCell()
Yes
insertCell()
<td>
Yes
HTML DOM deleteCell()
deleteCell() <td>
tablerowObject.deleteCell(index)
index
DOMException
<html>
<head>
function delCell()
{
document.getElementById('tr2').deleteCell(0)
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="delCell()" value="Delete cell">
</body>
</html>
HTML DOM insertCell()
insertCell() HTML <td>
tablerowObject.insertCell(index)
TableCell <td>
<td>
index index
<td>
Document.createElement() Node.insertBefore()
<th>
DOMException
<html>
<head>
function insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="John"
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="Insert cell">
</body>
</html>
HTML DOM Textarea

Textarea
Textarea HTML (text-area) <textarea>
Textarea
Textarea
getElementById()
Textarea Object Properties
IE
W3C
accessKey
textarea
Yes
cols
textarea
Yes
defaultValue
Yes
disabled
textarea
Yes
form
textarea
Yes
id
textarea id
Yes
name
textarea
Yes
readOnly
textarea
Yes
rows
textarea
Yes
tabIndex
textarea tab
Yes
type
Yes
value
textarea
Yes
IE
W3C
className
class
Yes
dir
Yes
lang
Yes
title
title
Yes
Textarea
IE
W3C
blur()
textarea
Yes
focus()
textarea
Yes
select()
textarea
Yes
Textarea
IE
W3C
onchange
Ye
HTML DOM Style

Style
Style Style
Style
document.getElementById("id").style.property=""
Style

IE: Internet Explorer, M: Mac IE, W: Windows IE, F: Firefox, O: Opera
W3C: World Wide Web Consortium (Internet ).
Background
IE
W3C
background
Yes
backgroundAttachment
Yes
backgroundColor
Yes
backgroundImage
Yes
backgroundPosition
No
No
Yes
backgroundPositionX
backgroundPosition X
No
No
No
backgroundPositionY
backgroundPosition Y
No
No
No
backgroundRepeat
Yes
Border Margin
IE
W3C
border
Yes
borderBottom
Yes
borderBottomColor
Yes
borderBottomStyle
Yes
borderBottomWidth
Yes
borderColor
()
Yes
borderLeft
Yes
borderLeftColor
Yes
borderLeftStyle
Yes
borderLeftWidth
Yes
borderRight
Yes
borderRightColor
Yes
borderRightStyle
Yes
borderRightWidth
Yes
borderStyle
()
Yes
borderTop
Yes
borderTopColor
Yes
borderTopStyle
Yes
borderTopWidth
Yes
borderWidth
()
Yes
margin
()
Yes
marginBottom
Yes
marginLeft
Yes
marginRight
Yes
marginTop
Yes
outline
outline
5M
Yes
outlineColor
5M
Yes
outlineStyle
5M
Yes
outlineWidth
5M
Yes
padding
()
Yes
paddingBottom
Yes
paddingLeft
Yes
paddingRight
Yes
paddingTop
Yes
Layout
IE
W3C
clear
Yes
clip
Yes
content
5M
Yes
counterIncrement
5M
Yes
counterReset
5M
Yes
cssFloat
5M
Yes
cursor
Yes
direction
Yes
display
Yes
height
Yes
markerOffset
marker box principal box
5M
Yes
marks
cross marks crop marks

page box
5M
Yes
maxHeight
5M
Yes
maxWidth
5M
Yes
minHeight
5M
Yes
minWidth
5M
Yes
overflow
Yes
verticalAlign
No
Yes
visibility
Yes
width
Yes
List
IE
W3C
listStyle
Yes
listStyleImage
No
Yes
listStylePosition
Yes
listStyleType
Yes
Positioning
IE
W3C
bottom
Yes
left
Yes
position
static, relative, absolute fixed
Yes
right
Yes
top
Yes
zIndex
Yes
Printing
IE
W3C
orphans
5M
Yes
page
5M
Yes
pageBreakAfter
Yes
pageBreakBefore
Yes
pageBreakInside
5M
Yes
size
Yes
widows
Yes
5M
Scrollbar (IE-only)
IE
W3C
scrollbar3dLightColor
5W
No
No
No
scrollbarArrowColor
5W
No
No
No
scrollbarBaseColor
5W
No
No
No
scrollbarDarkShadowColor
5W
No
No
No
scrollbarFaceColor
5W
No
No
No
scrollbarHighlightColor
5W
No
No
No
scrollbarShadowColor
5W
No
No
No
scrollbarTrackColor
5W
No
No
No
Table
IE
W3C
borderCollapse
HTML
Yes
borderSpacing
5M
Yes
captionSide
5M
No
No
Yes
emptyCells
5M
Yes
tableLayout
No
No
Yes
IE
W3C
color
Yes
font
Yes
fontFamily
Yes
fontSize
Yes
fontSizeAdjust
5M
No
Yes
fontStretch
5M
No
No
Yes
fontStyle
Yes
fontVariant
Yes
fontWeight
Yes
letterSpacing
Yes
lineHeight
Yes
quotes
5M
textAlign
Yes
textDecoration
Yes
Text
Yes
textIndent
textShadow
5M
textTransform
unicodeBidi
Yes
Yes
Yes
Yes
whiteSpace
Yes
wordSpacing
Yes
IE
W3C
dir
Yes
lang
Yes
title
Yes
cssText
CSS
SYNTAX_ERR DOMException
CSS2Properties
NO_MODIFICATION_ALLOWED_ERR DOMException
CSS2Properties
CSS2Properties CSS CSS CSS
JavaScript
HTMLElement style CSS2Properties CSSRule
style Window.getComputedStyle() CSS2Properties
HTML DOM background
background
Object.style.background=background-color background-image
background-repeat background-attachment background-position
background-color
background-image
background-repeat
background-attachment
background-position
color-name
color-rgb
color-hex
transparent
url(URL)
none
repeat
repeat-x
repeat-y
no-repeat
scroll
fixed
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
<html>
<head>
function setStyle()
{
document.body.style.background="#FFCC80 url(bgdesert.jpg)
repeat-y";
}
</script>
</head>
<body>
<input type="button" onclick="setStyle()"
value="Set background style" />
</body>
</html>
TIY
<html>
<head>
function setStyle()
{
document.body.style.background="#FFCC80 url(/i/eg_bg_desert.jpg)
repeat-y";
}
</script>
</head>
<body>
<input type="button" onclick="setStyle()" value="Set background
style" />
</body>
</html>
HTML DOM backgroundAttachment
backgroundAttachment
Object.style.backgroundAttachment=scroll|fixed
<html>
<head>
<style type="text/css">
body
{
background-color="#FFCC80";
background-image:url(bgdesert.jpg);
}
p
{
color:white;
}
</style>
function changeAttachment()
{
document.body.style.backgroundAttachment="fixed";
}
</script>
</head>
<body>
<input type="button" onclick="changeAttachment()"
value="Set background-image to be fixed" />
<p>This is a paragraph</p>
</body>
</html>
TIY
<html>
<head>
body
{
background-color="#FFCC80";
background-image:url(/i/eg_bg_desert.jpg);
}
p
{
color:white;
}
</style>
function changeAttachment()
{
document.body.style.backgroundAttachment="fixed";
}
</script>
</head>
<body>
<input type="button" onclick="changeAttachment()" value="Set
background-image to be fixed" />
</body>
</html>
HTML DOM backgroundColor
backgroundColor

Object.style.backgroundColor=color-name|color-rgb
|color-hex|transparent
body
<html>
<head>
body
{
background-color:#B8BFD8;
}
</style>
function changeStyle()
{
document.body.style.backgroundColor="#FFCC80";
}
</script>
</head>
<body>
<input type="button" onclick="changeStyle()"
value="Change background color" />
</body>
</html>
TIY
<html>
<head>
body
{
}
</style>
{
}
</script>
</head>
<body>
<input type="button" onclick="changeStyle()" value="Change
background color" />
</body>
</html>
<html>
<head>
body
{
}
</style>
{
document.body.style.backgroundColor="red";
}
</script>
</head>
<body>
<input type="button" onclick="changeStyle()" value="Change
background color" />
</body>
</html>
HTML DOM backgroundImage
backgroundImage
Object.style.backgroundImage=url(URL)|none
url(URL)
none
<html>
<head>
{
document.body.style.backgroundImage="url(bgdesert.jpg)";
}
</script>
</head>
<body>
<input type="button" onclick="changeStyle()"
value="Set background image" />

</body>
</html>
TIY
<html>
<head>
{
document.body.style.backgroundImage="url(/i/eg_bg_desert.jpg)";
}
</script>
</head>
<body>
<input type="button" onclick="changeStyle()" value="Set
background-image" />
</body>
</html>
HTML DOM backgroundPosition
backgroundPosition
Object.style.backgroundPosition=position
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
"center"
0% 0%
x% y%
0% 0% 100% 100%
50%
xpos ypos
0 0 (0px 0px) CSS

50%
% position
<html>
<head>
body
{
background-color:#FFCC80;
background-repeat:no-repeat
}
</style>
function changePosition()
{
document.body.style.backgroundPosition="bottom center";
}
</script>
</head>
<body>
<input type="button" onclick="changePosition()"
value="Change background-image position" />
</body>
</html>
TIY
<html>
<head>
body
{
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>
{
document.body.style.backgroundPosition="bottom center";
}
</script>
</head>
<body>
<input type="button" onclick="changePosition()" value="Change
background-image position" />
<p><b>Note:</b> For this to work in Mozilla, the background-attachment
property must be set to "fixed".</p>
</body>
</html>
HTML DOM backgroundPositionX
backgroundPositionX
Object.style.backgroundPositionX=position
left
center
right
x%
0% 100%
xpos
0 (0px) CSS
<html>
<head>
body
{
}
</style>
{
document.body.style.backgroundPositionX="right";
}
</script>
</head>
<body>
value="Change background-image's x-position" />
</body>
</html>
TIY
<html>
<head>
body
{
}
</style>
{
document.body.style.backgroundPositionX="right";
}
</script>
</head>
<body>
background-image's x-position" />
</body>
</html>
HTML DOM backgroundPositionY
backgroundPositionY background-image
Object.style.backgroundPositionY=position
top
center
bottom
y%
Top 0%Bottom 100%
ypos
Top 0 (0px) CSS
background-image
<html>
<head>
body
{
}
</style>
{
document.body.style.backgroundPositionY="bottom";
}
</script>
</head>
<body>
value="Change background-image's y-position" />
</body>
</html>
TIY
background-image
<html>
<head>
body
{
}
</style>
{
document.body.style.backgroundPositionY="bottom";
}
</script>
</head>
<body>
background-image's y-position" />
</body>
</html>
HTML DOM backgroundRepeat
backgroundRepeat
Object.style.backgroundRepeat=repeat_value
repeat
repeat-x
repeat-y
no-repeat
y
<html>
<head>
body
{
}
</style>
function changeRepeat()
{
document.body.style.backgroundRepeat="repeat-y";
}
</script>
</head>
<body>
<input type="button" onclick="changeRepeat()"

value="Repeat background-image only on the y-axis" />
</body>
</html>
TIY
background-image repeat
<html>
<head>
body
{
}
</style>
function changeRepeat()
{
document.body.style.backgroundRepeat="repeat-y";
}
</script>
</head>
<body>
<input type="button" onclick="changeRepeat()" value="Repeat
background-image only on the y-axis" />
</body>
</html>
HTML DOM border
border
Object.style.border=borderWidth borderStyle borderColor
borderWidth
borderStyle
borderColor
<html>
<head>
thin
medium
thick
length
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
color-name
color-rgb
color-hex
transparent
p
{
border: thin dotted #FF0000
}
</style>
function changeBorder()
{
document.getElementById("p1").style.border="thick solid #0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()"
value="Change border" />
<p id="p1">This is a paragraph</p>
</body>
</html>
TIY
border -
<html>
<head>
p
{
border: thin dotted #FF0000;
}
</style>
{
document.getElementById("p1").style.border="thick solid #0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change border"

/>
</body>
</html>
HTML DOM borderBottom
borderBottom
Object.style.borderBottom=borderWidth borderStyle borderColor
borderWidth
borderStyle
borderColor
thin
medium
thick
length
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
color-name
color-rgb
color-hex
transparent
<html>
<head>
p {border: thin dotted #FF0000}
</style>
{
document.getElementById("p1").style.borderBottom="thick solid
blue";
}
</script>
</head>
<body>
value="Change bottom paragraph border" />
<p id="p1">This is a paragraph with a border</p>
</body>
</html>
TIY
borderBottom -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderBottom="thick solid
blue";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change bottom
border" />
<p id="p1">This is a paragraph with a border</p>
</body>
</html>
HTML DOM borderBottomColor
borderBottomColor
Object.style.borderBottomColor=color-name|color-rgb|color-hex
<html>
<head>
p {border: thick solid #FF0000}
</style>
function changeBorderColor()
{
document.getElementById("p1").style.borderBottomColor="blue";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorderColor()"

value="Change border color" />
</body>
</html>
TIY
borderBottomColor -
<html>
<head>
p
{
border: thick solid #FF0000;
}
</style>
{
document.getElementById("p1").style.borderBottomColor="blue";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorderColor()" value="Change
border color" />
</body>
</html>
HTML DOM borderBottomStyle
borderBottomStyle
Object.style.borderBottomStyle=style
none
hidden
"none" hidden
dotted
dashed
solid
double
border-width
groove
3D border-color
ridge
3D border-color
inset
3D inset border-color
outset
3D outset border-color
<html>
<head>
p
{
border: thick solid #FF0000
}
</style>
{
document.getElementById("p1").style.borderBottomStyle="dotted";
}
</script>
</head>
<body>
value="Change bottom border" />
</body>
</html>
TIY
borderBottomStyle -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderBottomStyle="dotted";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change bottom
border" />
</body>
</html>
HTML DOM borderBottomWidth
borderBottomWidth
Object.style.borderBottomWidth=thin|medium|thick|length
thin
medium
thick
length
<html>
<head>
p
{
border: thin solid #FF0000
}
</style>
function changeBorderWidth()
{
document.getElementById("p1").style.borderBottomWidth="thick";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorderWidth()"
value="Change bottom border" />
</body>
</html>
TIY
borderBottomWidth -
<html>
<head>
p
{
border: thin solid #FF0000;
}
</style>
{
document.getElementById("p1").style.borderBottomWidth="thick";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorderWidth()" value="Change
bottom border" />
</body>
</html>
HTML DOM borderColor
borderColor
1 4
table {border-color: red} -
table {border-color: red green} -
table {border-color: red green blue}-
table {border-color: red green blue yellow} -
Object.style.borderColor=color-name|color-rgb|color-hex|transpare
nt
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderColor="#0000FF #00FF00";
}
</script>
</head>
<body>

value="Change border color" />
</body>
</html>
TIY
borderColor -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderColor="#0000FF #00FF00";
}
</script>
</head>
<body>
border color" />
</body>
</html>
HTML DOM borderLeft
borderLeft
Object.style.borderLeft=borderWidth borderStyle borderColor
borderWidth
borderStyle
borderColor
<html>
thin
medium
thick
length
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
color-name
color-rgb
color-hex
transparent
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderLeft="thick solid
#0000FF";
}
</script>
</head>
<body>
value="Change left border" />
</body>
</html>
TIY
borderLeft -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderLeft="thick solid
#0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change left
border" />
</body>
</html>
HTML DOM borderLeftColor
borderLeftColor
Object.style.borderLeftColor=color-name|color-rgb|color-hex|trans
parent
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderLeftColor="#0000FF";
}
</script>
</head>
<body>
</body>
</html>
TIY
borderleftColor -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderLeftColor="#0000FF";
}
</script>
</head>
<body>
left border" />
</body>
</html>
HTML DOM borderLeftStyle
borderLeftStyle
Object.style.borderLeftStyle=style
none
hidden
"none" hidden
dotted
dashed
solid
double
border-width
groove
3D border-color
ridge
3D border-color
inset
outset
<html>
<head>
p
{

}
</style>
{
document.getElementById("p1").style.borderLeftStyle="dotted";
}
</script>
</head>
<body>
</body>
</html>
TIY
borderLeftStyle -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderLeftStyle="dotted";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change left
border" />

</body>
</html>
HTML DOM borderLeftWidth
borderLeftWidth
Object.style.borderLeftWidth=thin|medium|thick|length
thin
medium
thick
length
<html>
<head>
p
{
border: thin solid #FF0000;
}
</style>
{
document.getElementById("p1").style.borderLeftWidth="thick";
}
</script>
</head>
<body>
</body>
</html>
HTML DOM borderRight
borderRight
Object.style.borderRight=borderWidth borderStyle borderColor
borderWidth
borderStyle
thin
medium
thick
length
none
hidden
dotted
dashed
borderColor
solid
double
groove
ridge
inset
outset
color-name
color-rgb
color-hex
transparent
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderRight="thick solid
#0000FF";
}
</script>
</head>
<body>
value="Change right border" />
</body>
</html>
TIY
borderRight -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderRight="thick solid
#0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change right
border" />
</body>
</html>
HTML DOM borderRightColor
borderRightColor
Object.style.borderRightColor=color-name|color-rgb|color-hex|tran
sparent
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderRightColor="#0000FF";
}
</script>
</head>
<body>
</body>
</html>
TIY
borderRightColor -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderRightColor="#0000FF";
}
</script>
</head>
<body>
right border" />
</body>
</html>
HTML DOM borderRightStyle
borderRightStyle
Object.style.borderRightStyle=style
none
hidden
"none" hidden
dotted
dashed
solid
double
border-width
groove
3D border-color
ridge
3D border-color
inset
outset
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderRightStyle="dotted";
}
</script>
</head>
<body>
</body>
</html>
TIY
borderRightStyle -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderRightStyle="dotted";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change right
border" />
</body>
</html>
HTML DOM borderRightWidth
borderRightWidth
Object.style.borderRightWidth=thin|medium|thick|length
Possible Values
thin
medium
thick
length
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderRightWidth="thick";
}
</script>
</head>
<body>
value="Change right border width" />
</body>
</html>
TIY
borderRightWidth -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderRightWidth="thick";
}
</script>
</head>
<body>
right border width" />
</body>
</html>
HTML DOM borderStyle
borderStyle
1 4
Object.style.borderStyle=style
none
hidden
"none" hidden
dotted
dashed
solid
double
border-width
groove
3D border-color
ridge
3D border-color
inset
outset
<html>
<head>
<style>
p
{
}
</style>
{
document.getElementById("p1").style.borderStyle="dotted double";
}
</script>
</head>
<body>
<form>
value="Change paragraph border style" />
</form>
</body>
</html>
TIY
<html>
<head>
<style>
p
{
}
</style>
{
document.getElementById("p1").style.borderStyle="dotted double";
}
</script>
</head>
<body>
<form>
<input type="button" onclick="changeBorder()" value="Change
paragraph border style" />
</form>
</body>
</html>
HTML DOM borderTop
borderTop

Object.style.borderTop=borderWidth borderStyle borderColor
borderWidth
borderStyle
borderColor
<html>
<head>
p
{
}
</style>
thin
medium
thick
length
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
color-name
color-rgb
color-hex
transparent
{
document.getElementById("p1").style.borderTop="thick solid
#0000FF";
}
</script>
</head>
<body>
value="Change top border" />
</body>
</html>
TIY
borderTop -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderTop="thick solid
#0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change top
border" />
</body>
</html>
HTML DOM borderTopColor
borderTopColor
Object.style.borderTopColor=color-name|color-RGB|color-hex
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderTopColor="#0000FF";
}
</script>
</head>
<body>
value="Change paragraph border color" />
</body>
</html>
TIY
borderTopColor -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderTopColor="#0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorderColor()" value="Change top
border color" />
</body>
</html>
HTML DOM borderTopStyle
borderTopStyle

Object.style.borderTopStyle=style
none
hidden
"none" hidden
dotted
dashed
solid
double
border-width
groove
3D border-color
ridge
3D border-color
inset
outset
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderTopStyle="dotted";
}
</script>
</head>
<body>
value="Change border style" />
</body>
</html>
TIY
borderTopStyle -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderTopStyle="dotted";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change top
border style" />
</body>
</html>
HTML DOM borderTopWidth
borderTopWidth
Object.style.borderTopWidth=thin|medium|thick|length
thin
medium
thick
length
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderTopWidth="thick";
}
</script>
</head>
<body>
value="Change border width" />
</body>
</html>
TIY
borderTopWidth -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderTopWidth="thick";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorderWidth()" value="Change top
border width" />
</body>
</html>
HTML DOM borderWidth
borderWidth
1 4
div {border-width: thick} -
div {border-width: thick thin} -
div {border-width: thick thin medium}-

(medium)
div {border-width: thick thin medium 10px} -
10px
Object.style.borderWidth=thin|medium|thick|length
thin
medium
thick
length
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderWidth="thick thin";
}
</script>
</head>
<body>
value="Change border widths" />
</body>
</html>
TIY
borderWidth -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.borderWidth="thick thin";
}
</script>
</head>
<body>
border widths" />

</body>
</html>
HTML DOM margin
margin
1 4
div {margin: 50px} - 50 px
div {margin: 50px 10px} - 50px
10 px
div {margin: 50px 10px 20px}- 50 px
10 px 20 px
div {margin: 50px 10px 20px 30px} - 50 px
10 px 20 px 30 px
Object.style.margin=margin
margin

auto
<html>
<head>
function changeMargin()
{
document.getElementById("p1").style.margin="100px";
}
</script>
</head>
<body>
<input type="button" onclick="changeMargin()"
value="Change margins of a paragraph" />
</body>
</html>
TIY
margin -
<html>
<head>
{
document.getElementById("p1").style.margin="100px";
}
</script>
</head>
<body>
<input type="button" onclick="changeMargin()" value="Change margins
of a paragraph" />
</body>
</html>
HTML DOM marginBottom
marginBottom
Object.style.marginBottom=auto|length|%
auto
length
<html>
<head>
{
document.getElementById("p1").style.marginBottom="32px";
}
</script>
</head>
<body>
value="Change the bottom margin of a paragraph" />
</body>
</html>
TIY
marginBottom -
<html>
<head>
{
document.getElementById("p1").style.marginBottom="32px";
}
</script>
</head>
<body>
<input type="button" onclick="changeMargin()" value="Change the
bottom margin of a paragraph" />
</body>
</html>
HTML DOM marginLeft
marginLeft
Object.style.marginLeft=auto|length|%
auto
length
<html>
<head>
{
document.getElementById("p1").style.marginLeft="32px";
}
</script>
</head>
<body>
value="Change the left margin of a paragraph" />
</body>
</html>
TIY
marginLeft -
<html>
<head>
{
document.getElementById("p1").style.marginLeft="32px";
}
</script>
</head>
<body>
<input type="button" onclick="changeMargin()" value="Change the left
margin of a paragraph" />
</body>
</html>
HTML DOM marginRight
marginRight
Object.style.marginRight=auto|length|%
auto
length
<html>
<head>
p
{
text-align: right
}
</style>
{
document.getElementById("p1").style.marginRight="32px";
}
</script>
</head>
<body>
value="Change the right margin of a paragraph" />
</body>
</html>
TIY
marginRight -
<html>
<head>
p
{
text-align: right;
}
</style>
{
document.getElementById("p1").style.marginRight="32px";
}
</script>
</head>
<body>
<input type="button" onclick="changeMargin()" value="Change the
right margin of a paragraph" />
</body>
</html>
HTML DOM marginTop
marginTop
Object.style.marginTop=auto|length|%
auto
length
<html>
<head>
{
document.getElementById("p1").style.marginTop="32px";
}
</script>
</head>
<body>
value="Change the top margin of a paragraph" />
</body>
</html>
TIY
marginTop -
<html>
<head>
{
document.getElementById("p1").style.marginTop="32px";
}
</script>
</head>
<body>
<input type="button" onclick="changeMargin()" value="Change the top
margin of a paragraph" />
</body>
</html>
HTML DOM outline
outline
Object.style.outline = outlineWidth outlineStyle outlineColor
outlineWidth
outlineStyle
outlineColor
thin
medium
thick
length
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
color-name
color-rgb
color-hex
transparent
<html>
<head>
p
{
border: thin solid #00FF00;
outline: thick solid #FF0000;
}
</style>
function changeOutline()
{
document.getElementById("p1").style.outline="thin dotted #0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeOutline()"
value="Change outline" />
</body>
</html>
TIY
outline - IE
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.outline="thin dotted #0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeOutline()" value="Change
outline" />
</body>
</html>
HTML DOM outlineColor
outlineColor
Object.style.outlineColor=color-name|color-rgb|color-hex
<html>
<head>
p
{
}
</style>
function changeOutlineColor()
{
document.getElementById("p1").style.outlineColor="#00FF00";
}
</script>
</head>
<body>
<input type="button" onclick="changeOutlineColor()"
value="Change outline color" />
</body>
</html>
TIY
outlineColor - IE
<html>
<head>
p
{
}
</style>
function changeOutlineColor()
{
document.getElementById("p1").style.outlineColor="#00FF00";
}
</script>
</head>
<body>
<input type="button" onclick="changeOutlineColor()" value="Change
outline color" />

</body>
</html>
HTML DOM outlineStyle
outlineStyle
Object.style.outlineStyle=style
none
dotted
dashed
solid
double
outline-width
groove
3D outline-color
ridge
3D outline-color
inset
3D outline-color
outset
3D outline-color
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.outlineStyle="dotted";
}
</script>
</head>
<body>
<input type="button" onclick="changeOutline()"
value="Change outline style" />
</body>
</html>
TIY
outlineStyle - IE
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.outlineStyle="dotted";
}
</script>
</head>
<body>
<input type="button" onclick="changeOutline()" value="Change outline
style" />
</body>
</html>
HTML DOM outlineWidth
outlineWidth
Object.style.outlineWidth=thin|medium|thick|length
thin
medium
thick
length
<html>
<head>
p
{
}
</style>
function changeOutlineWidth()
{
document.getElementById("p1").style.outlineWidth="thin";
}
</script>
</head>
<body>
<input type="button" onclick="changeOutlineWidth()"
value="Change outline width" />
</body>
</html>
TIY
outlineWidth - IE
<html>
<head>
p
{
}
</style>
function changeOutlineWidth()
{
document.getElementById("p1").style.outlineWidth="thin";
}
</script>
</head>
<body>
<input type="button" onclick="changeOutlineWidth()" value="Change
outline width" />
</body>
</html>
HTML DOM padding
padding
padding
4
div {padding: 50px} - padding 50 px
div {padding: 50px 10px} - 50 px
10 px
div {padding: 50px 10px 20px} - 50 px
10 px 20 px
div {padding: 50px 10px 20px 30px} - 50 px
10 px 20 px 30 px
Object.style.padding=padding
Possible Values
padding

auto
<html>
<head>
p
{
}
</style>
function changePadding()
{
document.getElementById("p1").style.padding="2cm";
}
</script>
</head>
<body>
<input type="button" onclick="changePadding()"
value="Change padding" />
</body>
</html>
TIY
padding -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.padding="2cm";
}
</script>
</head>
<body>
<input type="button" onclick="changePadding()" value="Change
padding" />
</body>
</html>
HTML DOM paddingBottom
paddingBottom
padding
Object.style.paddingBottom=length|%
length
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.paddingBottom="2cm";
}
</script>
</head>
<body>
value="Change bottom padding" />
</body>
</html>
TIY
paddingBottom -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.paddingBottom="2cm";
}
</script>
</head>
<body>
<input type="button" onclick="changePadding()" value="Change bottom
padding" />
</body>
</html>
HTML DOM paddingLeft
paddingLeft
padding
Object.style.paddingLeft=length|%
length
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.paddingLeft="2cm";
}
</script>
</head>
<body>
value="Change left padding" />
</body>
</html>
TIY
paddingLeft -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.paddingLeft="2cm";
}
</script>
</head>
<body>
<input type="button" onclick="changePadding()" value="Change left
padding" />
</body>
</html>
HTML DOM paddingRight
paddingRight
padding
Object.style.paddingRight=auto|length|%
length
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.paddingRight="2cm";
}
</script>
</head>
<body>
value="Change right padding" />
<p id="p1">This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.</p>
</body>
</html>
TIY
paddingRight -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.paddingRight="2cm";
}
</script>
</head>
<body>
<input type="button" onclick="changePadding()" value="Change right
padding" />
<p id="p1">This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph.
This is a paragraph. This is a paragraph.</p>
</body>
</html>
HTML DOM paddingTop
padding
padding
Object.style.paddingTop=length|%
length
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.paddingTop="2cm";
}
</script>
</head>
<body>
value="Change top padding" />
</body>
</html>
TIY
paddingTop -
<html>
<head>
p
{
}
</style>
{
document.getElementById("p1").style.paddingTop="2cm";
}
</script>
</head>
<body>
<input type="button" onclick="changePadding()" value="Change top
padding" />
</body>
</html>
HTML DOM clear
clear
Object.style.clear=left|right|both|none
left
right
both
none
<html>
<head>
img
{
float:left;
}
</style>
function clearLeft()
{
document.getElementById("p1").style.clear="left";
}
</script>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
<p id="p1">This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</p>
<input type="button" onclick="clearLeft()"
value="Clear left side of text" />
</body>
</html>
TIY
<html>
<head>
img
{
float:left;
}
</style>
function clearLeft()
{
document.getElementById("p1").style.clear="left";
}
</script>
</head>
<body>
<img src="/i/ct_beatles.jpg" />

<input type="button" onclick="clearLeft()" value="Clear left side of
text" />
</body>
</html>
HTML DOM clip
clip
"clip"
Object.style.clip=rect(top,right,bottom,left)|auto
rect(top,right,bottom,left)
auto
"overflow" "visible"
<html>
<head>
img
{
position:absolute;
top:100px;
}
</style>
function clipImage()
{
document.getElementById("img1").style.clip="rect(0px,50px,50px,0p
x)";
}
</script>
</head>
<body>
<img id="img1" border="0" src="logocss.gif" width="95" height="84"
/>
<input type="button" onclick=clipImage() value="Clip image" />
</body>
</html>
TIY
<html>
<head>
img
{
position:absolute;
top:100px;
}
</style>
function clipImage()
{
document.getElementById("img1").style.clip="rect(0px,50px,50px,0p
x)";
}
</script>
</head>
<body>
<img id="img1" border="0" src="/i/eg_sun.gif" />
<input type="button" onclick=clipImage() value="Clip image" />
</body>
</html>
HTML DOM content
content
Object.style.content=value
string
url
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name,
string,
list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
<html>
<head>
function setFloatLeft()
{
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="logocss.gif" width="95" height="84" />
<p>This is some text. This is some text. This is some text.
<form>
<input type="button" onclick="setFloatLeft()" value="Set image to
float left" />
</form>
</body>
</html>
TIY
<html>
<head>
function setFloat()
{
}
</script>
</head>
<body>
<img id="img1" src="/i/ct_beatles.jpg" />
<input type="button" onclick="setFloat()" value="Set image to float
to the left" />
</body>
</html>
HTML DOM cssFloat
Object.style.cssFloat=left|right|none
left
right
none
<html>
<head>
function setFloat()
{
}
</script>
</head>
<body>
<img id="img1" src="logocss.gif" />
<input type="button" onclick="setFloat()"
value="Set image to float to the left" />
</body>
</html>
TIY
cssFloat - IE
<html>
<head>
function setFloat()
{
}
</script>
</head>
<body>
<img id="img1" src="/i/ct_beatles.jpg" />
<input type="button" onclick="setFloat()" value="Set image to float
to the left" />
</body>
</html>
HTML DOM cursor
cursor
Object.style.cursor=cursortype
url
URL
URL
default
auto
crosshair
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
<html>
<head>
function changeCursor()
{
document.body.style.cursor="crosshair";
document.getElementById("p1").style.cursor="text";
}
</script>
</head>
<body>
<p id="p1">This is some text. This is some text.
This is some text.</p>
<input type="button" onclick="changeCursor()"
value="Change cursor" />
</body>
</html>
TIY
cursor -
<html>
<head>
function changeCursor()
{
document.body.style.cursor="crosshair";
document.getElementById("p1").style.cursor="text";
}
</script>
</head>
<body>
<input type="button" onclick="changeCursor()" value="Change cursor"
/>
</body>
</html>
HTML DOM direction
direction
Object.style.direction=ltr|rtl|inherit
Possible Values
ltr
rtl
inherit
<html>
<head>
function changeTextDirection()
{
document.getElementById("p1").style.direction="rtl";
}
</script>
</head>
<body>
<input type="button" onclick="changeTextDirection()"
value="Set text to flow right to left" />

</body>
</html>
TIY
direction -
<html>
<head>
function changeTextDirection()
{
document.getElementById("p1").style.direction="rtl";
}
</script>
</head>
<body>
<input type="button" onclick="changeTextDirection()" value="Set text
to flow from right to left" />
</body>
</html>
HTML DOM display
display
Object.style.display=value
Possible Values
none
block
inline
list-item
run-in
compact
marker
table
<table>
inline-table
<table>
table-row-group
<tbody>
table-header-group
<thead>
table-footer-group
<tfoot>
table-row
<tr>
table-column-group
<colgroup>
table-column
<col>
table-cell
<td> <th>
table-caption
<caption>
<html>
<head>
function removeElement()
{
document.getElementById("p1").style.display="none";
}
</script>
</head>
<body>
<h1>Hello</h1>
<input type="button" onclick="removeElement()"
value="Do not display paragraph" />
</body>
</html>
TIY
display -
<html>
<head>
function removeElement()
{
document.getElementById("p1").style.display="none";
}
</script>
</head>
<body>
<h1>This is a header</h1>
<input type="button" onclick="removeElement()" value="Do not display
paragraph" />
</body>
</html>
HTML DOM height
height
Object.style.height=auto|length|%
auto
length
pxcm
<html>
<head>
function setHeight()
{
document.getElementById("b1").style.height="50px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setHeight()"
value="Change height of button to 50 px" />
</body>
</html>
TIY
height -
<html>
<head>
function setHeight()
{
document.getElementById("b1").style.height="50px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setHeight()" value="Change
height of button to 50 px" />
</body>
</html>
HTML DOM maxHeight
maxHeight
Object.style.maxHeight=length|%
length
<html>
<head>
function setMaxHeight()
{
document.getElementById("p1").style.maxHeight="10px";
}
</script>
</head>
<body>
<input type="button" onclick="setMaxHeight()"
value="Set max height" />
</body>
</html>
TIY
maxHeight -
<html>
<head>
function setMaxHeight()
{
document.getElementById("p1").style.maxHeight="10px";
}
</script>
</head>
<body>
<input type="button" onclick="setMaxHeight()" value="Set max height"

/>
</body>
</html>
HTML DOM maxWidth
maxWidth
Object.style.maxWidth=length|%
length
<html>
<head>
function setMaxWidth()
{
document.getElementById("p1").style.maxWidth="10px";
}
</script>
</head>
<body>
<input type="button" onclick="setMaxWidth()"
value="Set max width" />
</body>
</html>
TIY
maxWidth -
<html>
<head>
function setMaxWidth()
{
document.getElementById("p1").style.maxWidth="10px";
}
</script>
</head>
<body>
<input type="button" onclick="setMaxWidth()" value="Set max width"
/>
</body>
</html>
HTML DOM minHeight
minHeight
Object.style.minHeight=length|%
length
<html>
<head>
function setMinHeight()
{
document.getElementById("p1").style.minHeight="200px";
}
</script>
</head>
<body>
<input type="button" onclick="setMinHeight()"
value="Set min height" />
</body>
</html>
TIY
minHeight -
<html>
<head>
function setMinHeight()
{
document.getElementById("p1").style.minHeight="200px";
}
</script>
</head>
<body>
<input type="button" onclick="setMinHeight()" value="Set min height"
/>
</body>
</html>
HTML DOM minWidth
minWidth
Object.style.minWidth=length|%
length
<html>
<head>
function setMinWidth()
{
document.getElementById("p1").style.minWidth="1000px";
}
</script>
</head>
<body>
<input type="button" onclick="setMinWidth()" value="Set min width"
/>
</body>
</html>
TIY
minWidth -
<html>
<head>
function setMinWidth()
{
document.getElementById("p1").style.minWidth="1000px";
}
</script>
</head>
<body>
<input type="button" onclick="setMinWidth()" value="Set min width"
/>
</body>
</html>
HTML DOM overflow
overflow
Object.style.overflow=visible|hidden|scroll|auto
visible
hidden
scroll
auto

overflow
<html>
<head>
div
{
border:thin solid green;
width:100px;
height:100px;
}
</style>
function hideOverflow()
{
document.getElementById("div1").style.overflow="hidden";
}
</script>
</head>
<body>
<div id="div1">
</div>
<br />
<input type="button" onclick="hideOverflow()"
value="Hide overflow" />
</body>
</html>
TIY
overflow -
<html>
<head>
div
{
border:thin solid green;
width:100px;
height:100px;
}
</style>
function hideOverflow()
{
document.getElementById("div1").style.overflow="hidden";
}
</script>
</head>
<body>
<div id="div1">
</div>
<br />
<input type="button" onclick="hideOverflow()" value="Hide overflow"
/>
</body>
</html>
HTML DOM verticalAlign
verticalAlign
Object.style.verticalAlign=value
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
"line-height"
<html>
<head>
function alignText()
{
document.getElementById("td1").style.verticalAlign="bottom";
}
</script>
</head>
<body>
<table border="1" height="100px">
<tr>
<td id="td1">
Some example text
</td>
</tr>
</table>
<br />
<input type="button" onclick="alignText()"

value="Align text" />
</body>
</html>
TIY
verticalAlign -
<html>
<head>
function alignText()
{
document.getElementById("td1").style.verticalAlign="bottom";
}
</script>
</head>
<body>
<table border="1" height="100px">
<tr>
<td id="td1">
Some example text
</td>
</tr>
</table>
<br />
<input type="button" onclick="alignText()" value="Align text" />
</body>
</html>
HTML DOM visibility
visibility

Object.style.visibility=visible|hidden|collapse
visible
hidden
collapse
"hidden"
<html>
<head>
function changeVisibility()
{
document.getElementById("p1").style.visibility="hidden";
}
</script>
</head>
<body>
<form>
<input type="button" onclick="changeVisibility()"
value="Hide paragraph" />
</form>
</body>
</html>
TIY
visibility -
<html>
<head>
function changeVisibility()
{
document.getElementById("p1").style.visibility="hidden";
}
</script>
</head>
<body>
<input type="button" onclick="changeVisibility()" value="Hide text"
/>
</body>
</html>
HTML DOM width
width
Object.style.width=auto|length|%
auto
length
pxcm
<html>
<head>
function setWidth()
{
document.getElementById("b1").style.width="300px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setWidth()"
value="Change width to 300 px" />
</body>
</html>
TIY
width -
<html>
<head>
function setWidth()
{
document.getElementById("b1").style.width="300px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setWidth()" value="Change
width to 300 px" />

</body>
</html>
HTML DOM listStyle
listStyle
Object.style.listStyle=listStyleType listStylePosition
listStyleImage
Possible Values
listStyleType
none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
listStylePosition
listStyleImage
hiragana-iroha
katakana-iroha
outside
inside
none
url(url)
<html>
<head>
function changeList()
{
document.getElementById("ul1").style.listStyle="decimal inside";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<input type="button" onclick="changeList()"
value="Change list style" />
</body>
</html>
TIY
listStyle -
<html>
<head>
{
document.getElementById("ul1").style.listStyle="decimal inside";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<input type="button" onclick="changeList()" value="Change list
style" />
</body>
</html>
HTML DOM listStyleImage
listStyleImage
Object.style.listStyleImage=url|none
url
none
<html>
<head>
{
document.getElementById("ul1").style.listStyleImage="url('blueb.g
if')";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
value="Change list-item marker" />
</body>
</html>
TIY
listStyleImage -
<html>
<head>
{
document.getElementById("ul1").style.listStyleImage="url('/i/ct_b
lueball.gif')";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
<input type="button" onclick="changeList()" value="Change list-item
marker" />
</body>
</html>
HTML DOM listStylePosition
listStylePosition
Object.style.listStylePosition=inside|outside
inside
outside
<html>
<head>
{
document.getElementById("ul1").style.listStylePosition="inside";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
value="Change list-item marker position" />
</body>
</html>
TIY
listStylePosition -
<html>
<head>
{
document.getElementById("ul1").style.listStylePosition="inside";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
marker position" />
</body>
</html>
HTML DOM listStyleType
listStyleType
Object.style.listStyleType=value
CSS2
none
disc
circle
square
decimal
decimal-leading-zero
0 (01, 02, 03, )
lower-roman
(i, ii, iii, iv, v, )
upper-roman
(I, II, III, IV, V, )
lower-alpha
The marker is lower-alpha (a, b, c, d, e, )
upper-alpha
The marker is upper-alpha (A, B, C, D, E, )
lower-greek
(alpha, beta, gamma, )
lower-latin
(a, b, c, d, e, )
upper-latin
(A, B, C, D, E, )
hebrew
armenian
georgian
(an, ban, gan, )
cjk-ideographic
hiragana
a, i, u, e, o, ka, ki,
katakana
A, I, U, E, O, KA, KI,
hiragana-iroha
i, ro, ha, ni, ho, he, to,
katakana-iroha
I, RO, HA, NI, HO, HE, TO,
CSS2.1
disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin
| armenian | georgian | none | inherit
<html>
<head>
{
document.getElementById("ul1").style.listStyleType="square";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
value="Change list-item marker type" />
</body>
</html>
TIY
listStyleType -
<html>
<head>
{
document.getElementById("ul1").style.listStyleType="square";
}
</script>
</head>
<body>
<ul id="ul1">
<li>Coffee</li>
<li>Tea</li>
<li>Water</li>
<li>Soda</li>
</ul>
marker type" />
</body>
</html>
HTML DOM bottom
bottom
Object.style.bottom=auto|%|length
auto
length
pxcm
Note: "position" "static" "bottom"
<html>
<head>
input
{
position:absolute;
}
</style>
function setBottomEdge()
{
document.getElementById("b1").style.bottom="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setBottomEdge()"
value="Set bottom edge to 100 px" />
</body>
</html>
TIY
bottom -
<html>
<head>
input
{
position:absolute;
}
</style>
function setBottomEdge()
{
document.getElementById("b1").style.bottom="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setBottomEdge()" value="Set
bottom edge to 100 px" />
</body>
</html>
HTML DOM left
left
Object.style.left=auto|%|length
auto
length
pxcm
"position" "static" "left"
<html>
<head>
input
{
position:absolute;
}
</style>
function setLeftEdge()
{
document.getElementById("b1").style.left="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setLeftEdge()"
value="Set left edge to 100 px" />
</body>
</html>
TIY
left -
<html>
<head>
input
{
position:absolute;
}
</style>
function setLeftEdge()
{
document.getElementById("b1").style.left="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setLeftEdge()" value="Set left
edge to 100 px" />
</body>
</html>
HTML DOM position
position
Object.style.position=static|relative|absolute|fixed
static
static static
topbottomleft right
relative
relative
"left:20" 20
absolute
absolute
"left""top""right" "bottom"
fixed
fixed
"left""top""right" "bottom"
IE7strict
<html>
<head>
input
{
position:relative;
}
</style>
function setPositionAbsolute()
{
document.getElementById("b1").style.position="absolute";
document.getElementById("b1").style.top="10px";
}
</script>
</head>
<body>
<p>This is an example paragraph</p>
<input type="button" id="b1" onclick="setPositionAbsolute()"
value="Set button position to be absolute" />
</body>
</html>
TIY
position -
<html>
<head>
input
{
position:relative;
}
</style>
function setPositionAbsolute()
{
document.getElementById("b1").style.position="absolute";
}
</script>
</head>
<body>
<p>This
<p>This
<p>This
<p>This
<p>This
<p>This
<p>This
<p>This
<p>This
<p>This
<p>This
is
is
is
is
is
is
is
is
is
is
is
an
an
an
an
an
an
an
an
an
an
an
example
example
example
example
example
example
example
example
example
example
example
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
<input type="button" id="b1" onclick="setPositionAbsolute()"

value="Set button position to be absolute" />
</body>
</html>
HTML DOM right
right
Object.style.right=auto|%|length
auto
length
pxcm

"position" "static" "right"
<html>
<head>
input
{
position:absolute;
}
</style>
function setRightEdge()
{
document.getElementById("b1").style.right="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setRightEdge()"
value="Set right edge to 100 px" />
</body>
</html>
TIY
right -
<html>
<head>
input
{
position:absolute;
}
</style>
function setRightEdge()
{
document.getElementById("b1").style.right="100px";
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setRightEdge()" value="Set
right edge to 100 px" />
</body>
</html>
HTML DOM top
top
Object.style.top=auto|%|length
auto
length
pxcm
"position" "static" "top"
<html>
<head>
input
{
position:absolute;
}
</style>
function setTopEdge()
{
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setTopEdge()"
value="Set top edge to 100 px" />
</body>
</html>
TIY
top -
<html>
<head>
input
{
position:absolute;
}
</style>
function setTopEdge()
{
}
</script>
</head>
<body>
<input type="button" id="b1" onclick="setTopEdge()" value="Set top
edge to 100 px" />
</body>
</html>
HTML DOM zIndex
zIndex
z z
Object.style.zIndex=auto|number
auto
number
z-index
Z-index position:absolute;
<html>
<head>
#img1
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
function changeStackOrder()
{
document.getElementById("img1").style.zIndex="1";
}
</script>
</head>
<body>
<h1>This is a Heading</h1>
<img id="img1" src="bulbon.gif" width="100" height="180">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
<input type="button" onclick="changeStackOrder()"
value="Change stack order" />
</body>
</html>
TIY
zIndex -
<html>
<head>
#img1
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
function changeStackOrder()
{
document.getElementById("img1").style.zIndex="1";
}
</script>
</head>
<body>
<h1>This is a Heading</h1>
<img id="img1" src="/i/eg_bulbon.gif">
<p>Default z-index is 0. Z-index -1 has lower priority.</p>
<input type="button" onclick="changeStackOrder()" value="Change
stack order" />
</body>
</html>
HTML DOM pageBreakAfter
pageBreakAfter
Object.style.pageBreakAfter=auto|always|avoid|left|right
auto
always
avoid
left
right
id p1 page-break
<html>
<head>
function setPageBreak()
{
document.getElementById("p1").style.pageBreakAfter="always";
}
</script>
</head>
<body>
<p id="p1">This is a test paragraph.</p>
<input type="button" onclick="setPageBreak()"
value="Set page-break" />
<p>This is also a test paragraph.</p>
</body>
</html>
HTML DOM pageBreakBefore
pageBreakBefore
Object.style.pageBreakBefore=auto|always|avoid|left|right
auto
always
avoid
left
right
id p2 page-break
<html>
<head>
{
document.getElementById("p2").style.pageBreakBefore="always";
}
</script>
</head>
<body>
<p>This is a test paragraph.</p>

value="Set page-break" />
<p id="p2">This is also a test paragraph.</p>
</body>
</html>
HTML DOM pageBreakInside
pageBreakInside
Object.style.pageBreakInside=auto|avoid
auto
avoid
id p2 page-break
<html>
<head>
{
document.getElementById("p2").style.pageBreakInside="avoid";
}
</script>
</head>
<body>
<p>This is a test paragraph.</p>
value="Set page to not break inside the second paragraph" />
<p id="p2">This is also a test paragraph. We need some
more text here. This is just filler text.</p>
</body>
</html>
HTML DOM scrollbar3dLightColor
Object.style.scrollbar3dLightColor=color
color
(red)rgb (rgb(255,0,0)) (#ff0000)
<html>
<head>
function setScrollbar3dLightColor()
{
document.body.style.scrollbar3dLightColor="blue";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbar3dLightColor()"
value="Set Scrollbar3dLightColor" />
</body>
</html>
TIY
<html>
<head>
function setScrollbar3dLightColor()
{
document.body.style.scrollbar3dLightColor="blue";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbar3dLightColor()"
value="Set Scrollbar3dLightColor" />
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
example
example
example
example
example
example
example
example
example
example
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
<p>An example paragraph</p>

</body>
</html>
HTML DOM scrollbarArrowColor
scrollbarArrowColor
Object.style.scrollbarArrowColor=color
color
(red)rgb (rgb(255,0,0)) (#ff0000)
<html>
<head>
function setScrollbarArrowColor()
{
document.body.style.scrollbarArrowColor="green";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarArrowColor()"
value="Set ScrollbarArrowColor" />
</body>
</html>
TIY
scrollbarArrowColor
<html>
<head>
function setScrollbarArrowColor()
{
document.body.style.scrollbarArrowColor="green";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarArrowColor()" value="Set
ScrollbarArrowColor" />
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
example
example
example
example
example
example
example
example
example
example
example
</body>
</html>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
HTML DOM scrollbarBaseColor
scrollbarBaseColor
Object.style.scrollbarBaseColor=color
color
(red)rgb (rgb(255,0,0)) (#ff0000)
<html>
<head>
function setScrollbarColor()
{
document.body.style.scrollbarBaseColor="green";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarColor()"
value="Set ScrollbarColor" />
</body>
</html>
TIY
scrollbarColor
<html>
<head>
function setScrollbarColor()
{
document.body.style.scrollbarBaseColor="green";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarColor()" value="Set
ScrollbarColor" />
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
example
example
example
example
example
example
example
example
example
example
example
</body>
</html>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
HTML DOM
Object.style.scrollbarDarkShadowColor=color
color
(red)rgb (rgb(255,0,0)) (#ff0000)
<html>
<head>
function setScrollbarDarkShadowColor()
{
document.body.style.scrollbarDarkShadowColor="darkred";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarDarkShadowColor()"
value="Set ScrollbarDarkShadowColor" />
</body>
</html>
TIY
<html>
<head>
function setScrollbarDarkShadowColor()
{
document.body.style.scrollbarDarkShadowColor="darkred";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarDarkShadowColor()"
value="Set ScrollbarDarkShadowColor" />
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
example
example
example
example
example
example
example
example
example
example
example
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
</body>
</html>
HTML DOM scrollbarFaceColor
scrollbarFaceColor

Object.style.scrollbarFaceColor=color
color
(red)rgb (rgb(255,0,0)) (#ff0000)
<html>
<head>
function setScrollbarFaceColor()
{
document.body.style.scrollbarFaceColor="green";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarFaceColor()"
value="Set ScrollbarFaceColor" />
</body>
</html>
TIY
scrollbarFaceColor
<html>
<head>
function setScrollbarFaceColor()
{
document.body.style.scrollbarFaceColor="green";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarFaceColor()" value="Set
ScrollbarFaceColor" />
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
example
example
example
example
example
example
example
example
example
example
example
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
</body>
</html>
HTML DOM scrollbarHighlightColor
Object.style.scrollbarHighlightColor=color
color
(red)rgb (rgb(255,0,0)) (#ff0000)
<html>
<head>
function setScrollbarHighlightColor()
{
document.body.style.scrollbarHighlightColor="purple";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarHighlightColor()"
value="Set ScrollbarHighlightColor" />
</body>
</html>
TIY
<html>
<head>
function setScrollbarHighlightColor()
{
document.body.style.scrollbarHighlightColor="purple";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarHighlightColor()"
value="Set ScrollbarHighlightColor" />
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
example
example
example
example
example
example
example
example
example
example
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
</body>
</html>
HTML DOM scrollbarShadowColor
Object.style.scrollbarShadowColor=color
Color
(red)rgb (rgb(255,0,0)) (#ff0000)
<html>
<head>
function setScrollbarShadowColor()
{
document.body.style.scrollbarShadowColor="pink";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarShadowColor()"
value="Set ScrollbarShadowColor" />
</body>
</html>
TIY
<html>
<head>
function setScrollbarShadowColor()
{
document.body.style.scrollbarShadowColor="pink";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarShadowColor()" value="Set
ScrollbarShadowColor" />
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
example
example
example
example
example
example
example
example
example
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>

</body>
</html>
HTML DOM scrollbarTrackColor
scrollbarTrackColor
Object.style.scrollbarTrackColor=color
color
(red)rgb (rgb(255,0,0)) (#ff0000)
<html>
<head>
function setScrollbarTrackColor()
{
document.body.style.scrollbarTrackColor="pink";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarTrackColor()"
value="Set ScrollbarTrackColor" />
</body>
</html>
TIY
scrollbarTrackColor
<html>
<head>
function setScrollbarTrackColor()
{
document.body.style.scrollbarTrackColor="pink";
}
</script>
</head>
<body>
<input type="button" onclick="setScrollbarTrackColor()" value="Set
ScrollbarTrackColor" />
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
<p>An
example
example
example
example
example
example
example
example
example
example
example
</body>
</html>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
paragraph</p>
HTML DOM borderCollapse
borderCollapse HTML
Object.style.borderCollapse=collapse|separate
separate
collapse
<html>
<head>
function setBorderCollapse()
{
document.getElementById('myTable').style.borderCollapse="collapse
"
}
</script>
</head>
<body>
<table border="1" id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="setBorderCollapse()"
value="Collapse border">
</body>
</html>
TIY
borderCollapse -
<html>
<head>
function setBorderCollapse()
{
document.getElementById('myTable').style.borderCollapse="collapse
";
}
</script>
</head>
<body>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="setBorderCollapse()" value="Collapse
border">
</body>
</html>
HTML DOM borderSpacing
borderSpacing
Object.style.borderSpacing=length,length
length length
pxcm length
length
length
<html>
<head>
function changeBorderSpacing()
{
document.getElementById('myTable').style.borderSpacing="10px"
}
</script>
</head>
<body>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<input type="button" onclick="changeBorderSpacing()"
value="Change border spacing">
</body>
</html>
TIY
borderSpacing - IE
<html>
<head>
function changeBorderSpacing()
{
document.getElementById('myTable').style.borderSpacing="10px";
}
</script>
</head>
<body>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="changeBorderSpacing()" value="Change
border spacing">
</body>
</html>
HTML DOM captionSide
captionSide
Object.style.captionSide=top|bottom|left|right
top
bottom
left
right
<html>
<head>
caption
{
caption-side:bottom;
}
</style>
function moveCaption()
{
document.getElementById('myTable').style.captionSide="right"
}
</script>
</head>
<body>
<caption>This is a caption</caption>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="moveCaption()"
value="Move table caption">
</body>
</html>
TIY
captionSide - IE
<html>
<head>
caption
{
caption-side:bottom;
}
</style>
function moveCaption()
{
document.getElementById('myTable').style.captionSide="right";
}
</script>
</head>
<body>
<caption>This is a caption</caption>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="moveCaption()" value="Move table
caption">
</body>
</html>
HTML DOM emptyCells
emptyCells
Object.style.emptyCells=hide|show
hide
show
<html>
<head>
function showEmptyCells()
{
document.getElementById('myTable').style.emptyCells="show"
}
</script>
</head>
<body>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td></td>
</tr>
</table>
<input type="button" onclick="showEmptyCells()"
value="Show empty cells">
</body>
</html>
TIY
<html>
<head>
function showEmptyCells()
{
document.getElementById('myTable').style.emptyCells="show";
}
</script>
</head>
<body>
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td></td>
</tr>
</table>
<input type="button" onclick="showEmptyCells()" value="Show empty
cells">
</body>
</html>
HTML DOM tableLayout
tableLayout

Object.style.tableLayout=automatic|fixed
automatic
fixed
<html>
<head>
function setFixedTableLayout()
{
document.getElementById('myTable').style.tableLayout="fixed";
}
</script>
</head>
<body>
<table id="myTable" border="1" width="100%">
<col width="20%"><col width="40%"><col width="40%">
<tr>
<td>1000000000000000000000000000</td>
<td>10000000</td>
<td>100</td>
</tr>
</table>
<input type="button" onclick="setFixedTableLayout()"
value="Set fixed table layout">
</body>
</html>
TIY
(tableLayout)
<html>
<head>
function setFixedTableLayout()
{
document.getElementById('myTable').style.tableLayout="fixed";
}
</script>
</head>
<body>
<table id="myTable" border="1" width="100%">
<col width="20%"><col width="40%"><col width="40%">
<tr>
<td>1000000000000000000000000000</td>
<td>10000000</td>
<td>100</td>
</tr>
</table>
<input type="button" onclick="setFixedTableLayout()" value="Set
fixed table layout">
</body>
</html>
HTML DOM color
color
Object.style.color=color
color
rgb
<html>
<head>
function setColor()
{
document.getElementById("p1").style.color="#ff0000";
document.getElementById("p2").style.color="magenta";
}
</script>
</head>
<body>
<p id="p1">This is an example paragraph</p>
<p id="p2">This is also an example paragraph</p>
<input type="button" onclick="setColor()"
value="Change color of text" />
</body>
</html>
TIY
<html>
<head>
function setColor()
{
document.getElementById("p1").style.color="#ff0000";
document.getElementById("p2").style.color="magenta";
}
</script>
</head>
<body>
<p id="p1">This is an example paragraph.</p>
<p id="p2">This is also an example paragraph.</p>
<input type="button" onclick="setColor()" value="Change color of
text" />
</body>
</html>
HTML DOM font
font
Object.style.font=value
fontStyle
fontVariant
fontWeight
fontSize/lineHeight
fontFamily
caption
icon
menu
message-box
small-caption
status-bar
<html>
<head>
function setFont()
{
document.getElementById("p1").style.font="italic bold 12px
arial,serif";
}
</script>
</head>
<body>
<input type="button" onclick="setFont()" value="Change paragraph
style" />
</body>
</html>
TIY
<html>
<head>
function setFont()
{
document.getElementById("p1").style.font="italic bold 12px
arial,serif";
}
</script>
</head>
<body>
<input type="button" onclick="setFont()" value="Change font" />
</body>
</html>
HTML DOM fontFamily
fontFamily
Object.style.fontFamily=font1,font2,....
Value
Description
font1, font2,....
<html>
<head>
function setFont()
{
document.getElementById("p1").style.fontFamily="arial,sans-serif"
;
}
</script>
</head>
<body>
</body>
</html>
TIY
fontFamily -
<html>
<head>
function setFont()
{
document.getElementById("p1").style.fontFamily="arial,sans-serif"
;
}
</script>
</head>
<body>
</body>
</html>
HTML DOM fontSize
fontSize
Object.style.fontSize=value
xx-small
x-small
small
medium
large
x-large
xx-large
xx-small xx-large
medium
smaller
font-size
larger
font-size
length
font-size
font-size
<html>
<head>
function setFontSize()
{
document.getElementById("p1").style.fontSize="larger";
}
</script>
</head>
<body>
<input type="button" onclick="setFontSize()"
value="Change font-size" />
</body>
</html>
TIY
fontSize -
<html>
<head>
function setFontSize()
{
document.getElementById("p1").style.fontSize="larger";
}
</script>
</head>
<body>
<input type="button" onclick="setFontSize()" value="Change
font-size" />
</body>
</html>
HTML DOM fontSizeAdjust
fontSizeAdjust
"x" "font-size" aspect

aspect Verdana
aspect 0.58 100px x-height 58px Times New
Roman aspect 0.46 Verdana Times New Roman
aspect x-height
Object.style.fontSizeAdjust=none|number
none
x-height
number
aspect
* font-size-adjust / aspect =
14px Verdanaaspect 0.58 aspect

0.46 14 * (0.58/0.46) = 17.65px
<html>
<head>
function adjustFontSize()
{
document.getElementById("p1").style.fontSizeAdjust="0.70";
}
</script>
</head>
<body>
<input type="button" onclick="adjustFontSize()"

value="Adjust font-size" />
</body>
</html>
TIY
fontSizeAdjust -
<html>
<head>
function adjustFontSize()
{
document.getElementById("p1").style.fontSizeAdjust="0.70";
}
</script>
</head>
<body>
<input type="button" onclick="adjustFontSize()" value="Adjust
font-size" />
</body>
</html>
HTML DOM fontStretch
fontStretch font-family
Object.style.fontStretch=value
normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-family
"ultra-condensed" "ultra-expanded"
<html>
<head>
function setFontStretch()
{
document.getElementById("p1").style.fontStretch="ultra-expanded";
}
</script>
</head>
<body>
<input type="button" onclick="setFontStretch()"
value="Stretch font" />
</body>
</html>
TIY
fontStretch -
<html>
<head>
function setFontStretch()
{
document.getElementById("p1").style.fontStretch="ultra-expanded";
}
</script>
</head>
<body>
<input type="button" onclick="setFontStretch()" value="Stretch font"
/>
</body>
</html>
HTML DOM fontStyle
fontStyle
Object.style.fontStyle=normal|italic|oblique
normal
italic
oblique
<html>
<head>
function setFontStyle()
{
document.getElementById("p1").style.fontStyle="italic";
}
</script>
</head>
<body>
<input type="button" onclick="setFontStyle()"
value="Change font-style" />
</body>
</html>
TIY
fontStyle -
<html>
<head>
function setFontStyle()
{
document.getElementById("p1").style.fontStyle="italic";
}
</script>
</head>
<body>
<input type="button" onclick="setFontStyle()" value="Change

font-style" />
</body>
</html>
HTML DOM fontVariant
fontVariant
Object.style.fontVariant=normal|small-caps
normal
small-caps
<html>
<head>
function setSmallCaps()
{
document.getElementById("p1").style.fontVariant="small-caps";
}
</script>
</head>
<body>

<p>This is another example paragraph.</p>
<input type="button" onclick="setSmallCaps()"
value="Display small-caps font" />
</body>
</html>
TIY
fontVariant -
<html>
<head>
function setSmallCaps()
{
document.getElementById("p1").style.fontVariant="small-caps";
}
</script>
</head>
<body>
<input type="button" onclick="setSmallCaps()" value="Display
small-caps font" />
</body>
</html>
HTML DOM fontWeight
fontWeight

Object.style.fontWeight=value
normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
400 normal 700 bold
<html>
<head>
function setFontWeight()
{
document.getElementById("p1").style.fontWeight="900";
}
</script>
</head>
<body>
<input type="button" onclick="setFontWeight()"

value="Display bold text" />
</body>
</html>
TIY
fontWeight -
<html>
<head>
function setFontWeight()
{
document.getElementById("p1").style.fontWeight="900";
}
</script>
</head>
<body>
<input type="button" onclick="setFontWeight()" value="Display bold
text" />
</body>
</html>
HTML DOM letterSpacing
letterSpacing
Object.style.letterSpacing=normal|length
normal
length
<html>
<head>
function changeLetterSpacing()
{
document.getElementById("p1").style.letterSpacing="3";
document.getElementById("p2").style.letterSpacing="-1";
}
</script>
</head>
<body>
<p id="p2">This is another example paragraph.</p>
<input type="button" onclick="changeLetterSpacing()"
value="Change letter-spacing" />
</body>
</html>
TIY
letterSpacing -
<html>
<head>
function changeLetterSpacing()
{
document.getElementById("p1").style.letterSpacing="3";
document.getElementById("p2").style.letterSpacing="-1";
}
</script>
</head>
<body>
<p id="p2">This is another example paragraph.</p>
<input type="button" onclick="changeLetterSpacing()" value="Change
letter-spacing" />
</body>
</html>
HTML DOM lineHeight
lineHeight
Object.style.lineHeight=normal|number|length|%
normal
number
length
<html>
<head>
function changeLineHeight()
{
document.getElementById("div1").style.lineHeight="2";
}
</script>
</head>
<body>
<div id="div1">
This is some text. This is some text. This is some
</div>
<br />
<input type="button" onclick="changeLineHeight()"
value="Change line-height" />
text.
text.
text.
text.
</body>
</html>
TIY
lineHeight -
<html>
<head>
function changeLineHeight()
{
document.getElementById("div1").style.lineHeight="2";
}
</script>
</head>
<body>
<div id="div1">
</div>
<br />
<input type="button" onclick="changeLineHeight()" value="Change
line-height" />
</body>
</html>
HTML DOM quotes
quotes
Object.style.quotes=none|string string string string
none
"content" "open-quote" "close-quote"
string string string string
HTML DOM textAlign
textAlign
Object.style.textAlign=left|right|center|justify
left
right
center
justify
textJustify
<html>
<head>
function setTextAlign()
{
document.getElementById("p1").style.textAlign="right";
}
</script>
</head>
<body>
<input type="button" onclick="setTextAlign()"
value="Align text" />

</body>
</html>
TIY
textAlign -
<html>
<head>
function setTextAlign()
{
document.getElementById("p1").style.textAlign="right";
}
</script>
</head>
<body>
<input type="button" onclick="setTextAlign()" value="Align text" />
</body>
</html>
HTML DOM textDecoration
textDecoration
Object.style.textDecoration=none|underline|overline|line-through|
blink
none
underline
overline
line-through
blink
IE Opera
<html>
<head>
function setTextDecoration()
{
document.getElementById("p1").style.textDecoration="overline";
}
</script>
</head>
<body>
<input type="button" onclick="setTextDecoration()"
value="Set text-decoration" />
</body>
</html>
TIY
textDecoration -
<html>
<head>
function setTextDecoration()
{
document.getElementById("p1").style.textDecoration="overline";
}
</script>
</head>
<body>
<input type="button" onclick="setTextDecoration()" value="Set
text-decoration" />
</body>
</html>
HTML DOM textIndent
textIndent
Object.style.textIndent=length|%
length
<html>
<head>
function setTextIndent()
{
document.getElementById("div1").style.textIndent="50px";
}
</script>
</head>
<body>
<div id="div1">
</div>
<br />
<input type="button" onclick="setTextIndent()"
value="Indent first line of text" />
text.
text.
text.
text.
</body>
</html>
TIY
textIndent -
<html>
<head>
function setTextIndent()
{
document.getElementById("div1").style.textIndent="50px";
}
</script>
</head>
<body>
<div
This
This
This
This
id="div1">
is some text.
is some text.
is some text.
is some text.
This
This
This
This
is
is
is
is
some
some
some
some
text.
text.
text.
text.
This
This
This
This
is
is
is
is
some
some
some
some
text.
text.
text.
text.
</div>
<br />
<input type="button" onclick="setTextIndent()" value="Indent first
line of text" />
</body>
</html>
HTML DOM textTransform
textTransform
Object.style.textTransform="none|capitalize|uppercase|lowercase|i
nherit"
none
capitalize
uppercase
lowercase
<html>
<head>
function displayResult()
{
document.getElementById("p1").style.textTransform="capitalize";
}
</script>
</head>
<body>
<p id="p1">This is some text.</p>
<br />
<button type="button" onclick="displayResult()">Convert
text</button>
</body>
</html>
HTML DOM whiteSpace
whiteSpace
Object.style.whiteSpace=normal|nowrap|pre
normal
pre
HTML <pre>
nowrap
<br>
<html>
<head>
function removeWrapping()
{
document.getElementById("div1").style.whiteSpace="nowrap";
}
</script>
</head>
<body>
<div id="div1">
</div>
<br />
<input type="button" onclick="removeWrapping()"
value="Do not let the text wrap" />
text.
text.
text.
text.
</body>
</html>
TIY
whiteSpace -
<html>
<head>
function removeWrapping()
{
document.getElementById("div1").style.whiteSpace="nowrap";
}
</script>
</head>
<body>
<div
This
This
This
This
id="div1">
is some text.
is some text.
is some text.
is some text.
This
This
This
This
is
is
is
is
some
some
some
some
text.
text.
text.
text.
This
This
This
This
is
is
is
is
some
some
some
some
text.
text.
text.
text.
</div>
<br />
<input type="button" onclick="removeWrapping()" value="Do not let the
text wrap" />
</body>
</html>
HTML DOM wordSpacing
wordSpacing
Object.style.wordSpacing=normal|length
normal
length
<html>
<head>
function changeWordSpacing()
{
document.getElementById("p1").style.wordSpacing="10px";
}
</script>
</head>
<body>
<input type="button" onclick="changeWordSpacing()"
value="Change space between words" />
</body>
</html>
TIY
wordSpacing -
<html>
<head>
function changeWordSpacing()
{
document.getElementById("p1").style.wordSpacing="10px";
}
</script>
</head>
<body>
<input type="button" onclick="changeWordSpacing()" value="Change
space between words" />
</body>
</html>
HTML DOM acceptCharset
acceptCharset

formObject.acceptCharset=charset
<html>
<head>
function showCharset()
{
var x=document.getElementById("myForm")
alert(x.acceptCharset)
}
</script>
</head>
<body>
<form id="myForm" acceptCharset="ISO-8859-1">
Text: <input type="text" value="Hello World!">
<input type="button" onclick="showCharset()"
value="Show charset">
</form>
</body>
</html>
TIY
<html>
<head>
function showCharset()
{
alert(x.acceptCharset)
}
</script>
</head>
<body>
<form id="myForm" acceptCharset="ISO-8859-1">
Text: <input type="text" value="Hello World!">
<input type="button" onclick="showCharset()" value="Show charset">
</form>
</body>
</html>
HTML DOM accessKey
accessKey
Alt + accessKey
anchorObject.accessKey=accessKey
<html>
<head>
function accesskey()
{
document.getElementById('w3').accessKey="w"
}
</script>
</head>
<body onload="accesskey()">
<a id="w3" href="http://www.w3school.com.cn/">W3School.com.cn</a>
</body>
</html>
TIY
<html>
<head>
function accesskey()
{
document.getElementById('w3').accessKey="w"
document.getElementById('w3dom').accessKey="d"
}
</script>
</head>
<body onload="accesskey()">
<p><a id="w3"
href="http://www.w3school.com.cn/">W3School.com.cn</a> Alt
+ w </p>
<p><a id="w3dom" href="http://www.w3school.com.cn/htmldom/">HTML
DOM</a> Alt + d </p>
</body>
</html>
HTML DOM action
action action
action

formObject.action=URL
action URL
<html>
<head>
function changeAction()
{
alert("Original action: " + x.action)
x.action="index.asp"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>
<form id="myForm" action="js_examples.asp">
Name: <input type="text" value="Mickey Mouse" />
<input type="button" onclick="changeAction()"
value="Change action attribute and submit form" />
</form>
</body>
</html>
TIY
action
<html>
<head>
function changeAction()
{
alert("Original action: " + x.action)

x.action="/htmldom/index.asp"
alert("New action: " + x.action)
x.submit()
}
</script>
</head>
<body>
<form id="myForm" action="/i/eg_smile.gif">
<input type="text" value="" />
<input type="button" onclick="changeAction()"
value=" action " />
</form>
</body>
</html>
HTML DOM align
align iframe
iframeObject.align=left|right|top|middle|bottom
iframe
<html>
<body>
<iframe src="frame_a.htm" id="frame1"></iframe>
<p>Some text. Some text. Some text. Some text.</p>
document.getElementById("frame1").align="right";
</script>
</body>
</html>
TIY
<iframe>
<html>
<body>
<img id="compman" src="/i/eg_compman.gif" alt="Computerman" />
<p>Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text.</p>
document.getElementById("compman").align="right";
</script>
</body>
</html>
HTML DOM alt
alt
areaObject.alt=alternate_text
"Venus"
<html>
<body>
coords="124,58,8"
alt="The planet Venus"
href="venus.htm" />
</map>
<p>Alternate text for "Venus" is:
x=document.getElementById('venus');
document.write(x.alt);
</script>
</p>
</body>
</html>
TIY
<html>
<body>
<img src="/i/eg_planets.jpg"
coords="180,139,14"
href="/example/hdom/venus.html" />
</map>
<p>"Venus"
document.write(x.alt);
</script>
</p>
</body>
</html>
HTML DOM border
border
imageObject.border=pixels
<html>
<head>
{
document.getElementById("compman").border="3"
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" />
<br /><br />
value="Change border" />
</body>
</html>
TIY
<html>
<head>
{
document.getElementById("compman").border="3"
}
</script>
</head>
<body>
<br /><br />
<input type="button" onclick="changeBorder()" value="Change border"
/>
</body>
</html>
HTML DOM charset
charset
anchorObject.charset=charset
<html>
<body>
<p>
<a id="myAnchor"
href="http://www.w3school.com.cn">W3School.com.cn</a>
</p>
x=document.getElementById("myAnchor");
x.charset="ISO-8859-1";
</script>
</body>
</html>
TIY
<html>
<body>
<p>
<a id="myAnchor"
href="http://www.w3school.com.cn">W3School.com.cn</a>
</p>
x.charset="ISO-8859-1";
document.write(x.charset);
</script>
</body>
</html>
HTML DOM checked
checked checkbox

checkboxObject.checked=true|false
checkbox onclick
onchange
checkbox
<html>
<head>
function check()
{
document.getElementById("check1").checked=true
}
function uncheck()
{
document.getElementById("check1").checked=false
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="check1" />
<input type="button" onclick="check()" value="Check Checkbox" />
<input type="button" onclick="uncheck()" value="Uncheck Checkbox" />
</form>
</body>
</html>
TIY
checkbox
<html>
<head>
function check()
{
document.getElementById("myCheck").checked=true
}
function uncheck()
{
document.getElementById("myCheck").checked=false
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="" />
<input type="button" onclick="uncheck()" value="" />
</form>
</body>
</html>
checkbox
<html>
<head>
function createOrder()
{
coffee=document.forms[0].coffee
txt=""
for (i=0;i<coffee.length;++ i)
{
if (coffee[i].checked)
{
txt=txt + coffee[i].value + " "
}
}
document.getElementById("order").value=" " + txt
}
</script>
</head>
<body>
<p></p>
<form>
<input type="checkbox" name="coffee" value=""><br />
<input type="checkbox" name="coffee" value=""><br />
<br />
<input type="button" onclick="createOrder()" value="">
<br /><br />
<input type="text" id="order" size="50">
</form>
</body>
</html>
Checkbox -
<html>
<head>
function convertToUcase()
{
document.getElementById("fname").value=document.getElementById("f
name").value.toUpperCase()
document.getElementById("lname").value=document.getElementById("l
name").value.toUpperCase()
}
</script>
</head>
<body>
<form name="form1">
<input type="text" id="fname" size="20" />
<br /><br />
<input type="text" id="lname" size="20" />
<br /><br />
<input type="checkBox" onclick="if (this.checked)

{convertToUcase()}">
</form>
</body>
</html>
HTML DOM coords
coords
anchorObject.coords=coordinates
<html>
<body>
coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
<p>Venus coordinates:
x=document.getElementById("venus");
document.write(x.coords);
</script>
</p>
</body>
</html>
TIY
<html>
<body>
coords="180,139,14"
alt="Venus"
</map>
<p>Venus coords
document.write(x.coords);
</script>
</p>
</body>
</html>
HTML DOM cols
cols
framesetObject.cols=col1,col2,col3....

HTML
50%
<html>
<frameset cols="50%,50%">
<frame src="frame_cols.htm">
<frame src="frame_a.htm">
</frameset>
</html>
HTML "frame_cols.htm" HTML "frame_a.htm"
"frame_cols.htm"
<html>
<head>
function changeCols()
{
parent.document.getElementById("main").cols="30%,70%"
}
function restoreCols()
{
parent.document.getElementById("main").cols="50%,50%"
}
</script>
</head>
<body>
<input type="button" onclick="changeCols()"
value="Change column size" />
<input type="button" onclick="restoreCols()"
value="Restore column size" />
</body>
</html>
HTML DOM complete
complete
true fasle
imageObject.complete
<html>
<head>
function alertComplete()
{
alert(document.getElementById("compman").complete)
}
</script>
</head>
<body onload="alertComplete()">
<img id="compman" src="compman.gif" alt="Computerman"
width="107" height="98" />
</body>
</html>
TIY
<html>
<head>
function alertComplete()
{
alert("Image loaded=" +
document.getElementById("compman").complete)
}
</script>
</head>
<body onload="alertComplete()">
</body>
</html>
HTML DOM contentDocument
contentDocument HTML iframe

DOM
iframeObject.contentDocument
iframe <h2>
<html>
<head>
function getTextNode()
{
var x=document.getElementById("frame1").contentDocument;
alert(x.getElementsByTagName("h2")[0].childNodes[0].nodeValue);
}
</script>
</head>
<body>
<br /><br />
<input type="button" onclick="getTextNode()" value="Get text" />
</body>
</html>
TIY
iframe
<html>
<head>
function getText()
{
var x=document.getElementById("frame1").contentDocument;
alert(x.getElementsByTagName("h3")[0].childNodes[0].nodeValue);
}
</script>
</head>
<body>
<iframe src="/example/hdom/frame_a.html" id="frame1" ></iframe>
<br /><br />
<input type="button" onclick="getText()" value="Get text" />
</body>
</html>
HTML DOM defaultChecked
defaultChecked checked
checkbox true false

checkboxObject.defaultChecked
checked
<html>
<body>
<form>
<input type="checkbox" id="myCheck" checked="checked" />
</form>
alert(document.getElementById("myCheck").defaultChecked)
</script>
</body>
</html>
TIY
checkbox
<html>
<body>
<form>
<input type="checkbox" id="myCheck" checked="checked" />
</form>
alert(document.getElementById("myCheck").defaultChecked)
</script>
</body>
</html>
checkbox
<html>
<head>
function check()
{
document.getElementById("myCheck").checked=true
}
function uncheck()
{
document.getElementById("myCheck").checked=false
}
</script>
</head>
<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="" />
<input type="button" onclick="uncheck()" value="" />
</form>
</body>
</html>
HTML DOM disabled
disabled
buttonObject.disabled=true|false
<html>
<head>
function disableButton()
{
document.getElementById("myButton").disabled=true
}
</script>
</head>
<body>
<form>
<button id="myButton" onClick="disableButton()">
Click Me!</button>
</form>
</body>
</html>
TIY
id +
<html>
<head>
function alertId()
{
var txt="Id: " + document.getElementById("myButton").id
txt=txt + ", type: " + document.getElementById("myButton").type
alert(txt)
document.getElementById("myButton").disabled=true
}
</script>
</head>
<body>
<form>
<button id="myButton" onClick="alertId()"></button>
</form>
</body>
</html>
HTML DOM enctype
enctype MIME

enctype
"application/x-www-form-urlencoded"
input type "file" "multipart/form-data"
formObject.encoding=encoding
<html>
<head>
function showEnctype()
{
alert(x.enctype)
}
</script>
</head>
<body>
<form id="myForm" enctype="application/x-www-form-urlencoded">
<input type="button" onclick="showEnctype()"
value="Show enctype" />
</form>
</body>
</html>
TIY
<html>
<head>
function showEnctype()
{
alert(x.enctype)
}
</script>
</head>
<body>
<form id="myForm" enctype="application/x-www-form-urlencoded">
<input type="button" onclick="showEnctype()"
value="Show enctype" />
</form>
</body>
</html>
HTML DOM form
form
form null
buttonObject.form

id
<html>
<body>
<form id="form1">
<button id="button1">Click me!</button>
</form>
<p>The form containing the button is:
x=document.getElementById('button1');
document.write(x.form.id);
</script></p>
</body>
</html>
TIY
id
<!DOCTYPE html>
<html>
<body>
<form id="form1">
<button id="button1" type="button"></button>
</form>
<p> id
<script>
document.write(document.getElementById("button1").form.id);
</script>
</p>
</body>
</html>
HTML DOM hash
hash URL
areaObject.hash=anchorname
URL #top #bottom

<html>
<head>
function changeLink()
{
document.getElementById('venus').hash="bottom"
}
</script>
</head>
<body>
coords="124,58,8"
alt="Venus"
href="venus2.htm#top" />
</map>
<input type="button" onclick="changeLink()" value="Change link" />
</body>
</html>
TIY
URL
<html>
<head>
{
document.getElementById('venus').hash="bottom"
}
</script>
</head>
<body>
<area
id="venus"
shape="circle"
coords="180,139,14"
href ="/example/hdom/venus2.html#top"
alt="Venus" />
</map>
<input type="button" onclick="changeLink()" value="" />
</body>
</html>
HTML DOM height
height iframe

iframeObject.height=pixels
iframe
<html>
<head>
function changeHeight()
{
document.getElementById("frame1").height="200";
}
</script>
</head>
<body>
<iframe src="frame_a.htm" id="frame1" height="100"></iframe>
<br /><br />
<input type="button" onclick="changeHeight()"
value="Change height" />
</body>
</html>
TIY
iframe
<html>
<head>
function changeSize()
{
document.getElementById("frame1").width="300";
}
function restoreSize()
{
document.getElementById("frame1").width="200";
}
</script>
</head>
<body>
<iframe src="/example/hdom/frame_a.html" id="frame1" height="200"
width="200"></iframe>
<br /><br />
<input type="button" onclick="changeSize()" value="Change size" />
<input type="button" onclick="restoreSize()" value="Restore size" />
</body>
</html>
HTML DOM host
host URL
areaObject.host=host
"Venus"
<html>
<body>

coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
<p>The hostname and port for the "Venus" area are:
document.write(x.host);
</script>
</p>
</body>
</html>
TIY
<html>
<body>
<area
id="venus"
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
alt="Venus" />
</map>
<p>"Venus" hostname port
document.write(x.host);
</script>
</p>
</body>
</html>
HTML DOM href
href URL
anchorObject.href=URL
URL target
<html>
<head>
{
document.getElementById('myAnchor').innerHTML="W3School";
document.getElementById('myAnchor').href="http://www.w3school.com.
cn";
document.getElementById('myAnchor').target="_blank";
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">
</body>
</html>
TIY
URL target
<html>
<head>
{
document.getElementById('myAnchor').innerHTML=" W3School"
cn"
document.getElementById('myAnchor').target="_blank"
}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.microsoft.com"> Microsoft</a>
<input type="button" onclick="changeLink()" value="">
<p> URL target target
"_self" target
"_blank"</p>
</body>
</html>
HTML DOM hreflang
hreflang
anchorObject.hreflang=languagecode
<html>
<body>
<p><a id="myAnchor" hreflang="zh-cn"
href="http://www.w3school.com.cn">W3School.com.cn</a></p>
document.write(x.hreflang);
</script>
</body>
</html>
TIY
<html>
<body>
<p><a id="myAnchor" hreflang="zh-cn"
document.write(x.hreflang);
</script>
</body>
</html>
HTML DOM id
id id

anchorObject.id=ide
id
<html>
<body>
<p><a id="myAnchor"
href="http://www.w3school.com.cn">Visit W3School.com.cn</a></p>
document.write(x.id);
</script>
</body>
</html>
TIY
id
<html>
<body>
<p><a id="myAnchor" href="http://www.w3school.com.cn">Visit
W3School.com.cn</a></p>
document.write(x.id);
</script>
</body>
</html>
HTML DOM isMap
isMap
imageObject.isMap
<html>
<body>
<img id="planets" src="planets.gif"
coords="124,58,8"
href="venus.htm" />
</map>
<p>Is the image a server-side image map?
x=document.getElementById('planets');
document.write(x.isMap);
</script>
</p>
</body>
</html>
TIY
<html>
<body>
<img id="planets"
src="/i/eg_planets.jpg"
<area shape="circle"
coords="180,139,14"
target ="_blank"
alt="Venus" />
</map>
<p>
document.write(x.isMap);
</script>
</p>
</body>
</html>
HTML DOM innerHTML
innerHTML
anchorObject.innerHTML=text

URL target
<html>
<head>
{
cn";
}
</script>
</head>
<body>
</body>
</html>
TIY
URL target
<html>
<head>
{
cn"
}
</script>
</head>
<body>

"_self" target
"_blank"</p>
</body>
</html>
HTML DOM length
length
formObject.length
<html>
<body>
<form id="myForm" method="get">
Name: <input type="text" size="20" value="Peter Griffin" /><br />
Text: <input type="text" size="20" value="Hello World" />
</form>
document.write("Number of elements in myForm: ");
document.write(document.getElementById('myForm').length);
</script>
</body>
</html>
TIY
<html>
<body>
<form id="myForm" method="get">
Name: <input type="text" size="20" value="Peter Griffin" /><br />
Text: <input type="text" size="20" value="Hello World" />
</form>
document.write("Number of elements in myForm: ");
document.write(document.getElementById('myForm').length);
</script>
</body>
</html>
HTML DOM longDesc
longDesc iframe URL
iframeObject.longDesc=URL
<html>
<body>
<iframe src="frame_a.htm" id="frame1"
longdesc="frame_description.htm"></iframe>
<br />
x=document.getElementById("frame1");
document.write("Description for frame contents: ");
document.write('<a href="' + x.longDesc + '">Description</a>');
</script>
</body>
</html>
TIY
<iframe> longdesc
<html>
<body>
<iframe src="/example/hdom/frame_a.html" id="frame1"
longdesc="/example/hdom/frame_description.html"></iframe>
<br />
document.write("Description for frame contents: ");
document.write('<a href="' + x.longDesc + '">Description</a>');
</script>
</body>
</html>
HTML DOM lowsrc
lowsrc URL

imageObject.lowsrc=URL
<html>
<body>
<img id="compman" src="compman.gif"
lowsrc="compman_lowres.gif" alt="Computerman" />
<br />
var x=document.getElementById("compman");
document.write('<a href="' + x.lowsrc + '">Low resolution</a>');
</script>
</body>
</html>
TIY
<html>
<body>
<img id="compman" src="/i/eg_compman.gif"
lowsrc="/i/eg_compman_lowres.gif" alt="Computerman" />
<br />
var x=document.getElementById("compman");
document.write('<a href="' + x.lowsrc + '">Low resolution
version</a>');
</script>
</body>
</html>
HTML DOM marginHeight
marginHeight
iframeObject.marginHeight=pixels
iframe
<html>
<body>
<iframe src="frame_a.htm" id="frame1" marginheight="50"></iframe>
<br />
document.write("Top and bottom margins of the iframe are: ");
document.write(x.marginHeight);
</script>
</body>
</html>
TIY
iframe
<html>
<body>
marginheight="50"></iframe>
<br /><br />
document.write("Top and bottom margins of the iframe are: ");
document.write(x.marginHeight);
</script>
</body>
</html>
HTML DOM marginWidth
marginWidth
iframeObject.marginWidth=pixels
iframe
<html>
<body>
<iframe src="frame_a.htm" id="frame1" marginwidth="50"></iframe>
<br /><br />
document.write("Left and right margins of the iframe are: ");
document.write(x.marginWidth);
</script>
</body>
</html>
TIY
iframe
<html>
<body>
marginwidth="50"></iframe>
<br /><br />
document.write("Left and right margins of the iframe are: ");
document.write(x.marginWidth);
</script>
</body>
</html>
HTML DOM maxLength
maxLength
passwordObject.maxLength=number_of_chars
<html>
<head>
function alertLength()
{
alert(document.getElementById("password1").maxLength)
}
</script>
</head>
<body>
<form>
<input type="password" id="password1" maxLength="8" />
<input type="button" id="button1" onclick="alertLength()"
value="Alert maxLength" />
</form>
</body>
</html>
TIY
<html>
<head>
function alertLength()
{
alert(document.getElementById("password1").maxLength)
}
</script>
</head>
<body>
<form>
<input type="password" id="password1" maxLength="8" />
<input type="button" id="button1" onclick="alertLength()"
value="Alert maxLength" />
</form>
</body>
</html>
HTML DOM media
media
linkObject.media=device
screen
tty
tv
TV
projection
handheld
print
braille
aural
all
link
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen"
id="style1" href="try_dom_link.css" />
</head>
<body>
x=document.getElementById("style1");
document.write("Intended media type=" + x.media);
</script>
</body>
</html>
TIY
link
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen"
id="style1" href="/example/hdom/try_dom_link.css" />
</head>
<body>
x=document.getElementById("style1");
document.write("Intended media type=" + x.media);
</script>
</body>
</html>
HTML DOM method
method HTTP
formObject.method=get|post
HTTP
<html>
<head>
function showMethod()
{
alert(x.method)
}
</script>
</head>
<body>
<form id="myForm" method="post">
Name: <input type="text" size="20" value="Mickey Mouse" />
<input type="button" onclick="showMethod()" value="Show method" />
</form>
</body>
</html>
TIY
HTTP
<html>
<head>
function showMethod()
{
alert(x.method)
}
</script>
</head>
<body>
<form id="myForm" method="post">
<input type="text" value="" />
<input type="button" onclick="showMethod()" value=" method" />
</form>
</body>
</html>
HTML DOM multiple
multiple
Opera 9
selectObject.multiple=true|false
The following example returns the id of the dropdown list:

<html>
<head>
function selectMultiple()
{
document.getElementById("mySelect").multiple=true
}
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<input type="button" onclick="selectMultiple()"
value="Select multiple">
</form>
</body>
</html>
TIY
<html>
<head>
function selectMultiple()
{
document.getElementById("mySelect").multiple=true
}
</script>
</head>
<body>
<form>
<select id="mySelect" size="4">
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<input type="button" onclick="selectMultiple()" value="">
</form>
<p>
</p>
</body>
</html>
HTML DOM name
name
anchorObject.name=name
<html>
<body>
<p><a id="myAnchor" name="myAnchor"
document.write(x.name);
</script>
</body>
</html>
TIY
<html>
<body>
<p><a id="myAnchor" name="myAnchor"
document.write(x.name);
</script>
</body>
</html>
HTML DOM noHref
noHref
areaObject.noHref=true|false
<area> nohref
<area> href nohref
"Venus" "noHref"
<html>
<body>
coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
<p>noHref status:
document.write(x.noHref);
</script>
</p>
</script>
</body>
</html>
TIY
noHref
<html>
<body>
<area
id="venus"
shape="circle"
coords="180,139,14"
alt="Venus" />
</map>
<p>noHref
document.write(x.noHref);
</script>
</p>
</script>
</body>
</html>
HTML DOM pathname
pathname link-URL
areaObject.pathname=pathnamee
"Venus" link-URL
<html>
<body>
coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
<p>Venus' pathname:
document.write(x.pathname);
</script>
</p>
</body>
</html>
TIY
link-URL
<html>
<body>
<area
id="venus"
shape="circle"
coords="180,139,14"
alt="Venus" />
</map>
<p>Venus
document.write(x.pathname);
</script>
</p>
</body>
</html>
HTML DOM protocol
protocol link-URL
areaObject.protocol=protocol

"Venus" link-URL
<html>
<body>
coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
<p>Venus' protocol:
document.write(x.protocol);
</script>
</p>
</body>
</html>
TIY
link-URL
<html>
<body>
<area
id="venus"
shape="circle"
coords="180,139,14"
alt="Venus" />
</map>
<p>Venus
document.write(x.protocol);
</script>
</p>
</body>
</html>
HTML DOM readOnly
readOnly
passwordObject.readOnly=true|false
<html>
<head>
function makeReadOnly()
{
document.getElementById("password1").readOnly=true
}
</script>
</head>
<body>
<form>
<input type="password" id="password1" value="thgrt456" />
<input type="button" onclick="makeReadOnly()"
value="Make read-only" />
</form>
</body>
</html>
TIY
<html>
<head>
function makeReadOnly()
{
document.getElementById("password1").readOnly=true
}
</script>
</head>
<body>
<form>
<input type="password" id="password1" value="thgrt456" />
<input type="button" onclick="makeReadOnly()" value="Make read-only"
/>
</form>
</body>
</html>
HTML DOM rel
rel
rel rev <a>
rel (relationship) rev (reverse)
anchorObject.rel=relationship
appendix
alternate
bookmark
web blogs "permalink"
chapter
contents
copyright
glossary
index
next
prev
section
start
subsection
head
toc
parent
child
<html>
<body>
<p><a id="myAnchor" rel="index"
document.write(x.rel);
</script>
</body>
</html>
TIY
<html>
<body>
<p><a id="myAnchor" rel="index"
document.write(x.rel);
</script>
</body>
</html>
HTML DOM rev
rev
rel rev <a>
rel (relationship) rev (reverse)
anchorObject.rev=relationship
appendix
alternate
bookmark
web blogs "permalink"
chapter
contents
copyright
glossary
index
next
prev
section
start
subsection
head
toc
parent
child
<html>
<body>
<p><a id="myAnchor" rev="subsection"
href="/htmldom/prop_anchor_rev.asp">
HTML DOM rev Property</a></p>
document.write(x.rev);
</script>
</body>
</html>
TIY
<html>
<body>
<p><a id="myAnchor" rev="subsection"
href="/htmldom/prop_anchor_rev.asp">
HTML DOM rev Property</a></p>
document.write(x.rev);
</script>
</body>
</html>
HTML DOM rows
rows

framesetObject.rows=row1,row2,row3....
HTML
50%
<html>
<frameset rows="50%,50%">
<frame src="frame_rows.htm">
<frame src="frame_a.htm">
</frameset>
</html>
HTML "frame_rows.htm" HTML "frame_a.htm"
"frame_rows.htm"
<html>
<head>
function changeRows()
{
parent.document.getElementById("main").rows="30%,70%"
}
function restoreRows()
{
parent.document.getElementById("main").rows="50%,50%"
}
</script>
</head>
<body>
<form>
<input type="button" onclick="changeRows()"
value="Change row size" />
<input type="button" onclick="restoreRows()"
value="Restore row size" />
</form>
</body>
</html>
TIY
<html>
<frameset id="main" rows="50%,50%">
<frame id="leftFrame" src="/example/hdom/frame_rows.html">
<frame id="rightFrame" src="/example/hdom/frame_a.html" >
</frameset>
</html>
HTML DOM scrolling
scrolling iframe
iframeObject.scrolling=auto|yes|no
iframe
<html>
<head>
function addScrollbars()
{
document.getElementById("frame1").scrolling="yes";
}
function removeScrollbars()
{
document.getElementById("frame1").scrolling="no";
}
</script>
</head>
<body>
<iframe src="frame_a.htm" id="frame1" ></iframe><br />
<input type="button" onclick="addScrollbars()"
value="Add Scrollbars" />
<input type="button" onclick="removeScrollbars()"
value="Remove Scrollbars" />
</body>
</html>
TIY
<iframe>
<html>
<head>
function addScrollbars()
{
document.getElementById("frame1").scrolling="yes";
}
function removeScrollbars()
{
document.getElementById("frame1").scrolling="no";
}
</script>
</head>
<body>
<iframe src="/example/hdom/frame_a.html" id="frame1" ></iframe>
<br />
<input type="button" onclick="addScrollbars()" value="Add
Scrollbars" />
<input type="button" onclick="removeScrollbars()" value="Remove
Scrollbars" />
</body>
</html>
HTML DOM selectedIndex
selectedIndex
selectObject.selectedIndex=number
<html>
<head>
function getIndex()
{
var x=document.getElementById("mySelect")
alert(x.selectedIndex)
}
</script>
</head>
<body>
<form>
Select your favorite fruit:
<select id="mySelect">
<option>Pineapple</option>
</select>
<br /><br />
<input type="button" onclick="getIndex()"
value="Alert index of selected option">
</form>
</body>
</html>
TIY
<html>
<head>
function getIndex()
{
alert(x.selectedIndex)
}
</script>
</head>
<body>
<form>
</select>
<br /><br />
<input type="button" onclick="getIndex()" value="Alert index of
selected option">
</form>
</body>
</html>
<html>
<head>
function changeText()
{
x.options[x.selectedIndex].text="Melon"
}
</script>
</head>
<body>
<form>
</select>
<br /><br />
<input type="button" onclick="changeText()" value="Set text of
selected option">
</form>
</body>
</html>
<html>
<head>
function removeOption()
{
x.remove(x.selectedIndex)
}
</script>
</head>
<body>
<form>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<input type="button" onclick="removeOption()" value="">
</form>
</body>
</html>
HTML DOM shape
shape
anchorObject.shape=RECT|CIRCLE|POLY|DEFAULT
<html>
<body>
coords="124,58,8"
alt="Venus"
href="venus.htm" />
</map>
<p>Shape of Venus-link:
document.write(x.shape);
</script>
</p>
</body>
</html>
TIY
<html>
<body>
coords="180,139,14"
alt="Venus"
</map>
<p>Venus area shape
document.write(x.shape);
</script>
</p>
</body>
</html>
HTML DOM size
size

passwordObject.size=number_of_chars
<html>
<head>
{
document.getElementById("password1").size=40
}
</script>
</head>
<body>
<form>
<input type="password" id="password1" />
<input type="button" id="button1" onclick="changeSize()"
value="Change size of the password field" />
</form>
</body>
</html>
TIY
<html>
<head>
{
document.getElementById("password1").size=40
}
</script>
</head>
<body>
<form>
<input type="password" id="password1" />
<input type="button" id="button1" onclick="changeSize()"
value="Change size of the password field" />
</form>
</body>
</html>
HTML DOM src
src iframe URL
iframeObject.src=URL
<html>
<head>
function changeSource()
{
document.getElementById("frame1").src="frame_c.htm"
document.getElementById("frame2").src="frame_d.htm"
}
</script>
</head>
<body>
<iframe src="frame_b.htm" id="frame2"></iframe>
<br /><br />
<input type="button" onclick="changeSource()"

value="Change source of the two iframes" />
</body>
</html>
TIY
<html>
<head>
function changeSource()
{
document.getElementById("frame1").src="/example/hdom/frame_c.html
"
document.getElementById("frame2").src="/example/hdom/frame_d.html
"
}
</script>
</head>
<body>
<iframe src="/example/hdom/frame_a.html" id="frame1"></iframe>
<iframe src="/example/hdom/frame_b.html" id="frame2"></iframe>
<br /><br />
<input type="button" onclick="changeSource()" value="
source">
</body>
</html>
HTML DOM tabIndex
tabIndex tab

anchorObject.tabIndex=tabIndex
tab
<html>
<head>
function changeTabIndex()
{
document.getElementById('1').tabIndex="3"
}
</script>
</head>
<body>
<p><a id="1" href="http://www.w3school.com.cn">1</a></p>
<input type="button" onclick="changeTabIndex()"
value="Change TabIndex" />
</body>
</html>
TIY
tab
<html>
<head>
function changeTabIndex()
{
}
</script>
</head>
<body>
<input type="button" onclick="changeTabIndex()"
value="Change TabIndex" />
<p>Try navigating the links by using the "Tab" button on you keyboard
before and after pushing the "Change TabIndex" button.</p>
</body>
</html>
HTML DOM target
target
anchorObject.target=_blank|_parent|_self|_top
_blank -
_self -
_parent -
_top - ,
URL target
<html>
<head>
{
cn";
}
</script>
</head>
<body>
</body>
</html>
TIY
URL target
<html>
<head>
{
cn"
}
</script>
</head>
<body>
"_self" target
"_blank"</p>
</body>
</html>
HTML DOM text
text
<option>
optionObject.text=sometext
<html>
<head>
function getOptions()
{
var x=document.getElementById("mySelect");
var y="";
for (i=0;i<x.length;i++)
{
y+=x.options[i].text;
y+="<br />";
}
document.write(y);
}
</script>
</head>
<body>
<form>

<option></option>
<option></option>
<option></option>
<option></option>
</select>
<br /><br />
<input type="button" onclick="getOptions()" value="">
</form>
</body>
</html>
TIY
<html>
<head>
function getOptions()
{
var x=document.getElementById("mySelect");
var y="";
for (i=0;i<x.length;i++)
{
y+=x.options[i].text;
y+="<br />";
}
document.write(y);
}
</script>
</head>
<body>
<form>
<option></option>
<option></option>
<option></option>
<option></option>
</select>
<br /><br />
<input type="button" onclick="getOptions()" value="">
</form>
</body>
</html>
<html>
<head>
function changeText()
{
x.options[x.selectedIndex].text="Melon"
}
</script>
</head>
<body>
<form>
</select>
<br /><br />
<input type="button" onclick="changeText()" value="Set text of
selected option">
</form>
</body>
</html>
HTML DOM type
type MIME
anchorObject.type=type
MIME
<html>
<body>
<p><a id="myAnchor" type="text/html"
document.write(x.type);
</script>
</body>
</html>
TIY
MIME
<html>
<body>
<p><a id="myAnchor" type="text/html"
document.write(x.type);
</script>
</body>
</html>
HTML DOM useMap
useMap usemap
imageObject.useMap=URL
usemap
<html>
<body>
<img id="planets" src="planets.gif"
coords="124,58,8"
href="venus.htm" />
</map>
<p>The value of the usemap attribute=
document.write(x.useMap);
</script>
</p>
</body>
</html>
TIY
usemap
<html>
<body>
<img id="planets"
<area
shape="circle"
coords="180,139,14"
target ="_blank"
alt="Venus" />
</map>
<p>usemap =
document.write(x.useMap);
</script>
</p>
</body>
</html>
HTML DOM value
value
buttonObject.value=value
<html>
<body>
<input type="button" id="button1" name="button1" value="Click Me!"
/>
<p>The text on the button is:
document.write(x.value);
</script></p>
</body>
</html>
TIY
<html>
<body>
<input type="button" id="button1"
name="button1" value="Click Me!" />
<p>The text on the button is:

document.write(x.value);
</script></p>
</body>
</html>
HTML DOM vspace
vspace
Thspace vspace align
imageObject.vspace=pixels
hspace vspace
<html>
<head>
function setSpace()
{
document.getElementById("compman").hspace="50"
document.getElementById("compman").vspace="50"
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" alt="Computerman" align="right"
/>

<input type="button" onclick="setSpace()"
value="Set hspace and vspace">
</body>
</html>
TIY
<html>
<head>
function setSpace()
{
document.getElementById("compman").hspace="50"
document.getElementById("compman").vspace="50"
}
</script>
</head>
<body>
<img id="compman" src="/i/eg_compman.gif" alt="Computerman"
align="right" />
<input type="button" onclick="setSpace()" value="Set hspace and
vspace">
</body>
</html>
HTML DOM width
width

imageObject.width=pixels
<html>
<head>
{
document.getElementById("compman").height="250"
document.getElementById("compman").width="300"
}
</script>
</head>
<body>
<img id="compman" src="compman.gif" width="107" height="98" />
<br /><br />
<input type="button" onclick="changeSize()"
value="Change size of image">
</body>
</html>
TIY
<html>
<head>
{
document.getElementById("compman").height="270"
document.getElementById("compman").width="164"
}
</script>
</head>
<body>
<img id="compman" src="/i/eg_bulbon.gif" />
<br /><br />
<input type="button" onclick="changeSize()" value="
">
</body>
</html>
HTML DOM className
className class
object.className=classname
<body> class
<html>
<body id="myid" class="mystyle">
x=document.getElementsByTagName('body')[0];
document.write("Body CSS class: " + x.className);
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);
</script>
</body>
</html>
Body CSS class: mystyle

An alternate way: mystyle
TIY
<body> class
<html>
<body id="myid" class="mystyle">
document.write("Body CSS class: " + x.className);
document.write(document.getElementById('myid').className);
</script>
</body>
</html>
HTML DOM dir
dir
object.dir=text-direction
<body>
<html>
<body id="myid" dir="rtl">
document.write("Text direction: " + x.dir);
document.write(document.getElementById('myid').dir);
</script>
</body>
</html>
TIY
<body>
<html>
<body id="myid" dir="rtl">
document.write("Text direction: " + x.dir);
document.write(document.getElementById('myid').dir);
</script>
</body>
</html>
HTML DOM lang
lang
object.lang=language-code

<body>
<html>
<body id="myid" lang="en-us">
document.write("Body language: " + x.lang);
document.write(document.getElementById('myid').lang);
</script>
</body>
</html>
TIY
<body>
<html>
<body id="myid" lang="en-us">
document.write("Body language: " + x.lang);
document.write(document.getElementById('myid').lang);
</script>
</body>
</html>
HTML DOM title
title
object.title=title
1
<body> title
<html>
<body id="myid" title="mytitle">
document.write("Body title: " + x.title);
document.write(document.getElementById('myid').title);
</script>
</body>
</html>
2
title
<html>
<body>
<img src ="planets.gif"
alt="Planets"
usemap ="#planetmap" />
<map name ="planetmap">

coords ="124,58,8"
title="Venus"
href ="venus.htm" />
</map>
<p>Venus' advisory title (mouse over the Venus planet):
x=document.getElementById('venus')
document.write(x.title)
</script>
</p>
</body>
</html>
TIY
<body> title
<html>
<body id="myid" title="mytitle">
document.write("Body title: " + x.title);
document.write(document.getElementById('myid').title);
</script>
</body>
</html>
title
<html>
<body>
<img id="planets"
coords="180,139,14"
target ="_blank"
title="Venus" />
</map>
</map>
<p>Venus title
x=document.getElementById('venus')
document.write(x.title)
</script>
</p>
</body>
</html>
HTML DOM blur()
blur()
anchorObject.blur()
<html>
<head>
a:active {color:green}
</style>
function getfocus()
{document.getElementById('myAnchor').focus()}
function losefocus()
{document.getElementById('myAnchor').blur()}
</script>
</head>
<body>
<a id="myAnchor"
href="http://www.w3school.com.cn">Visit W3School.com.cn</a>
<br /><br/>
<input type="button" onclick="getfocus()" value="Get focus">
<input type="button" onclick="losefocus()" value="Lose focus">
</body>
</html>
TIY
focus() blur()
<html>
<head>
a:active {color:green}
</style>
function getfocus()
{document.getElementById('myAnchor').focus()}
function losefocus()
{document.getElementById('myAnchor').blur()}
</script>
</head>
<body>
<a id="myAnchor" href="http://www.w3school.com.cn">
W3School.com.cn</a>
<br /><br/>
<input type="button" onclick="getfocus()" value="">
<input type="button" onclick="losefocus()" value="">

</body>
</html>
HTML DOM click()
click()
buttonObject.click()
body onload
<html>
<head>
function clickButton()
{
document.getElementById('button1').click()
}
function alertMsg()
{
alert("Button 1 was clicked!")
}
</script>
</head>
<body onload="clickButton()">
<form>
<input type="button" id="button1" onclick="alertMsg()"
value="Button 1" />
</form>
</body>
</html>
TIY
<html>
<head>
function clickButton()
{
document.getElementById('button1').click()
}
function alertMsg()
{
alert("Button 1 was clicked!")
}
</script>
</head>
<body onload="clickButton()">
<form>
<input type="button" id="button1" onclick="alertMsg()" value="Button
1" />
</form>
</body>
</html>
HTML DOM focus()
focus()
buttonObject.focus()
<html>
<head>
function setFocus()
{
document.getElementById('button1').focus()
}
</script>
</head>
<body>
<form>
<input type="button" id="button1" value="Button1" />
<br />
<input type="button" onclick="setFocus()"
value="Set focus to Button 1" />
</form>
</body>
</html>
TIY
<html>
<head>
function setFocus()
{
document.getElementById('button1').focus()
}
function removeFocus()
{
document.getElementById('button1').blur()
}
</script>
</head>
<body>
<form>
<input type="button" id="button1" value="Button1" />
<br /><br />
<input type="button" onclick="setFocus()" value="Set focus" />
<input type="button" onclick="removeFocus()" value="Remove focus" />
</form>
</body>
</html>
HTML DOM reset()
reset()
formObject.reset()
Reset onreset
<html>
<head>
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>
<form id="myForm">
Name: <input type="text" size="20"><br />

Age: <input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="Reset">
</form>
</body>
</html>
TIY
<html>
<head>
function formReset()
{
document.getElementById("myForm").reset()
}
</script>
</head>
<body>
<p></p>
<form id="myForm">
<input type="text" size="20"><br />
<input type="text" size="20"><br />
<br />
<input type="button" onclick="formReset()" value="">
</form>
</body>
</html>
HTML DOM submit()
submit() Web
formObject.submit()
Submit onsubmit
<html>
<head>
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>
</head>
<body>
<form id="myForm" action="js_form_action.asp" method="get">
Firstname: <input type="text" name="firstname" size="20"><br />
Lastname: <input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="Submit">
</form>
</body>
</html>
TIY
<html>
<head>
function formSubmit()
{
document.getElementById("myForm").submit()
}
</script>
</head>
<body>
<p></p>
<form id="myForm" action="/i/eg_smile.gif" method="get">
<input type="text" name="firstname" size="20"><br />
<input type="text" name="lastname" size="20"><br />
<br />
<input type="button" onclick="formSubmit()" value="">
</form>
</body>
</html>
HTML DOM Event
<html>
<head>
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
{
alert("")
}
else if(btnNum==0)
{
alert("")
}
else if(btnNum==1)
{
alert("");
}
else
{
alert("" + btnNum+ "");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p></p>
</body>
</html>
<html>
<head>
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X : " + x + ", Y : " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p> x y </p>
</body>
</html>
unicode
<html>
<head>
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p><b></b></p>
<p> unicode</p>
</body>
</html>
<html>
<head>
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
x y
</p>
</body>
</html>
shift
<html>
<head>
function isKeyPressed(event)
{
if (event.shiftKey==1)
{
alert("The shift key was pressed!")
}
else
{
alert("The shift key was NOT pressed!")
}
}
</script>
</head>
<body onmousedown="isKeyPressed(event)">
<p> shift </p>
</body>
</html>
<html>
<head>
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p></p>
<h3></h3>
<p></p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
<html>
<head>
function getEventType(event)
{
alert(event.type);
}
</script>
</head>
<body onmousedown="getEventType(event)">
<p></p>
</body>
</html>
Event
Event
(Event Handlers)
HTML 4.0 HTML
HTML JavaScript HTML
...
IE
W3C
onabort
Yes
onblur
Yes
onchange
Yes
onclick
Yes
ondblclick
Yes
onerror
Yes
onfocus
Yes
onkeydown
No
Yes
onkeypress
Yes
onkeyup
Yes
onload
Yes
onmousedown
Yes
onmousemove
Yes
onmouseout
Yes
onmouseover
Yes
onmouseup
Yes
onreset
Yes
onresize
Yes
onselect
Yes
onsubmit
Yes
onunload
Yes
IE
W3C
altKey
"ALT"
Yes
button
Yes
clientX
Yes
clientY
Yes
ctrlKey
"CTRL"
Yes
metaKey
"meta"
No
Yes
relatedTarget
No
Yes
screenX
Yes
screenY
Yes
shiftKey
"SHIFT"
Yes
IE
/IE
cancelBubble
true
fromElement
mouseover mouseout fromElement
keyCode
keypress Unicode
keydown keyup
offsetX,offsetY
x y
returnValue
fasle
srcElement
Window Document Element
toElement
mouseover mouseout
x,y
x y CSS
Event
2 DOM
IE
W3C
bubbles
No
Yes
cancelable
No
Yes
currentTarget
No
Yes
eventPhase
target
No
Yes
timeStamp
No
Yes
type
Event
Yes
Yes
Event
2 DOM IE
IE
W3C
initEvent()
Event
No
Yes
preventDefault()
No
Yes
stopPropagation()
No
Yes
onabort
onabort
stop
onabort="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<img>
JavaScript
image
<img src="image_w3default.gif"
onabort="alert('Error: Loading of the image was aborted')" />
<html>
<head>
function abortImage()
{
alert('Error: Loading of the image was aborted')
}
</script>
</head>
<body>
<img src="image_w3default.gif" onabort="abortImage()" />
</body>
</html>
onblur
onblur
onblur="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>,
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>,
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>,
<i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>,
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>,
<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,
<th>, <thead>, <tr>, <tt>, <ul>, <var>
JavaScript
button, checkbox, fileUpload, layer, frame, password,
radio, reset, submit, text, textarea, window
1
JavaScript
<html>
<head>
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
<input type="text" id="fname" onblur="upperCase()" />

</body>
</html>
TIY
onblur
onblur JavaScript
<html>
<head>
function upperCase()
{
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
</head>
<body>
Enter your name: <input type="text" id="fname"
onblur="upperCase()"><br />
Enter your age: <input type="text" id="age" onblur="alert(this.id)">
</body>
</html>
onchange
onchange
onchange="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<input type="text">, <select>, <textarea>
JavaScript
fileUpload, select, text, textarea
1
JavaScript
<html>
<head>
function upperCase(x)
{
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
</head>
<body>

<input type="text" id="fname" onchange="upperCase(this.id)" />
</body>
</html>
TIY
onchange
onchange JavaScript
<html>
<head>
{
}
</script>
</head>
<body>
onchange="upperCase(this.id)">
</body>
</html>
onclick
onclick
onclick onmousedown

onclick="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>,
<button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>,
<em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>,
<kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>,
<samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>,
<tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>,
<var>
JavaScript
button, document, checkbox, link, radio, reset, submit
<html>
<body>
Field1: <input type="text" id="field1" value="Hello World!">
<br />
Field2: <input type="text" id="field2">
<br /><br />
Field1 Field2
<br />
<button onclick="document.getElementById('field2').value=
document.getElementById('field1').value">Copy Text</button>
</body>
</html>
TIY
onclick
onclick
<html>
<body>
<br />
<br /><br />
Click the button below to copy the content of Field1 to Field2.
<br />
<button onclick="document.getElementById('field2').value=
</body>
</html>
ondblclick
ondblclick
ondblclick="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML

<kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>,
<samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>,
<tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>,
<var>
JavaScript
document, link
<html>
<body>
<br />
<br /><br />
Field1 Field2
<br />
<button ondblclick="document.getElementById('field2').value=
</body>
</html>
TIY
ondblclick
ondblclick
<html>
<body>
<br />
<br /><br />

Click the button below to copy the content of Field1 to Field2.
<br />
<button ondblclick="document.getElementById('field2').value=
</body>
</html>
onerror
onerror
onerror="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<img>, <object>, <style>
JavaScript
window, image
<img src="image.gif" onerror="alert('The image could not be
loaded.')" />
TIY
onerror
onerror
<html>
<body>
<img src="image.gif"
onerror="alert('The image could not be loaded.')">
<p></p>
</body>
</html>
onfocus
onfocus
onfocus="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>,
<em>, <fieldset>, <form>, <frame>, <frameset>, <h1> to <h6>, <hr>,
<i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>,
<object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>,

<strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>,
<th>, <thead>, <tr>, <tt>, <ul>, <var>
JavaScript
button, checkbox, fileUpload, layer, frame, password, radio, reset,
select, submit, text, textarea, window
<html>
<head>
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
First name: <input type="text"
onfocus="setStyle(this.id)" id="fname" />
<br />
Last name: <input type="text"
onfocus="setStyle(this.id)" id="lname" />
</body>
</html>
TIY
onfocus
onfocus
<html>
<head>
function setStyle(x)
{
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
First name: <input type="text" onfocus="setStyle(this.id)"
id="fname">
<br />
Last name: <input type="text" onfocus="setStyle(this.id)"
id="lname">
</body>
</html>
onkeydown
onkeydown
onkeydown="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>,
<dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>,
<label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>,
<select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>,
<td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
JavaScript
document, image, link, textarea
Internet Explorer
Netscape/Firefox/Opera event.which
event.keyCode
<html>
<body>
function noNumbers(e)
{
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<form>
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</html>
rTIY
onkeydown
onkeydown
<html>
<body>
{
var keynum
var keychar
var numcheck
{
keynum = e.keyCode
}
{
keynum = e.which
}
numcheck = /\d/
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onkeydown="return noNumbers(event)" />
</form>
</html>
onkeypress
onkeypress
onkeypress="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
JavaScript
Internet Explorer
Netscape/Firefox/Opera event.which
<html>
event.keyCode
<body>
{
var keynum
var keychar
var numcheck
{
keynum = e.keyCode
}
{
keynum = e.which
}
numcheck = /\d/
}
</script>
<form>
<input type="text" onkeypress="return noNumbers(event)" />
</form>
</html>
TIY
onkeypress
onkeypress
<html>
<body>
{
var keynum
var keychar
var numcheck
{
keynum = e.keyCode
}
{
keynum = e.which
}
numcheck = /\d/
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onkeypress="return noNumbers(event)" />
</form>
</html>
onKeyUp
onkeyup
onkeyup="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
JavaScript
<html>
<head>
{
}
</script>
</head>
<body>
<input type="text" id="fname"
onkeyup="upperCase(this.id)" />
</body>
</html>
TIY
onkeyup
onkeyup
<html>
<head>
{
}
</script>
</head>
<body>
onkeyup="upperCase(this.id)">
</body>
</html>
onload
onload
onload="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>
JavaScript
image, layer, window

"Page is loaded"
<html>
<head>
function load()
{
window.status="Page is loaded"
}
</script>
</head>
<body onload="load()">
</body>
</html>
TIY
onload
onload
<html>
<head>
function load()
{
window.status="Page is loaded"
}
</script>
</head>
<body onload="load()">
</body>
</html>
onmousedown
onmousedown
onmousedown="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>,
JavaScript
button, document, link
<img src="/i/example_mouse2.jpg"
onmousedown="alert('You clicked the picture!')" />
<html>
<head>
{
var targ
var tname
tname=targ.tagName
}
</script>
</head>
<h2>This is a header</h2>
<img border="0" src="ball16.gif" alt="Ball">
</body>
</html>
TIY
onmousedown
onmousedown
<html>
<body>
<img src="/i/eg_mouse2.jpg" onMouseDown="alert('You clicked the
picture!')">
<p>Click the picture</p>
</body>
</html>
onmousedown 2
onmousedown
<html>
<head>
{
var targ
var tname
tname=targ.tagName
}
</script>
</head>
<p></p>
<h3></h3>
<p></p>
<img src="/i/eg_mouse2.jpg" />
</body>
</html>
onmousemove
onmousemove

onmousemove="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
JavaScript
onmousemove is, by default, not an event of any object,
because mouse movement happens very frequently.
mousemove
mousemove
<img src="/i/eg_mouse2.jpg" alt="mouse"

onmousemove="alert('')" />
TIY
onmousemove
onmousemove
<html>
<body>
<img src="/i/eg_mouse2.jpg" name="mousetest">
<p onmousemove="document.images['mousetest']
.src='/i/eg_mouse.jpg'">When you move the mouse pointer over this
paragraph, the image changes.</p>
</body>
</html>
onmouseout
onmouseout
onmouseout="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
JavaScript
layer, link
<img src="/i/example_mouse2.jpg" alt="mouse"

onmousemove="alert('')" />
onMouseOver onMouseOut JavaScript
<html>
<head>
function mouseOver()
{
document.getElementById('b1').src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.getElementById('b1').src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn"
onmouseover="mouseOver()" onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/example_mouse2.jpg" id="b1" />
</a>
</body>
</html>
TIY
onmouseout
onmouseout
<html>
<head>
{
}
function mouseOut()
{
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img alt="Visit W3School!" src="/i/eg_mouse2.jpg" id="b1" />
</a>
</body>
</html>
onmouseover
onmouseover
onmouseover="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
JavaScript
layer, link
<img src="/i/eg_mouse2.jpg" alt="mouse"

onmouseover="alert('')" />
onMouseOver onMouseOut JavaScript
<html>
<head>
{
}
function mouseOut()
{
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn"
onmouseover="mouseOver()" onmouseout="mouseOut()">
</a>
</body>
</html>
TIY
onmouseover
onmouseover
<html>
<head>
{
}
function mouseOut()
{
}
</script>
</head>
<body>
<a href="http://www.w3school.com.cn" onmouseover="mouseOver()"
onmouseout="mouseOut()">
</a>
</body>
</html>
onreset
onreset
onreset="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<form>
JavaScript
form
<form onreset="alert('The form will be reset')">

Firstname: <input type="text" name="fname" value="John" />
<br />
Lastname: <input type="text" name="lname" />
<br /><br />
<input type="reset" value="Reset">
</form>
TIY
onreset
onreset reset
<html>
<body>
<form onreset="alert('The form will be reset')">
Firstname: <input type="text" name="fname" value="John" />
<br />
Lastname: <input type="text" name="lname" />
<br /><br />
<input type="reset" value="Reset">
</form>
</body>
</html>
onresize
onresize
onresize="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>,
<code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>,
<frame>, <h1> to <h6>,<hr>, <i>, <img>, <input>, <kbd>, <label>,

<legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>,
<span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>
JavaScript
window
<body onresize="alert('You have changed the size of the window')">

</body>
TIY
onresize
onresize
<html>
<body onresize="alert('You have changed the size of the window')">
<p>Try to resize the browser window.</p>
</body>
</html>
onselect
onselect
onselect="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<input type="text">, <textarea>
JavaScript
window
<form>
Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')" />
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!</textarea>
</form>
TIY
onselect
onselect
<form>
Select text: <input type="text" value="Hello world!"
<br /><br />
Select text: <textarea cols="20" rows="5"
Hello world!
onsubmit
onsubmit
onsubmit="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<form>
JavaScript
form
<form name="testform" action="jsref_onsubmit.asp"

onsubmit="alert('Hello ' + testform.fname.value +'!')">
What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
TIY
onsubmit
onsubmit
<html>
<body>
<h1>What is your name?</h1>
<form name="testform" action="/example/hdom/hdom_onsubmit.html"
onSubmit="alert('Hello ' + testform.inputfield.value +'!')">
<input type="text" name="inputfield" size="20">
<input type="submit" value="Submit">
</form>
</body>
</html>
onunload
onunload
onunload="SomeJavaScriptCode"
SomeJavaScriptCode
JavaScript
HTML
<body>, <frameset>
JavaScript
window
<body onunload="alert('The onunload event was triggered')">

</body>
TIY
onunload
onunload
<html>
<body onunload="alert('The onunload event was triggered')">
<p>Close the page to trigger the onunload event.</p>
</body>
</html>
altKey
altKey Alt
event.altKey=true|false|1|0

"ALT"
<html>
<head>
{
if (event.altKey==1)
{
alert("The ALT key was pressed!")
}
else
{
alert("The ALT key was NOT pressed!")
}
}
</script>
</head>
<p>Click somewhere in the document.
An alert box will tell you if you
pressed the ALT key or not.</p>
</body>
</html>
TIY
altKey
ALT
<html>
<head>
{
if (event.altKey==1)
{
alert("The ALT key was pressed!")

}
else
{
alert("The ALT key was NOT pressed!")
}
}
</script>
</head>
<p>Click somewhere in the document. An alert box will tell you if you
pressed the ALT key or not.</p>
</body>
</html>
button
button
event.button=0|1|2
Internet Explorer
Mozilla CtrlClick 2
The following example alerts which mouse button was clicked:

<html>
<head>
{
if (event.button==2)
{
alert("You clicked the right mouse button!")
}
else
{
alert("You clicked the left mouse button!")
}
}
</script>
</head>
<p>Click in the document. An alert box will
alert which mouse button you clicked.</p>
</body>
</html>
TIY
button

<html>
<head>
{
var btnNum = event.button;
if (btnNum==2)
{
alert("")
}
else if(btnNum==0)
{
alert("")
}
else if(btnNum==1)
{
alert("");
}
else
{
alert("" + btnNum+ "");
}
}
</script>
</head>
<p></p>
</body>
</html>
clientX
clientX

event.clientX
2 DOM IE
window.pageXOffset window.pageYOffset
<html>
<head>
{
x=event.clientX
y=event.clientY
alert("X coords: " + x + ", Y coords: " + y)
}
</script>
</head>
<p>Click in the document. An alert box will alert
the x and y coordinates of the mouse pointer.</p>
</body>
</html>
TIY
clientX
<html>
<head>
{
x=event.clientX
y=event.clientY
alert("X : " + x + ", Y : " + y)
}
</script>
</head>
<p> x y </p>
</body>
</html>
clientY
clientY
event.clientY
clientY 02 DOM
IE window.pageXOffset window.pageYOffset
<html>
<head>
{
x=event.clientX
y=event.clientY
}
</script>
</head>
the x and y coordinates of the mouse pointer.</p>
</body>
</html>
TIY
clientY
<html>
<head>
{
x=event.clientX
y=event.clientY
alert("X : " + x + ", Y : " + y)
}
</script>
</head>
<p> x y </p>
</body>
</html>
ctrlKey
ctrlKey Ctrl
event.ctrlKey=true|false|1|0
"CTRL"
<html>
<head>
{
if (event.ctrlKey==1)
{
alert("The CTRL key was pressed!")
}
else
{
alert("The CTRL key was NOT pressed!")
}
}
</script>
</head>
pressed the CTRL key or not.</p>
</body>
</html>
TIY
ctrlKey
CTRL
<html>
<head>
{
if (event.ctrlKey==1)
{
alert("The CTRL key was pressed!")
}
else
{
alert("The CTRL key was NOT pressed!")
}
}
</script>
</head>
pressed the CTRL key or not.</p>
</body>
</html>
metaKey
metaKey "meta"

event.metaKey
"meta"
<html>
<head>
{
if (event.metaKey==1)
{
alert("The meta key was pressed!")
}
else
{
alert("The meta key was NOT pressed!")
}
}
</script>
</head>
pressed the meta key or not.</p>
</body>
</html>
TIY
metakey
meta IE
<html>
<head>
{
if (event.metaKey==1)
{
alert("The meta key was pressed!")
}
else
{
alert("The meta key was NOT pressed!")
}
}
</script>
</head>
pressed the meta key or not.</p>
</body>
</html>
relatedTarget
relatedTarget
mouseover
mouseout
event.relatedTarget
<html>
<head>
function getRelElement(event)
{
var txt="The cursor just exited the ";
txt=txt + event.relatedTarget.tagName + " element.";
alert(txt);
}
</script>
</head>
<body>
<p onmouseover="getRelElement(event)">
Mouse over this paragraph.</p>
</body>
</html>
TIY
relatedtarget
IE
<html>
<head>
function getRelatedElement(event)
{
alert("The cursor just exited the " + event.relatedTarget.tagName
+ " element.");
}
</script>
</head>
<body>
<p onmouseover="getRelatedElement(event)">Mouse over this
paragraph.</p>
</body>
</html>
screenX
screenX
event.screenX
<html>
<head>
{
x=event.screenX
y=event.screenY
}
</script>
</head>
the x and y coordinates of the cursor.</p>
</body>
</html>
TIY
screenX
<html>
<head>
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<p>
x y
</p>
</body>
</html>
screenY
screenY
event.screenY
<html>
<head>
{
x=event.screenX
y=event.screenY
}
</script>
</head>
the x and y coordinates of the cursor.</p>
</body>
</html>
TIY
screenY
<html>
<head>
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<p>
x y
</p>
</body>
</html>
shiftKey
shiftKey "SHIFT"
event.shiftKey=true|false|1|0
"SHIFT"
<html>
<head>
{
{
}
else
{
}
}
</script>
</head>
pressed the shift key or not.</p>
</body>
</html>
TIY
shiftKey
SHIFT
<html>
<head>
{
{
}
else
{
}
}
</script>
</head>
<p> shift </p>
</body>
</html>
bubbles
bubbles true fasle
event.bubbles

2 DOM
Document
Document
<html>
<head>
{
alert(event.bubbles);
}
</script>
</head>
An alert box will tell if the event is a bubbling event.</p>
</body>
</html>
TIY
bubbling event
IE
<html>
<head>
{
alert(event.bubbles);
}
</script>
</head>
<p>Click somewhere in the document. An alert box will tell if the event
is a bubbling event.</p>
</body>
</html>
cancelable
cancelable preventDefault()
true fasle
event.cancelable
cancelable
<html>
<head>
function isEventCancelable(event)
{
alert(event.cancelable);
}
</script>
</head>
<body onmousedown="isEventCancelable(event)">
An alert box will tell if the
event is a cancelable event.</p>
</body>
</html>
TIY
cancelable event
cancelable IE
<html>
<head>
function isEventCancelable(event)
{
alert(event.cancelable);
}
</script>
</head>
<body onmousedown="isEventCancelable(event)">
<p>Click somewhere in the document. An alert box will tell if the event
is a cancelable event.</p>
</body>
</html>
currentTarget
currentTarget
target
event.currentTarget
<html>
<head>
function getEventTrigger(event)
{
x=event.currentTarget;
alert("The id of the triggered element: "
+ x.id);
}
</script>
</head>
<body >
<p id="p1" onmousedown="getEventTrigger(event)">
Click on this paragraph. An alert box will
show which element triggered the event.</p>
</body>
</html>
TIY
currenttarget event
<html>
<head>
{
x=event.currentTarget;
+ x.id);
}
</script>
</head>
<body >
</body>
</html>
eventPhase
eventPhase
eventPhase
Event.CAPTURING_PHASE
Event.AT_TARGET
Event.BUBBLING_PHASE
target
target
event.target
<html>
<head>
{
x=event.target;
+ x.id);
}
</script>
</head>
<body >
</body>
</html>
TIY
target event
IE
<html>
<head>
{
x=event.target;
alert("The id of the triggered element: " + x.id);
}
</script>
</head>
<body >
Click on this paragraph. An alert box will show which element triggered
the event.</p>
</body>
</html>
timeStamp
timeStamp epoch
epoch
timeStamp /

event.timeStamp
<html>
<head>
function showTimestamp(event)
{
x=event.timeStamp;
alert(x/minutes)
}
</script>
</head>
<body onmousedown="showTimestamp(event)">
<p>Click in the document. An alert
box will alert the timestamp.</p>
</body>
</html>
TIY
timestamp event
IE
<html>
<head>
function showTimestamp(event)
{
x=event.timeStamp;
alert(x/minutes)
}
</script>
</head>
<body onmousedown="showTimestamp(event)">
<p>Click in the document. An alert box will alert the timestamp.</p>
</body>
</html>
type
type Event
"on" "submit""load"
"click"
event.type
<html>
<head>
{
alert(event.type);
}
</script>
</head>

An alert box will tell what event
type you triggered.</p>
</body>
</html>
TIY
type event
IE
<html>
<head>
{
alert(event.type);
}
</script>
</head>
<p></p>
</body>
</html>
initEvent()
event.initEvent(eventType,canBubble,cancelable)
eventType
canBubble
cancelable
preventDefault()
Document.createEvent() Event type

bubbles cancelable Event Document
Element dispatchEvent() Event.initEvent()
preventDefault()
event.preventDefault()
Web
type "submit"
Event cancelable fasle
stopPropagation()
event.stopPropagation()
Document
Document
W3School
W3School

w3school JavaScript参考手册 飞龙整理

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

w3school JavaScript参考手册 飞龙整理

Uploaded by

Copyright:

Available Formats

W3School JavaScript

JavaScript Boolean .............................................................................. 41

JavaScript Date ......................................................................................48

JavaScript getTime() ................................................................................................................ 65

Math ............................................................................................................................... 112

JavaScript LOG10E .................................................................................................................117

Number ......................................................................................................................... 141

JavaScript String ................................................................................. 154

JavaScript bold() .................................................................................................................... 160

JavaScript RegExp .............................................................................. 191

JavaScript RegExp \B ......................................................................................................... 206

HTML DOM userLanguage .................................................................................................... 294

Screen ............................................................................................................................ 297

History ........................................................................................................................... 307

Location ........................................................................................................................ 311

HTML DOM Document ......................................................................................... 322

HTML DOM cookie ................................................................................................................ 328

HTML DOM Style ..................................................................................................... 406

HTML DOM clear ...................................................................................................................497

HTML DOM fontFamily ......................................................................................................... 582

HTML DOM marginWidth ..................................................................................................... 651

HTML DOM Event ....................................................................................................709

size length size

function employee(name, jobtitle, born)

document.write("Original length: " + arr.length)

var arr2 = new Array(3)

push() arrayObject arrayObject

start end arrayObject

end slice() start

document.write(arr.slice(1) + "<br />")

document.write(arr + "<br />")

item1, ..., itemX

splice() slice() splice()

document.write(arr + "<br />")

index 2 ("Thomas") ("William")

Gecko Firefox IESafariChromeOpera

({name:"Bill Gates", job:"Engineer", born:1985})

George, John, Thomas

unshift() Internet Explorer

value 0-0null""falseundefined NaN

({name:"Bill Gates", job:"Engineer", born:1985})

booleanObject "true" "false"

Thu Oct 10 2013 19:40:14 GMT+0800 ()

The month is October

I was born in 1983

getYear() 4 1900 1999

1381406194654 milliseconds since 1970/01/01

getTimezoneOffset() GMT UTC

var d = new Date()

The local time zone is: GMT -8

The month is October

I was born in 1983

It's been: 35.538812785388124 years from 1970/01/01 to 2005/07/08!

Tue Oct 15 2013 20:06:43 GMT+0800 ()

Sun Jan 20 2013 20:08:07 GMT+0800 ()

Sat Oct 10 1992 20:09:00 GMT+0800 ()

Tue Nov 03 1992 20:09:00 GMT+0800 ()

year setYear(91) 1991

Sat Oct 10 1891 20:10:34 GMT+0800 ()

Thu Oct 10 2013 15:11:16 GMT+0800 ()

Thu Oct 10 2013 15:35:01 GMT+0800 ()

Thu Oct 10 2013 20:01:05 GMT+0800 ()

The setSeconds() method is used to set the seconds of a specified time.

Thu Oct 10 2013 20:16:10 GMT+0800 ()

w3school JavaScript参考手册飞龙整理

w3school JavaScript参考手册飞龙整理