语法基础
javascript与java语法相似。
注释 ：//，/* */。
标识符 （变量名、函数名、标签名）： 字母 、 数字 、 _ 、和 $ 的组合，数字不能开头。
关键字 ：break、case、catch、continue、default、delete、do、else、false、finally、for、function、if、in、instanceof、new、null、return、switch、this、throw、true、try、typeof、var、void、while、with
预留关键字 ：abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile
变量 ：var i=1+2+3; // var x=3, message="ok"。变量无类型，可以包含任何数据类型的值；声明在函数外的 全局变量 对整个javascript程序可见，声明在函数内的 局部变量 只在函数域内可见。javascript没有块级域的概念：定义在花括号里的变量在外部仍可见。
数据类型 ： 数字 （1、3.14、0xFF，用isNaN函数测试一个值不是数字）； 布尔（true、false）； 字符串 （'hello'、"OK"、'and "nested" '，16位unicode字符集）；对象 （var o = new Object()、var o={x:1, y:2, z:3}、o.x=1、o["x"]=1）； 数组 （var a = new Array()、var a = new Array(1,2,3)、var a = [1, 2, 3]、var b = [1, true, [1,2], {x:1,y:2}, "OK"]、a[1]=a[0]+a[2]）
函数 ：function sum(x,y) { return x + y; }；var sum = new Function("x", "y", "return x+y;");；var sum = function(x,y) { return x+y; }；var total = sum(1,2);。
空值和未定义值 ：null表示空值；undefined表示未定义值；两者“==”结果为true，但“===”结果为false。
操作符 ：与java基本相同，.、[]、()、new、++、--、-、+、~、!、delete、typeof、void、*、/、%、<<、>>、>>>、<、<=、>、>=、instanceof、in、==、!=、===、!==、&、^、|、&&、||、?:、,、=、*=、+=、-=、等等。“==”表示松散相等，允许类型转换，比如3=="3"为真；“===”为严格相等，必须有相同类型且值相等。比较符作用在字符串上时基于字母序。“in”表示右边的对象是否继承或包含左边的对象。
语句 ：表达式;、{表达式1; 表达式2}、空语句;、label: statement；break [label]、case、continue [label]、default、do/while、for、for/in、function、if/else、return、switch、throw、try/catch/finally、var、while、with。
面向对象 ：
function Point(x,y) { //constructor
this.x = x;
this.y = y;
this.f = function() { return x + y; }
}
Point.static_member = 5; // 静态变量
Point.static_function = function { return static_member; } // 静态方法
正则表达式 ：支持的特殊字符有：[...]、[^...]、\w、\W、\s、\S、\d、\D、?、+、*、{n}、{n,}、{n,m}、a|b、(sub)、(?:sub)、\n、$n、^、$、\b、\B、(?=p)、(?!p)。其中(?:sub)表示不存储匹配的值到变量；\n表示匹配第n组的子表达式；$n表示替换第n组的子表达式；(?=p)前瞻匹配；(?!p)前瞻否定匹配。
客户端javascript
客户端javascript是嵌入到HTML里由浏览器执行的javascript代码。HTML里用<script>标签来定义脚本语言。HTML控件可以使用event handler来调用javascript的代码，比如<input type="button" οnclick="alert ('OK')">。也可以在表单的提交动作里执行javascript，比如<form action="javascript:alert('OK')">。
Window对象 表示一个浏览器窗口，它是全局对象，定义所有顶层属性和方法。通过window可以得到这个全局对象，从而可以访问它的属性和方法，比如window.document。通常这个window.前缀可以省略，比如我们可以直接使用document。
简单的对话框 有 alert 、 confirm 、和 prompt 。例如：
alert("Hello");
if (confirm("OK?")) {
var name = prompt("input your name");
}
状态栏 ：浏览器下方会有状态栏，用 window.status 来访问，比如status="OK"。很多浏览器出于安全考虑，已经禁用了这个功能。
计时器 ：var timer = setTimeout ("document.title=++count", 1000);设置一个1秒后执行的计时器； clearTimeout (timer)可以清除这个计时器。对应的， setInterval 和clearInterval 用来设置和清除循环的计时器。
系统信息 ：Window对象的navigator和screen属性分别对应于浏览器和屏幕对象，通过它们我们可以得到浏览器的名字和版本信息、操作系统、用户屏幕的分辨率等。
浏览器 ：Window对象的 location 属性指向浏览器的地址栏内容，我们可以读取它，甚至设置成一个新的网址，比如location="http://localhost"。虽然location表现得像一个字符串一样，但它其实是一个Location对象。Window对象的 history 属性表示浏览器的历史记录，可以用history.back()和history.forward()来后退和前进，history.go(-3)后退三次。
Window控制 ：Window对象提供了移动（moveTo、moveBy）、改变大小（resizeTo、resizeBy）、滚动窗口（scrollTo、ScrollBy）、得到焦点（focus）、放弃焦点（blur）的方法。更重要的一个方法是open，它可以打开一个新的窗口，例：var w = open("url.html", "window name", "resizable");，其中第二个参数是窗口名，如果已经存在则重用这个窗口；第三个参数是特性，可以设置新窗口的宽度、高度等。调用w.close()可以关闭这个窗口。
Document对象 ：每个Window对象都有一个document属性来表示当前文档，它比Window对象本身更有重要。文档内容被访问和修改的方式被称为DOM（Document Object Model）。DOM对应于文档元素的树形结构。
W3C DOM ：包括三个部分：core DOM（适用于任何结构体文档）、 XML DOM和HTML DOM 。HTML DOM是增加、修改、删除和访问HTML元素的标准。 document. getElementById和 document.getElementsByTagName用来得到元素节点。注意，getElementsByTagName会返回一个数组，可以用[]下标符来得到其中的元素。 有两个特殊的节点：document. documentElement和 document.body，可以直接访问。得到的每个节点都为一个Node对象。
HTML DOM Node ：三个重要的属性： nodeName（大写的元素标签名）、 nodeValue（标签包含的文本）、 nodeType（如下）。
| Element type | NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |
改变HTML ：例： < button onclick = "document.getElementsByTagName('title')[0].innerHTML='New Tile'" >。
Cookie ：通过document.cookie可以访问和设置与网页相关的cookie。比如document.cookie="key=value; expires=date; path=xxx";，多次调用可以加入多个cookie。expires指定过期时间，如果不设置那么cookie在网页关闭后失效；设置path属性可以使cookie在多个网页内共享。在读取cookie时，会返回以“, ”分隔的字符串，每个语素都是“key=value”的形式，注意expires和path不会显示在返回值里。
DHTML ：这不是一门语言，而是一个术语。Dynamic HTML，表示通过 HTML、 JavaScript、 HTML DOM、 和CSS 达到动态生成HTML效果。
javascript对象
Array
| Property | Description |
|---|---|
| constructor | Returns the function that created the Array object's prototype |
| length | Sets or returns the number of elements in an array |
| prototype | Allows you to add properties and methods to an Array object |
| Method | Description |
|---|---|
| concat() | Joins two or more arrays, and returns a copy of the joined arrays |
| indexOf() | Search the array for an element and returns it's position |
| join() | Joins all elements of an array into a string |
| lastIndexOf() | Search the array for an element, starting at the end, and returns it's position |
| pop() | Removes the last element of an array, and returns that element |
| push() | Adds new elements to the end of an array, and returns the new length |
| reverse() | Reverses the order of the elements in an array |
| shift() | Removes the first element of an array, and returns that element |
| slice() | Selects a part of an array, and returns the new array |
| sort() | Sorts the elements of an array |
| splice() | Adds/Removes elements from an array |
| toString() | Converts an array to a string, and returns the result |
| unshift() | Adds new elements to the beginning of an array, and returns the new length |
| valueOf() | Returns the primitive value of an array |
Boolean
| Property | Description |
|---|---|
| constructor | Returns the function that created the Boolean object's prototype |
| prototype | Allows you to add properties and methods to a Boolean object |
| Method | Description |
|---|---|
| toString() | Converts a Boolean value to a string, and returns the result |
| valueOf() | Returns the primitive value of a Boolean object |
Date
var d = new Date();
var d = new Date( milliseconds );
var d = new Date( dateString );
var d = new Date( year , month , day , hours , minutes , seconds , milliseconds );
var d = new Date( milliseconds );
var d = new Date( dateString );
var d = new Date( year , month , day , hours , minutes , seconds , milliseconds );
| Property | Description |
|---|---|
| constructor | Returns the function that created the Date object's prototype |
| prototype | Allows you to add properties and methods to an object |
| Method | Description |
|---|---|
| getDate() | Returns the day of the month (from 1-31) |
| getDay() | Returns the day of the week (from 0-6) |
| getFullYear() | Returns the year (four digits) |
| getHours() | Returns the hour (from 0-23) |
| getMilliseconds() | Returns the milliseconds (from 0-999) |
| getMinutes() | Returns the minutes (from 0-59) |
| getMonth() | Returns the month (from 0-11) |
| getSeconds() | Returns the seconds (from 0-59) |
| getTime() | Returns the number of milliseconds since midnight Jan 1, 1970 |
| getTimezoneOffset() | Returns the time difference between GMT and local time, in minutes |
| getUTCDate() | Returns the day of the month, according to universal time (from 1-31) |
| getUTCDay() | Returns the day of the week, according to universal time (from 0-6) |
| getUTCFullYear() | Returns the year, according to universal time (four digits) |
| getUTCHours() | Returns the hour, according to universal time (from 0-23) |
| getUTCMilliseconds() | Returns the milliseconds, according to universal time (from 0-999) |
| getUTCMinutes() | Returns the minutes, according to universal time (from 0-59) |
| getUTCMonth() | Returns the month, according to universal time (from 0-11) |
| getUTCSeconds() | Returns the seconds, according to universal time (from 0-59) |
| getYear() | Deprecated. Use the getFullYear() method instead |
| parse() | Parses a date string and returns the number of milliseconds since midnight of January 1, 1970 |
| setDate() | Sets the day of the month of a date object |
| setFullYear() | Sets the year (four digits) of a date object |
| setHours() | Sets the hour of a date object |
| setMilliseconds() | Sets the milliseconds of a date object |
| setMinutes() | Set the minutes of a date object |
| setMonth() | Sets the month of a date object |
| setSeconds() | Sets the seconds of a date object |
| setTime() | Sets a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970 |
| setUTCDate() | Sets the day of the month of a date object, according to universal time |
| setUTCFullYear() | Sets the year of a date object, according to universal time (four digits) |
| setUTCHours() | Sets the hour of a date object, according to universal time |
| setUTCMilliseconds() | Sets the milliseconds of a date object, according to universal time |
| setUTCMinutes() | Set the minutes of a date object, according to universal time |
| setUTCMonth() | Sets the month of a date object, according to universal time |
| setUTCSeconds() | Set the seconds of a date object, according to universal time |
| setYear() | Deprecated. Use the setFullYear() method instead |
| toDateString() | Converts the date portion of a Date object into a readable string |
| toGMTString() | Deprecated. Use the toUTCString() method instead |
| toISOString() | Returns the date as a string, using the ISO standard |
| toJSON() | Returns the date as a string, formated as a JSON date |
| toLocaleDateString() | Returns the date portion of a Date object as a string, using locale conventions |
| toLocaleTimeString() | Returns the time portion of a Date object as a string, using locale conventions |
| toLocaleString() | Converts a Date object to a string, using locale conventions |
| toString() | Converts a Date object to a string |
| toTimeString() | Converts the time portion of a Date object to a string |
| toUTCString() | Converts a Date object to a string, according to universal time |
| UTC() | Returns the number of milliseconds in a date string since midnight of January 1, 1970, according to universal time |
| valueOf() | Returns the primitive value of a Date object |
Math
var x = Math.PI; // Returns PI
var y = Math.sqrt(16); // Returns the square root of 16
var y = Math.sqrt(16); // Returns the square root of 16
| Property | Description |
|---|---|
| E | Returns Euler's number (approx. 2.718) |
| LN2 | Returns the natural logarithm of 2 (approx. 0.693) |
| LN10 | Returns the natural logarithm of 10 (approx. 2.302) |
| LOG2E | Returns the base-2 logarithm of E (approx. 1.442) |
| LOG10E | Returns the base-10 logarithm of E (approx. 0.434) |
| PI | Returns PI (approx. 3.14) |
| SQRT1_2 | Returns the square root of 1/2 (approx. 0.707) |
| SQRT2 | Returns the square root of 2 (approx. 1.414) |
| Method | Description |
|---|---|
| abs(x) | Returns the absolute value of x |
| acos(x) | Returns the arccosine of x, in radians |
| asin(x) | Returns the arcsine of x, in radians |
| atan(x) | Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians |
| atan2(y,x) | Returns the arctangent of the quotient of its arguments |
| ceil(x) | Returns x, rounded upwards to the nearest integer |
| cos(x) | Returns the cosine of x (x is in radians) |
| exp(x) | Returns the value of E x |
| floor(x) | Returns x, rounded downwards to the nearest integer |
| log(x) | Returns the natural logarithm (base E) of x |
| max(x,y,z,...,n) | Returns the number with the highest value |
| min(x,y,z,...,n) | Returns the number with the lowest value |
| pow(x,y) | Returns the value of x to the power of y |
| random() | Returns a random number between 0 and 1 |
| round(x) | Rounds x to the nearest integer |
| sin(x) | Returns the sine of x (x is in radians) |
| sqrt(x) | Returns the square root of x |
| tan(x) | Returns the tangent of an angle |
Number
var num = new Number(value);
| Property | Description |
|---|---|
| constructor | Returns the function that created the Number object's prototype |
| MAX_VALUE | Returns the largest number possible in JavaScript |
| MIN_VALUE | Returns the smallest number possible in JavaScript |
| NEGATIVE_INFINITY | Represents negative infinity (returned on overflow) |
| POSITIVE_INFINITY | Represents infinity (returned on overflow) |
| prototype | Allows you to add properties and methods to an object |
| Method | Description |
|---|---|
| toExponential(x) | Converts a number into an exponential notation |
| toFixed(x) | Formats a number with x numbers of digits after the decimal point |
| toPrecision(x) | Formats a number to x length |
| toString() | Converts a Number object to a string |
| valueOf() | Returns the primitive value of a Number object |
String
var txt = new String("
string
");
var txt = " string ";
var txt = " string ";
| Property | Description |
|---|---|
| constructor | Returns the function that created the String object's prototype |
| length | Returns the length of a string |
| prototype | Allows you to add properties and methods to an object |
| Method | Description |
|---|---|
| charAt() | Returns the character at the specified index |
| charCodeAt() | Returns the Unicode of the character at the specified index |
| concat() | Joins two or more strings, and returns a copy of the joined strings |
| fromCharCode() | Converts Unicode values to characters |
| indexOf() | Returns the position of the first found occurrence of a specified value in a string |
| lastIndexOf() | Returns the position of the last found occurrence of a specified value in a string |
| match() | Searches for a match between a regular expression and a string, and returns the matches |
| replace() | Searches for a match between a substring (or regular expression) and a string, and replaces the matched substring with a new substring |
| search() | Searches for a match between a regular expression and a string, and returns the position of the match |
| slice() | Extracts a part of a string and returns a new string |
| split() | Splits a string into an array of substrings |
| substr() | Extracts the characters from a string, beginning at a specified start position, and through the specified number of character |
| substring() | Extracts the characters from a string, between two specified indices |
| toLowerCase() | Converts a string to lowercase letters |
| toUpperCase() | Converts a string to uppercase letters |
| valueOf() | Returns the primitive value of a String object |
| HTML Wrapper Method | Description |
|---|---|
| anchor() | Creates an anchor |
| big() | Displays a string using a big font |
| blink() | Displays a blinking string |
| bold() | Displays a string in bold |
| fixed() | Displays a string using a fixed-pitch font |
| fontcolor() | Displays a string using a specified color |
| fontsize() | Displays a string using a specified size |
| italics() | Displays a string in italic |
| link() | Displays a string as a hyperlink |
| small() | Displays a string using a small font |
| strike() | Displays a string with a strikethrough |
| sub() | Displays a string as subscript text |
| sup() | Displays a string as superscript text |
RegExp
var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers;
| Modifier | Description |
|---|---|
| i | Perform case-insensitive matching |
| g | Perform a global match (find all matches rather than stopping after the first match) |
| m | Perform multiline matching |
| Expression | Description |
|---|---|
| [abc] | Find any character between the brackets |
| [^abc] | Find any character not between the brackets |
| [0-9] | Find any digit from 0 to 9 |
| [A-Z] | Find any character from uppercase A to uppercase Z |
| [a-z] | Find any character from lowercase a to lowercase z |
| [A-z] | Find any character from uppercase A to lowercase z |
| [adgk] | Find any character in the given set |
| [^adgk] | Find any character outside the given set |
| (red|blue|green) | Find any of the alternatives specified |
| Metacharacter | Description |
|---|---|
| . | Find a single character, except newline or line terminator |
| \w | Find a word character |
| \W | Find a non-word character |
| \d | Find a digit |
| \D | Find a non-digit character |
| \s | Find a whitespace character |
| \S | Find a non-whitespace character |
| \b | Find a match at the beginning/end of a word |
| \B | Find a match not at the beginning/end of a word |
| \0 | Find a NUL character |
| \n | Find a new line character |
| \f | Find a form feed character |
| \r | Find a carriage return character |
| \t | Find a tab character |
| \v | Find a vertical tab character |
| \xxx | Find the character specified by an octal number xxx |
| \xdd | Find the character specified by a hexadecimal number dd |
| \uxxxx | Find the Unicode character specified by a hexadecimal number xxxx |
| Quantifier | Description |
|---|---|
| n+ | Matches any string that contains at least one n |
| n* | Matches any string that contains zero or more occurrences of n |
| n? | Matches any string that contains zero or one occurrences of n |
| n{X} | Matches any string that contains a sequence of X n 's |
| n{X,Y} | Matches any string that contains a sequence of X to Y n 's |
| n{X,} | Matches any string that contains a sequence of at least X n 's |
| n$ | Matches any string with n at the end of it |
| ^n | Matches any string with n at the beginning of it |
| ?=n | Matches any string that is followed by a specific string n |
| ?!n | Matches any string that is not followed by a specific string n |
| Property | Description |
|---|---|
| global | Specifies if the "g" modifier is set |
| ignorecase | Specifies if the "i" modifier is set |
| lastIndex | The index at which to start the next match |
| multiline | Specifies if the "m" modifier is set |
| source | The text of the RegExp pattern |
| Method | Description |
|---|---|
| compile() | Compiles a regular expression |
| exec() | Tests for a match in a string. Returns the first match |
| test() | Tests for a match in a string. Returns true or false |
Global
| Property | Description |
|---|---|
| Infinity | A numeric value that represents positive/negative infinity |
| NaN | "Not-a-Number" value |
| undefined | Indicates that a variable has not been assigned a value |
| Function | Description |
|---|---|
| decodeURI() | Decodes a URI |
| decodeURIComponent() | Decodes a URI component |
| encodeURI() | Encodes a URI |
| encodeURIComponent() | Encodes a URI component |
| escape() | Encodes a string |
| eval() | Evaluates a string and executes it as if it was script code |
| isFinite() | Determines whether a value is a finite, legal number |
| isNaN() | Determines whether a value is an illegal number |
| Number() | Converts an object's value to a number |
| parseFloat() | Parses a string and returns a floating point number |
| parseInt() | Parses a string and returns an integer |
| String() | Converts an object's value to a string |
| unescape() | Decodes an encoded string |
Browser对象
Window
The window object represents an open window in a browser.
If a document contain frames (<frame> or <iframe> tags), the browser creates one window object for the HTML document, and one additional window object for each frame.
| Property | Description |
|---|---|
| closed | Returns a Boolean value indicating whether a window has been closed or not |
| defaultStatus | Sets or returns the default text in the statusbar of a window |
| document | Returns the Document object for the window (See Document object) |
| frames | Returns an array of all the frames (including iframes) in the current window |
| history | Returns the History object for the window (See History object) |
| innerHeight | Sets or returns the inner height of a window's content area |
| innerWidth | Sets or returns the inner width of a window's content area |
| length | Returns the number of frames (including iframes) in a window |
| location | Returns the Location object for the window (See Location object) |
| name | Sets or returns the name of a window |
| navigator | Returns the Navigator object for the window (See Navigator object) |
| opener | Returns a reference to the window that created the window |
| outerHeight | Sets or returns the outer height of a window, including toolbars/scrollbars |
| outerWidth | Sets or returns the outer width of a window, including toolbars/scrollbars |
| pageXOffset | Returns the pixels the current document has been scrolled (horizontally) from the upper left corner of the window |
| pageYOffset | Returns the pixels the current document has been scrolled (vertically) from the upper left corner of the window |
| parent | Returns the parent window of the current window |
| screen | Returns the Screen object for the window (See Screen object) |
| screenLeft | Returns the x coordinate of the window relative to the screen |
| screenTop | Returns the y coordinate of the window relative to the screen |
| screenX | Returns the x coordinate of the window relative to the screen |
| screenY | Returns the y coordinate of the window relative to the screen |
| self | Returns the current window |
| status | Sets the text in the statusbar of a window |
| top | Returns the topmost browser window |
| Method | Description |
|---|---|
| alert() | Displays an alert box with a message and an OK button |
| blur() | Removes focus from the current window |
| clearInterval() | Clears a timer set with setInterval() |
| clearTimeout() | Clears a timer set with setTimeout() |
| close() | Closes the current window |
| confirm() | Displays a dialog box with a message and an OK and a Cancel button |
| createPopup() | Creates a pop-up window |
| focus() | Sets focus to the current window |
| moveBy() | Moves a window relative to its current position |
| moveTo() | Moves a window to the specified position |
| open() | Opens a new browser window |
| print() | Prints the content of the current window |
| prompt() | Displays a dialog box that prompts the visitor for input |
| resizeBy() | Resizes the window by the specified pixels |
| resizeTo() | Resizes the window to the specified width and height |
| scroll() | |
| scrollBy() | Scrolls the content by the specified number of pixels |
| scrollTo() | Scrolls the content to the specified coordinates |
| setInterval() | Calls a function or evaluates an expression at specified intervals (in milliseconds) |
| setTimeout() | Calls a function or evaluates an expression after a specified number of milliseconds |
Navigator
The navigator object contains information about the browser.
| Property | Description |
|---|---|
| appCodeName | Returns the code name of the browser |
| appName | Returns the name of the browser |
| appVersion | Returns the version information of the browser |
| cookieEnabled | Determines whether cookies are enabled in the browser |
| platform | Returns for which platform the browser is compiled |
| userAgent | Returns the user-agent header sent by the browser to the server |
| Method | Description |
|---|---|
| javaEnabled() | Specifies whether or not the browser has Java enabled |
| taintEnabled() | Specifies whether or not the browser has data tainting enabled |
Screen
The screen object contains information about the visitor's screen.| Property | Description |
|---|---|
| availHeight | Returns the height of the screen (excluding the Windows Taskbar) |
| availWidth | Returns the width of the screen (excluding the Windows Taskbar) |
| colorDepth | Returns the bit depth of the color palette for displaying images |
| height | Returns the total height of the screen |
| pixelDepth | Returns the color resolution (in bits per pixel) of the screen |
| width | Returns the total width of the screen |
History
The history object contains the URLs visited by the user (within a browser window).
The history object is part of the window object and is accessed through the window.history property.
| Property | Description |
|---|---|
| length | Returns the number of URLs in the history list |
| Method | Description |
|---|---|
| back() | Loads the previous URL in the history list |
| forward() | Loads the next URL in the history list |
| go() | Loads a specific URL from the history list |
Location
The location object contains information about the current URL.
The location object is part of the window object and is accessed through the window.location property.
| Property | Description |
|---|---|
| hash | Returns the anchor portion of a URL |
| host | Returns the hostname and port of a URL |
| hostname | Returns the hostname of a URL |
| href | Returns the entire URL |
| pathname | Returns the path name of a URL |
| port | Returns the port number the server uses for a URL |
| protocol | Returns the protocol of a URL |
| search | Returns the query portion of a URL |
| Method | Description |
|---|---|
| assign() | Loads a new document |
| reload() | Reloads the current document |
| replace() | Replaces the current document with a new one |
Core DOM对象
Node
The Node object represents a node in the HTML document.| Property | Description | DOM |
|---|---|---|
| attributes | Returns a collection of a node's attributes | 1 |
| baseURI | Returns the absolute base URI of a node | 3 |
| childNodes | Returns a NodeList of child nodes for a node | 1 |
| firstChild | Returns the first child of a node | 1 |
| lastChild | Returns the last child of a node | 1 |
| localName | Returns the local part of the name of a node | 2 |
| namespaceURI | Returns the namespace URI of a node | 2 |
| nextSibling | Returns the next node at the same node tree level | 1 |
| nodeName | Returns the name of a node, depending on its type | 1 |
| nodeType | Returns the type of a node | 1 |
| nodeValue | Sets or returns the value of a node, depending on its type | 1 |
| ownerDocument | Returns the root element (document object) for a node | 2 |
| parentNode | Returns the parent node of a node | 1 |
| prefix | Sets or returns the namespace prefix of a node | 2 |
| previousSibling | Returns the previous node at the same node tree level | 1 |
| textContent | Sets or returns the textual content of a node and its descendants | 3 |
| Method | Description | DOM |
|---|---|---|
| appendChild() | Adds a new child node, to the specified node, as the last child node | 1 |
| cloneNode() | Clones a node | 1 |
| compareDocumentPosition() | Compares the document position of two nodes | 1 |
| getFeature( feature , version ) | Returns a DOM object which implements the specialized APIs of the specified feature and version | 3 |
| getUserData(key ) | Returns the object associated to a key on a this node. The object must first have been set to this node by calling setUserData with the same key | 3 |
| hasAttributes() | Returns true if a node has any attributes, otherwise it returns false | 2 |
| hasChildNodes() | Returns true if a node has any child nodes, otherwise it returns false | 1 |
| insertBefore() | Inserts a new child node before a specified, existing, child node | 1 |
| isDefaultNamespace() | Returns true if the specified namespaceURI is the default, otherwise false | 3 |
| isEqualNode() | Checks if two nodes are equal | 3 |
| isSameNode() | Checks if two nodes are the same node | 3 |
| isSupported() | Returns true if a specified feature is supported on a node, otherwise false | 2 |
| lookupNamespaceURI() | Returns the namespace URI matching a specified prefix | 3 |
| lookupPrefix() | Returns the prefix matching a specified namespace URI | 3 |
| normalize() | Joins adjacent text nodes and removes empty text nodes | 2 |
| removeChild() | Removes a child node | 1 |
| replaceChild() | Replaces a child node | 1 |
| setUserData(key,data,handler) | Associates an object to a key on a node | 3 |
| Node type | Description | Children | |
|---|---|---|---|
| 1 | Element | Represents an element | Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference |
| 2 | Attr | Represents an attribute | Text, EntityReference |
| 3 | Text | Represents textual content in an element or attribute | None |
| 4 | CDATASection | Represents a CDATA section in a document (text that will NOT be parsed by a parser) | None |
| 5 | EntityReference | Represents an entity reference | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 6 | Entity | Represents an entity | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 7 | ProcessingInstruction | Represents a processing instruction | None |
| 8 | Comment | Represents a comment | None |
| 9 | Document | Represents the entire document (the root-node of the DOM tree) | Element, ProcessingInstruction, Comment, DocumentType |
| 10 | DocumentType | Provides an interface to the entities defined for the document | None |
| 11 | DocumentFragment | Represents a "lightweight" Document object, which can hold a portion of a document | Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference |
| 12 | Notation | Represents a notation declared in the DTD | None |
| Node type | nodeName returns | nodeValue returns | |
|---|---|---|---|
| 1 | Element | element name | null |
| 2 | Attr | attribute name | attribute value |
| 3 | Text | #text | content of node |
| 4 | CDATASection | #cdata-section | content of node |
| 5 | EntityReference | entity reference name | null |
| 6 | Entity | entity name | null |
| 7 | ProcessingInstruction | target | content of node |
| 8 | Comment | #comment | comment text |
| 9 | Document | #document | null |
| 10 | DocumentType | doctype name | null |
| 11 | DocumentFragment | #document fragment | null |
| 12 | Notation | notation name | null |
| NodeType | Named Constant |
|---|---|
| 1 | ELEMENT_NODE |
| 2 | ATTRIBUTE_NODE |
| 3 | TEXT_NODE |
| 4 | CDATA_SECTION_NODE |
| 5 | ENTITY_REFERENCE_NODE |
| 6 | ENTITY_NODE |
| 7 | PROCESSING_INSTRUCTION_NODE |
| 8 | COMMENT_NODE |
| 9 | DOCUMENT_NODE |
| 10 | DOCUMENT_TYPE_NODE |
| 11 | DOCUMENT_FRAGMENT_NODE |
| 12 | NOTATION_NODE |
NodeList
The NodeList object represents an ordered collection of nodes.
The nodes in the NodeList can be accessed through their index number (starting from 0).
A NodeList object could be a Node's collection of child nodes.
| Property | Description | DOM |
|---|---|---|
| length | Returns the number of nodes in the collection | 1 |
| Method | Description | DOM |
|---|---|---|
| item() | Returns the node at the specified index in a node list | 1 |
NamedNodeMap
The NamedNodeMap object represents an unordered collection of nodes.
The nodes in the NamedNodeMap can be accessed through their name.
A NamedNodeMap object could be a Node's collection of attributes.
| Property | Description | DOM |
|---|---|---|
| length | Returns the number of nodes in the collection | 1 |
| Method | Description | DOM |
|---|---|---|
| getNamedItem() | Returns the specified node (by name) | 1 |
| getNamedItemNS() | Returns the specified node (by name and namespace) | 2 |
| item() | Returns the node at the specified index in the namedNodeMap | 1 |
| removeNamedItem() | Removes the specified node (by name) | 1 |
| removeNamedItemNS() | Removes the specified node (by name and namespace) | 2 |
| setNamedItem() | Sets the specified node (by name) | 1 |
| setNamedItemNS() | Sets the specified node (by name and namespace) | 2 |
Document
The Document object is the root of a document tree.
The Document object gives us access to the document's data.
Since element nodes, text nodes, attributes, comments, etc. cannot exist outside the document, the Document object contains methods to create these objects. All Node objects have a ownerDocument property which associates them with the Document where they were created.
| Property | Description | DOM |
|---|---|---|
| doctype | Returns the Document Type Declaration associated with the document | 1 |
| documentElement | Returns the Document Element of the document (the HTML element) | 1 |
| documentURI | Sets or returns the location of the document | 3 |
| domConfig | Returns the configuration used when normalizeDocument() is invoked | 3 |
| implementation | Returns the DOMImplementation object that handles this document | 1 |
| inputEncoding | Returns the encoding, character set, used for the document | 3 |
| strictErrorChecking | Sets or returns whether error-checking is enforced or not | 3 |
| xmlEncoding | Returns the XML encoding of the XML document | 3 |
| xmlStandalone | Sets or returns whether the XML document is standalone or not | 3 |
| xmlVersion | Sets or returns the XML version of the XML document | 3 |
| Method | Description | DOM |
|---|---|---|
| adoptNode(node) | Adopts a node from another document to this document. Returns the adopted node | 3 |
| createAttribute() | Creates an attribute node | 1 |
| createAttributeNS( URI , name ) | Creates an attribute with the specified name and namspaceURI | 2 |
| createCDATASection() | Creates a CDATA node with the specified text. For XML DOM only | 1 |
| createComment() | Creates a Comment node with the specified text | 1 |
| createDocumentFragment() | Creates an empty DocumentFragment node | 1 |
| createElement() | Creates an Element node | 1 |
| createElementNS() | Creates an element with the specified namespace | 2 |
| createEntityReference() | Creates an EntityReference node. For XML DOM only | 1 |
| createProcessingInstruction() | Creates an EntityReference node. For XML DOM only | 1 |
| createTextNode() | Creates a Text node | 1 |
| getElementById() | Returns the element that has the ID attribute with the specified value | 2 |
| getElementsByTagName() | Returns a NodeList containing all elements with the specified tagname | 1 |
| getElementsByTagNameNS() | Returns a NodeList containing all elements with the specified namespaceURI and tagname | 2 |
| importNode() | Imports a node from another document | 2 |
| normalizeDocument() | Removes empty Text nodes, and joins adjacent nodes | 3 |
| renameNode() | Renames the specified node | 3 |
Element
The Element object represents an element in the HTML document.
The Element object can have child nodes of type Element, Text, Comment, CDATASection, ProcessingInstruction, and EntityReference.
The Element object can have attributes, which have the node type Attr.
| Property | Description | DOM |
|---|---|---|
| schemaTypeInfo | Returns the type information of the element. | 3 |
| tagName | Returns the tag name of the element | 1 |
| Method | Description | DOM |
|---|---|---|
| getAttribute() | Returns the specified attribute value | 1 |
| getAttributeNS() | Returns the specified attribute value, with the specified namespace. For XML DOM only | 2 |
| getAttributeNode() | Returns the specified attribute node | 1 |
| getAttributeNodeNS() | Returns the specified attribute node, with the specified namespace. For XML DOM only | 3 |
| getElementsByTagName() | Returns a collection of all child elements with the specified tagname | 1 |
| getElementsByTagNameNS() | Returns a collection of all child elements with the specified tagname and namespace. For XML DOM only | 2 |
| hasAttribute() | Returns true if the element has the specified attribute, otherwise it returns false | 2 |
| hasAttributeNS() | Returns true if the element has the specified attribute, with the specified namespace, otherwise it returns false. For XML DOM only | 2 |
| removeAttribute() | Removes the specified attribute | 1 |
| removeAttributeNS() | Removes the attribute with the specified name and namespace. For XML DOM only | 2 |
| removeAttributeNode() | Removes the specified attribute node, and returns the removed node | 1 |
| setAttribute() | Sets or changes the specified attribute, to the specified value | 1 |
| setAttributeNS() | Sets or changes the specified attribute, with the specified namespace, to the specified value. For XML DOM only | 2 |
| setAttributeNode() | Sets or changes the specified attribute node | 1 |
| setAttributeNodeNS() | Sets or changes the specified attribute node | 2 |
| setIdAttribute() | 3 | |
| setIdAttributeNS() | 3 | |
| setIdAttributeNode() | 3 |
Attr
| Property | Description | DOM |
|---|---|---|
| isId | Returns true if the attribute is of type ID, otherwise it returns false | 3 |
| name | Returns the name of the attribute | 1 |
| ownerElement | Returns the element this attribute belongs to | 2 |
| schemaTypeInfo | Returns the type information of the attribute | 3 |
| specified | Returns true if the attribute has been specified, otherwise it returns false | 1 |
| value | Sets or returns the value of the attribute | 1 |
HTML DOM基本对象
Document
| Property | Description | W3C |
|---|---|---|
| anchors | Returns a collection of all the anchors in the document | Yes |
| applets | Returns a collection of all the applets in the document | Yes |
| body | Returns the body element of the document | Yes |
| cookie | Returns all name/value pairs of cookies in the document | Yes |
| documentMode | Returns the mode used by the browser to render the document | No |
| domain | Returns the domain name of the server that loaded the document | Yes |
| forms | Returns a collection of all the forms in the document | Yes |
| images | Returns a collection of all the images in the document | Yes |
| lastModified | Returns the date and time the document was last modified | No |
| links | Returns a collection of all the links in the document | Yes |
| readyState | Returns the (loading) status of the document | No |
| referrer | Returns the URL of the document that loaded the current document | Yes |
| title | Sets or returns the title of the document | Yes |
| URL | Returns the full URL of the document | Yes |
| Method | Description | W3C |
|---|---|---|
| close() | Closes the output stream previously opened with document.open() | Yes |
| getElementsByName() | Accesses all elements with a specified name | Yes |
| open() | Opens an output stream to collect the output from document.write() or document.writeln() | Yes |
| write() | Writes HTML expressions or JavaScript code to a document | Yes |
| writeln() | Same as write(), but adds a newline character after each statement | Yes |
Mouse Events
| Event | Attribute | Description | DOM |
|---|---|---|---|
| click | onclick | The event occurs when the user clicks on an element | 2 |
| dblclick | ondblclick | The event occurs when the user double-clicks on an element | 2 |
| mousedown | onmousedown | The event occurs when a user presses a mouse button over an element | 2 |
| mousemove | onmousemove | The event occurs when a user moves the mouse pointer over an element | 2 |
| mouseover | onmouseover | The event occurs when a user mouse over an element | 2 |
| mouseout | onmouseout | The event occurs when a user moves the mouse pointer out of an element | 2 |
| mouseup | onmouseup | The event occurs when a user releases a mouse button over an element | 2 |
Keyboard Events
| Event | Attribute | Description | DOM |
|---|---|---|---|
| keydown | onkeydown | The event occurs when the user is pressing a key or holding down a key | 2 |
| keypress | onkeypress | The event occurs when the user is pressing a key or holding down a key | 2 |
| keyup | onkeyup | The event occurs when a keyboard key is released | 2 |
Frame/Object Events
| Event | Attribute | Description | DOM |
|---|---|---|---|
| abort | onabort | The event occurs when an image is stopped from loading before completely loaded (for <object>) | 2 |
| error | onerror | The event occurs when an image does not load properly (for <object>, <body> and <frameset>) | |
| load | onload | The event occurs when a document, frameset, or <object> has been loaded | 2 |
| resize | onresize | The event occurs when a document view is resized | 2 |
| scroll | onscroll | The event occurs when a document view is scrolled | 2 |
| unload | onunload | The event occurs when a document is removed from a window or frame (for <body> and <frameset>) | 2 |
Form Events
| Event | Attribute | Description | DOM |
|---|---|---|---|
| blur | onblur | The event occurs when a form element loses focus | 2 |
| change | onchange | The event occurs when the content of a form element, the selection, or the checked state have changed (for <input>, <select>, and <textarea>) | 2 |
| focus | onfocus | The event occurs when an element gets focus (for <label>, <input>, <select>, textarea>, and <button>) | 2 |
| reset | onreset | The event occurs when a form is reset | 2 |
| select | onselect | The event occurs when a user selects some text (for <input> and <textarea>) | 2 |
| submit | onsubmit | The event occurs when a form is submitted | 2 |
Event Object
| Constant | Description | DOM |
|---|---|---|
| AT_TARGET | The current event is in the target phase, i.e. it is being evaluated at the event target (1) | 2 |
| BUBBLING_PHASE | The current event phase is the bubbling phase (2) | 2 |
| CAPTURING_PHASE | The current event phase is the capture phase (3) | 2 |
| Property | Description | DOM |
|---|---|---|
| bubbles | Returns whether or not an event is a bubbling event | 2 |
| cancelable | Returns whether or not an event can have its default action prevented | 2 |
| currentTarget | Returns the element whose event listeners triggered the event | 2 |
| eventPhase | Returns which phase of the event flow is currently being evaluated | 2 |
| target | Returns the element that triggered the event | 2 |
| timeStamp | Returns the time (in milliseconds relative to the epoch) at which the event was created | 2 |
| type | Returns the name of the event | 2 |
| Method | Description | DOM |
|---|---|---|
| initEvent() | Specifies the event type, whether or not the event can bubble, whether or not the event's default action can be prevented | 2 |
| preventDefault() | To cancel the event if it is cancelable, meaning that any default action normally taken by the implementation as a result of the event will not occur | 2 |
| stopPropagation() | To prevent further propagation of an event during event flow | 2 |
EventTarget Object
| Method | Description | DOM |
|---|---|---|
| addEventListener() | Allows the registration of event listeners on the event target (IE8 = attachEvent()) | 2 |
| dispatchEvent() | Allows to send the event to the subscribed event listeners (IE8 = fireEvent()) | 2 |
| removeEventListener() | Allows the removal of event listeners on the event target (IE8 = detachEvent()) | 2 |
EventListener Object
| Method | Description | DOM |
|---|---|---|
| handleEvent() | Called whenever an event occurs of the event type for which the EventListener interface was registered | 2 |
DocumentEvent Object
| Method | Description | DOM |
|---|---|---|
| createEvent() | 2 |
MouseEvent/KeyboardEvent Object
| Property | Description | DOM |
|---|---|---|
| altKey | Returns whether or not the "ALT" key was pressed when an event was triggered | 2 |
| button | Returns which mouse button was clicked when an event was triggered | 2 |
| clientX | Returns the horizontal coordinate of the mouse pointer, relative to the current window, when an event was triggered | 2 |
| clientY | Returns the vertical coordinate of the mouse pointer, relative to the current window, when an event was triggered | 2 |
| ctrlKey | Returns whether or not the "CTRL" key was pressed when an event was triggered | 2 |
| keyIdentifier | Returns the identifier of a key | 3 |
| keyLocation | Returns the location of the key on the advice | 3 |
| metaKey | Returns whether or not the "meta" key was pressed when an event was triggered | 2 |
| relatedTarget | Returns the element related to the element that triggered the event | 2 |
| screenX | Returns the horizontal coordinate of the mouse pointer, relative to the screen, when an event was triggered | 2 |
| screenY | Returns the vertical coordinate of the mouse pointer, relative to the screen, when an event was triggered | 2 |
| shiftKey | Returns whether or not the "SHIFT" key was pressed when an event was triggered | 2 |
| Method | Description | W3C |
|---|---|---|
| initMouseEvent() | Initializes the value of a MouseEvent object | 2 |
| initKeyboardEvent() | Initializes the value of a KeyboardEvent object | 3 |
HTMLElement
| Property | Description | W3C |
|---|---|---|
| accessKey | Sets or returns an accesskey for an element | Yes |
| className | Sets or returns the class attribute of an element | Yes |
| clientHeight | Returns the viewable height of the content on a page (not including borders, margins, or scrollbars) | No |
| clientWidth | Returns the viewable width of the content on a page (not including borders, margins, or scrollbars) | No |
| dir | Sets or returns the text direction of an element | Yes |
| id | Sets or returns the id of an element | Yes |
| innerHTML | Sets or returns the HTML contents (+text) of an element | Yes |
| lang | Sets or returns the language code for an element | Yes |
| offsetHeight | Returns the height of an element, including borders and padding if any, but not margins | No |
| offsetLeft | Returns the horizontal offset position of the current element relative to its offset container | No |
| offsetParent | Returns the offset container of an element | No |
| offsetTop | Returns the vertical offset position of the current element relative to its offset container | No |
| offsetWidth | Returns the width of an element, including borders and padding if any, but not margins | No |
| scrollHeight | Returns the entire height of an element (including areas hidden with scrollbars) | No |
| scrollLeft | Returns the distance between the actual left edge of an element and its left edge currently in view | No |
| scrollTop | Returns the distance between the actual top edge of an element and its top edge currently in view | No |
| scrollWidth | Returns the entire width of an element (including areas hidden with scrollbars) | No |
| style | Sets or returns the style attribute of an element | Yes |
| tabIndex | Sets or returns the tab order of an element | Yes |
| title | Sets or returns the title attribute of an element | Yes |
| Method | Description | W3C |
|---|---|---|
| toString() | Converts an element to a string | Yes |
其它HTML DOM对象
Anchor
The Anchor object represents an HTML hyperlink.
For each <a> tag in an HTML document, an Anchor object is created.
An anchor allows you to create a link to another document (with the href attribute), or to a different point in the same document (with the name attribute).
You can access an anchor by using getElementById(), or by searching through the anchors collection property of the Document object.
| Property | Description | W3C |
|---|---|---|
| charset | Sets or returns the value of the charset attribute of a link | Yes |
| href | Sets or returns the value of the href attribute of a link | Yes |
| hreflang | Sets or returns the value of the hreflang attribute of a link | Yes |
| name | Sets or returns the value of the name attribute of a link | Yes |
| rel | Sets or returns the value of the rel attribute of a link | Yes |
| rev | Sets or returns the value of the rev attribute of a link | Yes |
| target | Sets or returns the value of the target attribute of a link | Yes |
| type | Sets or returns the value of the type attribute of a link | Yes |
Area
The Area object represents an area inside an HTML image-map (an image-map is an image with clickable areas).
For each <area> tag in an HTML document, an Area object is created.
| Property | Description | W3C |
|---|---|---|
| alt | Sets or returns the value of the alt attribute of an area | Yes |
| coords | Sets or returns the value of the coords attribute of an area | Yes |
| hash | Sets or returns the anchor part of the href attribute value | Yes |
| host | Sets or returns the hostname:port part of the href attribute value | Yes |
| hostname | Sets or returns the hostname part of the href attribute value | Yes |
| href | Sets or returns the value of the href attribute of an area | Yes |
| noHref | Sets or returns the value of the nohref attribute of an area | Yes |
| pathname | Sets or returns the pathname part of the href attribute value | Yes |
| port | Sets or returns the port part of the href attribute value | Yes |
| protocol | Sets or returns the protocol part of the href attribute value | Yes |
| search | Sets or returns the querystring part of the href attribute value | Yes |
| shape | Sets or returns the value of the shape attribute of an area | Yes |
| target | Sets or returns the value of the target attribute of an area | Yes |
Base
The Base object represents an HTML base element.
The base element is used to specify a default address or a default target for all links on a page.
For each <base> tag in an HTML document, a Base object is created.
| Property | Description | W3C |
|---|---|---|
| href | Sets or returns the value of the href attribute in a base element | Yes |
| target | Sets or returns the value of the target attribute in a base element | Yes |
Body
The Body object represents the HTML body element.
The body element defines a document's body.
The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
| Property | Description | W3C |
|---|---|---|
| aLink | Sets or returns the value of the alink attribute of the body element | Yes |
| background | Sets or returns the value of the background attribute of the body element | Yes |
| bgColor | Sets or returns the value of the bgcolor attribute of the body element | Yes |
| link | Sets or returns the value of the link attribute of the body element | Yes |
| text | Sets or returns the value of the text attribute of the body element | Yes |
| vLink | Sets or returns the value of the vlink attribute of the body element | Yes |
| Event | Description | W3C |
|---|---|---|
| onload | Script to be run immediately after a page is loaded | Yes |
Button
The Button object represents a push button.
For each <button> tag， <input type="reset">， <input type="submit"> or <input type="button"> tag in an HTML document, a Button object is created.
Inside an HTML button element you can put content, like text or images. This is the difference between this element and buttons created with the input element.
| Property | Description | W3C |
|---|---|---|
| disabled | Sets or returns whether a button is disabled, or not | Yes |
| form | Returns a reference to the form that contains a button | Yes |
| name | Sets or returns the value of the name attribute of a button | Yes |
| type | Sets or returns the type of a button | Yes |
| value | Sets or returns the value of the value attribute of a button | Yes |
Form
The Form object represents an HTML form.
For each <form> tag in an HTML document, a Form object is created.
Forms are used to collect user input, and contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select menus, textarea, fieldset, legend, and label elements.
Forms are used to pass data to a server.
| Property | Description | W3C |
|---|---|---|
| acceptCharset | Sets or returns the value of the accept-charset attribute in a form | Yes |
| action | Sets or returns the value of the action attribute in a form | Yes |
| enctype | Sets or returns the value of the enctype attribute in a form | Yes |
| length | Returns the number of elements in a form | Yes |
| method | Sets or returns the value of the method attribute in a form | Yes |
| name | Sets or returns the value of the name attribute in a form | Yes |
| target | Sets or returns the value of the target attribute in a form | Yes |
Frame
The Frame object represents an HTML frame.
The <frame> tag defines one particular window (frame) within a frameset.
For each <frame> tag in an HTML document, a Frame object is created.
IFrame
The IFrame object represents an HTML inline frame.
The <iframe> tag defines an inline frame that contains another document.
For each <iframe> tag in an HTML document, an IFrame object is created.
| Property | Description | W3C |
|---|---|---|
| align | Sets or returns the value of the align attribute in an iframe | Yes |
| contentDocument | Returns the document object generated by a frame/iframe | Yes |
| contentWindow | Returns the window object generated by a frame/iframe | No |
| frameBorder | Sets or returns the value of the frameborder attribute in a frame/iframe | Yes |
| height | Sets or returns the value of the height attribute in an iframe | Yes |
| longDesc | Sets or returns the value of the longdesc attribute in a frame/iframe | Yes |
| marginHeight | Sets or returns the value of the marginheight attribute in a frame/iframe | Yes |
| marginWidth | Sets or returns the value of the marginwidth attribute in a frame/iframe | Yes |
| name | Sets or returns the value of the name attribute in a frame/iframe | Yes |
| noResize | Sets or returns the value of the noresize attribute in a frame | Yes |
| scrolling | Sets or returns the value of the scrolling attribute in a frame/iframe | Yes |
| src | Sets or returns the value of the src attribute in a frame/iframe | Yes |
| width | Sets or returns the value of the width attribute in an iframe | Yes |
| Event | Description | W3C |
|---|---|---|
| onload | Script to be run immediately after a frame/iframe is loaded | Yes |
Frameset
The Frameset object represents an HTML frameset.
The HTML frameset element holds two or more frame elements. Each frame element holds a separate document.
The HTML frameset element states only how many columns or rows there will be in the frameset.
| Property | Description | W3C |
|---|---|---|
| cols | Sets or returns the value of the cols attribute in a frameset | Yes |
| rows | Sets or returns the value of the rows attribute in a frameset | Yes |
| Event | Description | W3C |
|---|---|---|
| onload | Script to be run immediately after a page is loaded | Yes |
Image
The Image object represents an embedded image.
For each <img> tag in an HTML document, an Image object is created.
Notice that images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image.
| Property | Description | W3C |
|---|---|---|
| align | Sets or returns the value of the align attribute of an image | Yes |
| alt | Sets or returns the value of the alt attribute of an image | Yes |
| border | Sets or returns the value of the border attribute of an image | Yes |
| complete | Returns whether or not the browser is finished loading an image | No |
| height | Sets or returns the value of the height attribute of an image | Yes |
| hspace | Sets or returns the value of the hspace attribute of an image | Yes |
| longDesc | Sets or returns the value of the longdesc attribute of an image | Yes |
| lowsrc | Sets or returns a URL to a low-resolution version of an image | No |
| name | Sets or returns the name of an image | Yes |
| src | Sets or returns the value of the src attribute of an image | Yes |
| useMap | Sets or returns the value of the usemap attribute of an image | Yes |
| vspace | Sets or returns the value of the vspace attribute of an image | Yes |
| width | Sets or returns the value of the width attribute of an image | Yes |
| Event | The event occurs when... | W3C |
|---|---|---|
| onabort | Loading of an image is interrupted | Yes |
| onerror | An error occurs when loading an image | Yes |
| onload | An image is finished loading | Yes |
Checkbox
The Checkbox object represents a checkbox in an HTML form.
Checkboxes let a user select one or more options of a limited number of choices.
For each instance of an <input type="checkbox"> tag in an HTML form, a Checkbox object is created.
You can access a Checkbox object by searching through the elements[] array of a form, or by using document.getElementById().
| Property | Description | W3C |
|---|---|---|
| disabled | Sets or returns whether a checkbox is disabled, or not | Yes |
| checked | Sets or returns the checked state of a checkbox | Yes |
| defaultChecked | Returns the default value of the checked attribute | Yes |
| form | Returns a reference to the form that contains the checkbox | Yes |
| name | Sets or returns the value of the name attribute of a checkbox | Yes |
| type | Returns which type of form element the checkbox is | Yes |
| value | Sets or returns the value of the value attribute of a checkbox | Yes |
FileUpload
The FileUpload object represents a single-line text input control and a browse button, in an HTML form.
This object allow file uploading to a server. Clicking on the browse button opens the file dialog box that allows a user to select a file to upload.
For each <input type="file"> tag in an HTML form, a FileUpload object is created.
You can access a FileUpload object by searching through the elements[] array of the form, or by using document.getElementById().
| Property | Description | W3C |
|---|---|---|
| disabled | Sets or returns whether the fileUpload button is disabled, or not | Yes |
| accept | Sets or returns a comma-separated list of accepted content types | Yes |
| form | Returns a reference to the form that contains the FileUpload object | Yes |
| name | Sets or returns the value of the name attribute of the FileUpload object | Yes |
| type | Returns which type of form element the FileUpload object is | Yes |
| value | Returns the path or the name of the selected file | Yes |
Hidden
The Hidden object represents a hidden input field in an HTML form (this input field is invisible for the user).
With this element you can send hidden form data to a server.
For each <input type="hidden"> tag in an HTML form, a Hidden object is created.
You can access a hidden input field by searching through the elements[] array of the form, or by using document.getElementById().
| Property | Description | W3C |
|---|---|---|
| form | Returns a reference to the form that contains the hidden input field | Yes |
| name | Sets or returns the value of the name attribute of the hidden input field | Yes |
| type | Returns which type of form element a hidden input field is | Yes |
| value | Sets or returns the value of the value attribute of the hidden input field | Yes |
Password
The Password object represents a single-line password field in an HTML form.
The content of a password field will be masked (appear as blobs or asterisks) in a browser.
For each <input type="password"> tag in an HTML form, a Password object is created.
You can access a password field by searching through the elements[] array of the form, or by using document.getElementById().
| Property | Description | W3C |
|---|---|---|
| defaultValue | Sets or returns the default value of a password field | Yes |
| disabled | Sets or returns whether the password field is disabled, or not | Yes |
| form | Returns a reference to the form that contains the password field | Yes |
| maxLength | Sets or returns the maximum number of characters allowed in a password field | Yes |
| name | Sets or returns the value of the name attribute of a password field | Yes |
| readOnly | Sets or returns whether a password field is read-only, or not | Yes |
| size | Sets or returns the width of a password field (in number of characters) | Yes |
| type | Returns which type of form element a password field is | Yes |
| value | Sets or returns the value of the value attribute of the password field | Yes |
| Method | Description | W3C |
|---|---|---|
| select() | Selects the content of a password field | Yes |
Radio
The Radio object represents a radio button in an HTML form.
Radio buttons allow the user to select only ONE of a predefined set of options. You define groups with the name property (radio buttons with the same name belong to the same group).
For each <input type="radio"> tag in an HTML form, a Radio object is created.
You can access a radio object by searching through the elements[] array of the form, or by using document.getElementById().
| Property | Description | W3C |
|---|---|---|
| checked | Sets or returns the checked state of a radio button | Yes |
| defaultChecked | Returns the default value of the checked attribute | Yes |
| disabled | Sets or returns whether the radio button is disabled, or not | Yes |
| form | Returns a reference to the form that contains the radio button | Yes |
| name | Sets or returns the value of the name attribute of a radio button | Yes |
| type | Returns which type of form element the radio button is | Yes |
| value | Sets or returns the value of the value attribute of the radio button | Yes |
Text
The Text object represents a single-line text input field in an HTML form.
For each <input type="text"> tag in an HTML form, a Text object is created.
You can access a text input field by searching through the elements[] array of the form, or by using document.getElementById().
| Property | Description | W3C |
|---|---|---|
| defaultValue | Sets or returns the default value of a text field | Yes |
| disabled | Sets or returns whether the text field is disabled, or not | Yes |
| form | Returns a reference to the form that contains the text field | Yes |
| maxLength | Sets or returns the maximum number of characters allowed in a text field | Yes |
| name | Sets or returns the value of the name attribute of a text field | Yes |
| readOnly | Sets or returns whether a text field is read-only, or not | Yes |
| size | Sets or returns the width of a text field (in number of characters) | Yes |
| type | Returns which type of form element a text field is | Yes |
| value | Sets or returns the value of the value attribute of the text field | Yes |
| Method | Description | W3C |
|---|---|---|
| select() | Selects the content of a text field | Yes |
Link
The Link object represents an HTML link element.
The link element must be placed inside the head section of an HTML document, and it specifies a link to an external resource.
A common use of the <link> tag is to link to external style sheets.
| Property | Description | W3C |
|---|---|---|
| charset | Sets or returns the character encoding of a linked document | Yes |
| href | Sets or returns the URL of a linked document | Yes |
| hreflang | Sets or returns the language code of the linked document | Yes |
| media | Sets or returns the media type for the link element | Yes |
| rel | Sets or returns the relationship between the current document and the linked document | Yes |
| rev | Sets or returns the reverse relationship from the linked document to the current document | Yes |
| type | Sets or returns the content type of the linked document | Yes |
Meta
The Meta object represents an HTML meta element.
<meta> tags must be placed inside the head section of an HTML document, and they provide metadata about the HTML document.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. Metadata can be used by browsers (e.g. how to display content or reload pages), search engines (e.g. keywords), or other web services.
| Property | Description | W3C |
|---|---|---|
| content | Sets or returns the value of the content attribute of a meta element | Yes |
| httpEquiv | Sets or returns an HTTP header for the information in the content attribute | Yes |
| name | Sets or returns a name for the information in the content attribute | Yes |
| scheme | Sets or returns how the value of content should be interpreted | Yes |
Object
The Object object represents an HTML object element.
The <object> tag is used to include objects such as images, audio, videos, Java applets, ActiveX, PDF, and Flash into a webpage.
| Property | Description | W3C |
|---|---|---|
| align | Sets or returns the alignment of the object according to the surrounding text | Yes |
| archive | Sets or returns a string that can be used to implement your own archive functionality for the object | Yes |
| border | Sets or returns the border around the object | Yes |
| code | Sets or returns the URL of the file that contains the compiled Java class | Yes |
| codeBase | Sets or returns the URL of the component | Yes |
| codeType | Yes | |
| data | Yes | |
| declare | Yes | |
| form | Returns a reference to the object's parent form | Yes |
| height | Sets or returns the height of the object | Yes |
| hspace | Sets or returns the horizontal margin of the object | Yes |
| name | Sets or returns the name of the object | Yes |
| standby | Sets or returns a message when loading the object | Yes |
| type | Sets or returns the content type for data downloaded via the data attribute | Yes |
| useMap | Yes | |
| vspace | Sets or returns the vertical margin of the object | Yes |
| width | Sets or returns the width of the object | Yes |
Option
The Option object represents an option in a dropdown list in an HTML form.
For each <option> tag in an HTML form, an Option object is created.
You can access an Option object by searching through the elements[] array of a form, or by using document.getElementById().
| Property | Description | W3C |
|---|---|---|
| defaultSelected | Returns the default value of the selected attribute | Yes |
| disabled | Sets or returns whether an option is disabled, or not | Yes |
| form | Returns a reference to the form that contains the option | Yes |
| index | Sets or returns the index position of an option in a dropdown list | Yes |
| selected | Sets or returns the value of the selected attribute | Yes |
| text | Sets or returns the text of an option element | Yes |
| value | Sets or returns the value to be sent to the server | Yes |
Select
The Select object represents a dropdown list in an HTML form.
A dropdown list lets a user select one or more options of a limited number of choices.
For each <select> tag in an HTML form, a Select object is created.
You can access a Select object by searching through the elements[] array of a form, or by using document.getElementById().
| Collection | Description | W3C |
|---|---|---|
| options | Returns a collection of all the options in a dropdown list | Yes |
| Property | Description | W3C |
|---|---|---|
| disabled | Sets or returns whether the dropdown list is disabled, or not | Yes |
| form | Returns a reference to the form that contains the dropdown list | Yes |
| length | Returns the number of options in a dropdown list | Yes |
| multiple | Sets or returns whether more than one item can be selected from the dropdown list | Yes |
| name | Sets or returns the name of a dropdown list | Yes |
| selectedIndex | Sets or returns the index of the selected option in a dropdown list | Yes |
| size | Sets or returns the number of visible options in a dropdown list | Yes |
| type | Returns which type of form element a dropdown list is | Yes |
| Method | Description | W3C |
|---|---|---|
| add() | Adds an option to a dropdown list | Yes |
| remove() | Removes an option from a dropdown list | Yes |
Table
The Table object represents an HTML table.
For each <table> tag in an HTML document, a Table object is created.
| Collection | Description | W3C |
|---|---|---|
| cells | Returns a collection of all <td> or <th> elements in a table | No |
| rows | Returns a collection of all <tr> elements in a table | Yes |
| tBodies | Returns a collection of all <tbody> elements in a table | Yes |
| Property | Description | W3C |
|---|---|---|
| align | Deprecated. Sets or returns the alignment of a table according to surrounding text. Use style.textAlign instead | D |
| background | Deprecated. Sets or returns the background image of a table. Use style.backgroundinstead | D |
| bgColor | Deprecated. Sets or returns the background color of a table. Usestyle.backgroundColor instead | D |
| border | Deprecated. Sets or returns the width of the table border. Use style.border instead | D |
| caption | Returns the caption of a table | Yes |
| cellPadding | Sets or returns the amount of space between the cell border and cell content | Yes |
| cellSpacing | Sets or returns the amount of space between the cells in a table | Yes |
| frame | Sets or returns which outer-borders (of a table) that should be displayed | Yes |
| height | Deprecated. Sets or returns the height of a table. Use style.height instead | D |
| rules | Sets or returns which inner-borders (between the cells) that should be displayed in a table | Yes |
| summary | Sets or returns a description of the data in a table | Yes |
| tFoot | Returns a reference to the tfoot element of a table | Yes |
| tHead | Returns a reference to the thead element of a table | Yes |
| width | Deprecated. Sets or returns the width of the table. Use style.width instead | D |
| Method | Description | W3C |
|---|---|---|
| createCaption() | Creates an empty caption element and adds it to the table | Yes |
| createTFoot() | Creates an empty tfoot element and adds it to the table | Yes |
| createTHead() | Creates an empty thead element and adds it to the table | Yes |
| deleteCaption() | Removes the first caption element from the table | Yes |
| deleteRow() | Removes a row from the table | Yes |
| deleteTFoot() | Removes the tfoot element from the table | Yes |
| deleteTHead() | Removes the thead element from the table | Yes |
| insertRow() | Creates an empty tr element and adds it to the table | Yes |
td
The td object represents a data cell in an HTML table.
For each <td> tag in an HTML table, a td object is created.
th
The th object represents a table header cell in an HTML table.
For each <th> tag in an HTML table, a th object is created.
| Property | Description | W3C |
|---|---|---|
| abbr | Sets or returns an abbreviated version of the content in a data cell | Yes |
| align | Deprecated. Sets or returns the horizontal alignment of the content in a data cell. Use style.textAlign instead | D |
| axis | Sets or returns a comma-separated list of related data cells | Yes |
| background | Deprecated. Sets or returns the background image of a data cell. Usestyle.background instead | D |
| bgColor | Deprecated. Sets or returns the background color of a table. Usestyle.backgroundColor instead | D |
| cellIndex | Returns the position of a cell in the cells collection of a table row | Yes |
| ch | Sets or returns an alignment character for a data cell | Yes |
| chOff | Sets or returns the horizontal offset of the ch property | Yes |
| colSpan | Sets or returns the number of columns a cell should span | Yes |
| headers | Sets or returns a list of header cell ids for the current data cell | Yes |
| height | Deprecated. Sets or returns the height of a data cell. Use style.height instead | D |
| noWrap | Deprecated. Sets or returns whether the content in a cell can be wrapped. Usestyle.whiteSpace instead | D |
| rowSpan | Sets or returns the number of rows a cell should span | Yes |
| vAlign | Sets or returns the vertical alignment of the content within a cell | Yes |
| width | Deprecated. Sets or returns the width of a data cell. Use style.width instead | D |
tr
The tr object represents an HTML table row.
For each <tr> tag in an HTML document, a tr object is created.
| Collection | Description | W3C |
|---|---|---|
| cells | Returns a collection of all <td> or <th> elements in a table row | Yes |
| Property | Description | W3C |
|---|---|---|
| align | Deprecated. Sets or returns the horizontal alignment of the content within a table row. Use style.textAlign instead | D |
| bgColor | Deprecated. Sets or returns the background color of a table row. Usestyle.backgroundColor instead | D |
| ch | Sets or returns an alignment character for cells in a table row | Yes |
| chOff | Sets or returns the horizontal offset of the ch property | Yes |
| height | Deprecated. Sets or returns the height of a table row. Use style.height instead | D |
| rowIndex | Returns the position of a row in the rows collection of a table | Yes |
| sectionRowIndex | Returns the position of a row in the rows collection of a tbody, thead, or tfoot | Yes |
| vAlign | Sets or returns the vertical alignment of the content within a table row | Yes |
| Method | Description | W3C |
|---|---|---|
| deleteCell() | Deletes a cell from the current table row | Yes |
| insertCell() | Inserts a cell into the current table row | Yes |
Textarea
The Textarea object represents a text-area in an HTML form.
For each <textarea> tag in an HTML form, a Textarea object is created.
You can access a Textarea object by indexing the elements array (by number or name) of the form or by using getElementById().
| Property | Description | W3C |
|---|---|---|
| cols | Sets or returns the width of a text area | Yes |
| defaultValue | Sets or returns the default value of a text area | Yes |
| disabled | Sets or returns whether the text area is disabled, or not | Yes |
| form | Returns a reference to the form that contains the text area | Yes |
| name | Sets or returns the name of a text area | Yes |
| readOnly | Sets or returns whether the contents of a text area is read-only | Yes |
| rows | Sets or returns the height (in rows) of a text area | Yes |
| type | Returns the type of the form element the text area is | Yes |
| value | Sets or returns the contents of a text area | Yes |
| Method | Description | W3C |
|---|---|---|
| select() | Selects the entire contents of a text area | Yes |
Style对象
The Style object represents an individual style statement.
The Style object can be accessed from the document or from the elements to which that style is applied.
Background properties
| Property | Description | W3C |
|---|---|---|
| background | Sets or returns all the background properties in one declaration | Yes |
| backgroundAttachment | Sets or returns whether a background-image is fixed or scrolls with the page | Yes |
| backgroundColor | Sets or returns the background-color of an element | Yes |
| backgroundImage | Sets or returns the background-image for an element | Yes |
| backgroundPosition | Sets or returns the starting position of a background-image | Yes |
| backgroundRepeat | Sets or returns how to repeat (tile) a background-image | Yes |
Border/Outline properties
| Property | Description | W3C |
|---|---|---|
| border | Sets or returns border-width, border-style, and border-color in one declaration | Yes |
| borderBottom | Sets or returns all the borderBottom* properties in one declaration | Yes |
| borderBottomColor | Sets or returns the color of the bottom border | Yes |
| borderBottomStyle | Sets or returns the style of the bottom border | Yes |
| borderBottomWidth | Sets or returns the width of the bottom border | Yes |
| borderColor | Sets or returns the color of an element's border (can have up to four values) | Yes |
| borderLeft | Sets or returns all the borderLeft* properties in one declaration | Yes |
| borderLeftColor | Sets or returns the color of the left border | Yes |
| borderLeftStyle | Sets or returns the style of the left border | Yes |
| borderLeftWidth | Sets or returns the width of the left border | Yes |
| borderRight | Sets or returns all the borderRight* properties in one declaration | Yes |
| borderRightColor | Sets or returns the color of the right border | Yes |
| borderRightStyle | Sets or returns the style of the right border | Yes |
| borderRightWidth | Sets or returns the width of the right border | Yes |
| borderStyle | Sets or returns the style of an element's border (can have up to four values) | Yes |
| borderTop | Sets or returns all the borderTop* properties in one declaration | Yes |
| borderTopColor | Sets or returns the color of the top border | Yes |
| borderTopStyle | Sets or returns the style of the top border | Yes |
| borderTopWidth | Sets or returns the width of the top border | Yes |
| borderWidth | Sets or returns the width of an element's border (can have up to four values) | Yes |
| outline | Sets or returns all the outline properties in one declaration | Yes |
| outlineColor | Sets or returns the color of the outline around a element | Yes |
| outlineStyle | Sets or returns the style of the outline around an element | Yes |
| outlineWidth | Sets or returns the width of the outline around an element | Yes |
Generated Content properties
| Property | Description | W3C |
|---|---|---|
| content | Sets or returns the generated content before or after the element | Yes |
| counterIncrement | Sets or returns the list of counters and increment values | Yes |
| counterReset | Sets or returns the list of counters and their initial values | Yes |
List properties
| Property | Description | W3C |
|---|---|---|
| listStyle | Sets or returns list-style-image, list-style-position, and list-style-type in one declaration | Yes |
| listStyleImage | Sets or returns an image as the list-item marker | Yes |
| listStylePosition | Sets or returns the position of the list-item marker | Yes |
| listStyleType | Sets or returns the list-item marker type | Yes |
Margin/Padding properties
| Property | Description | W3C |
|---|---|---|
| margin | Sets or returns the margins of an element (can have up to four values) | Yes |
| marginBottom | Sets or returns the bottom margin of an element | Yes |
| marginLeft | Sets or returns the left margin of an element | Yes |
| marginRight | Sets or returns the right margin of an element | Yes |
| marginTop | Sets or returns the top margin of an element | Yes |
| padding | Sets or returns the padding of an element (can have up to four values) | Yes |
| paddingBottom | Sets or returns the bottom padding of an element | Yes |
| paddingLeft | Sets or returns the left padding of an element | Yes |
| paddingRight | Sets or returns the right padding of an element | Yes |
| paddingTop | Sets or returns the top padding of an element | Yes |
Misc properties
| Property | Description | W3C |
|---|---|---|
| cssText | Sets or returns the contents of a style declaration as a string | Yes |
Positioning/Layout properties
| Property | Description | W3C |
|---|---|---|
| bottom | Sets or returns the bottom position of a positioned element | Yes |
| clear | Sets or returns the position of the element relative to floating objects | Yes |
| clip | Sets or returns which part of a positioned element is visible | Yes |
| cssFloat | Sets or returns the horizontal alignment of an object | Yes |
| cursor | Sets or returns the type of cursor to display for the mouse pointer | Yes |
| display | Sets or returns an element's display type | Yes |
| height | Sets or returns the height of an element | Yes |
| left | Sets or returns the left position of a positioned element | Yes |
| maxHeight | Sets or returns the maximum height of an element | Yes |
| maxWidth | Sets or returns the maximum width of an element | Yes |
| minHeight | Sets or returns the minimum height of an element | Yes |
| minWidth | Sets or returns the minimum width of an element | Yes |
| overflow | Sets or returns what to do with content that renders outside the element box | Yes |
| position | Sets or returns the type of positioning method used for an element (static, relative, absolute or fixed) | Yes |
| right | Sets or returns the right position of a positioned element | Yes |
| top | Sets or returns the top position of a positioned element | Yes |
| verticalAlign | Sets or returns the vertical alignment of the content in an element | Yes |
| visibility | Sets or returns whether an element should be visible | Yes |
| width | Sets or returns the width of an element | Yes |
| zIndex | Sets or returns the stack order of a positioned element | Yes |
Printing properties
| Property | Description | W3C |
|---|---|---|
| orphans | Sets or returns the minimum number of lines for an element that must be visible at the bottom of a page | Yes |
| pageBreakAfter | Sets or returns the page-break behavior after an element | Yes |
| pageBreakBefore | Sets or returns the page-break behavior before an element | Yes |
| pageBreakInside | Sets or returns the page-break behavior inside an element | Yes |
| widows | Sets or returns the minimum number of lines for an element that must be visible at the top of a page | Yes |
Table properties
| Property | Description | W3C |
|---|---|---|
| borderCollapse | Sets or returns whether the table border should be collapsed into a single border, or not | Yes |
| borderSpacing | Sets or returns the space between cells in a table | Yes |
| captionSide | Sets or returns the position of the table caption | Yes |
| emptyCells | Sets or returns whether to show the border and background of empty cells, or not | Yes |
| tableLayout | Sets or returns the way to lay out table cells, rows, and columns | Yes |
Text properties
| Property | Description | W3C |
|---|---|---|
| color | Sets or returns the color of the text | Yes |
| direction | Sets or returns the text direction | Yes |
| font | Sets or returns font-style, font-variant, font-weight, font-size, line-height, and font-family in one declaration | Yes |
| fontFamily | Sets or returns the font face for text | Yes |
| fontSize | Sets or returns the font size of the text | Yes |
| fontSizeAdjust | Sets or returns the font aspect value | Yes |
| fontStyle | Sets or returns whether the style of the font is normal, italic or oblique | Yes |
| fontVariant | Sets or returns whether the font should be displayed in small capital letters | Yes |
| fontWeight | Sets or returns the boldness of the font | Yes |
| letterSpacing | Sets or returns the space between characters in a text | Yes |
| lineHeight | Sets or returns the distance between lines in a text | Yes |
| quotes | Sets or returns the type of quotation marks for embedded quotations | Yes |
| textAlign | Sets or returns the horizontal alignment of text | Yes |
| textDecoration | Sets or returns the decoration of a text | Yes |
| textIndent | Sets or returns the indentation of the first line of text | Yes |
| textShadow | Sets or returns the shadow effect of a text | Yes |
| textTransform | Sets or returns the case of a text | Yes |
| unicodeBidi | Sets or returns whether the text should be overridden to support multiple languages in the same document | Yes |
| whiteSpace | Sets or returns how to handle tabs, line breaks and whitespace in a text | Yes |
| wordSpacing | Sets or returns the spacing between words in a text | Yes |
扫一扫
2170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
