1 Document Object Model
1.1 concept
Document object model objects form describing the hierarchy of HTML pages and Web browser .
By accessing or setting the document object model of the object properties and call its methods , you can make the program follow a certain way to display Web pages , and the user's actions interact .
1.3 reference objects document object model
All underlying objects are the child objects of its parent object. The child object is actually the property of the parent object, the child object reference, and general property reference object is the same
as:
window.document.write("Hello");
Due to the default window object is the top object, so refer to its child object, you can not use window:
document.write("Hello");
When referring to lower-level objects, according to the inclusion relation object, layer by layer referenced objects. Such as:
document.form1.elementName
2 event-driven
2.1 event concept
1: a graphical interface environment, the user operates the mouse or button operation and the other system operations, such as loading the page called events.
2: The user operating system event or events caused by operating a series of implementation of the action program, known as event-driven .
3: The process in response to an event carried out, known as event handling .
Most of the time the browser program running in the interactive event waiting to happen, and when an event occurs, automatically invoked, the event handler
2.3 Handling events
The event name is in the tag (element), such as:
<INPUT type="button" value="问侯男士" name="hello1" onclick="alert('先生,您好!');">
If the statement is to be executed when a triggering event more, you can write the statement in a function call event attributes:
<INPUT type="button" value="问侯小姐" name="hello2" onclick="hellogirl()">
NOTE: Function hellogirl (), needs to define
3 Object Browser
3.1 window (Window) objects
Window (window) at the top of the object hierarchy of objects, and it also provides the methods and properties of the browser window.
3.1.1 window object properties and methods used
Opening and closing windows
window.open("URL","name","参数");
window.close();
例：window.open("http://www.baidu.com","_blank","height=200,width=300,top=20")
Jump pages
//由window的属性跳转
window.location="http://www.baidu.com";
//由window的方法跳转
window.navigate("http://www.baidu.com");
状态栏信息(status)
window.status="欢迎访问我的主页! ";
Built-in dialog box
alert(message):弹出警告对话框
confirm(message):确认对话框
prompt(msg,value):输入对话框
3.2document objects
You can access any HTML element HTML document that contains the object through the document, such as various tables, forms, images, hyperlinks and so on.
3.2.1 Attribute:
返回和设置title标记:window.document.title
返回网页的URL字符串:window.document.URL
3.2.2 Method
3.2.3 Supplementary
write方法(动态建立新页面,非IE支持不好)：
var win=window.open("URL","_blank"," width=300,height=100");
win.document.write("<html><head><title>新文件</title></head>");
win.document.write("<body>这是一份新文件</body></html>");
win.document.close();
4 form objects
4.1 properties, methods and events form objects
In the program, if you create a form (such as myform), can be accessed via this form name, such as: document.myform . After obtaining a form object, you can by using its properties, methods and events to implement various functions.
document.forms[索引].属性
document.forms[索引].方法（参数）
document.表单名称.属性
document.表单名称.方法（参数）
4.2 Properties and Methods
4.3FROM processing
Forms Authentication refers to determining the form data submitted by the user is legitimate , for example, whether it makes sense to fill in the ID number, age and education are consistent with other issues. Since the formal form before submission to the server , the need onSubmit the value true (if the event handler is not provided, the default value to true) , it is possible to verify form data designated by the event handler for onSubmit
4.4 form element objects
Forms can be many form elements, known as form element object. Form elements objects can be divided into:
4.5 text object
Call format
... The form document name text object name attribute
document Form Name text object name of the method (parameters)...
Property
readOnly: the object is read-only
size: the width of the object
maxLength: Allows the object receiving the maximum length
type: type attribute of the object
style: display style of the object value of the
method of
blur (): this object loses focus
focus (): get the focus of the object
select (): this object is set to select a state
4.7 button, submit button, reset button object
Call format
document. Form Name Button object name attribute
document. Form Name. Name button object method (parameters)
4.9 Radio button object
Call format
Document. Form name. Radio object name [index]. Property
Document. Form name. Radio object name [index]. Method (parameter)
4.10 check button objects
Call format
Document. Form name. A check object name [index]. Property
Document. Form name. A check object name [index]. Method (parameter)
4.11 Select the object
format
Text new Option ([Text [, value [, defaultSelected [, selected]]]]) properties
4.12 supplement
Method InnerText
format
element .innerText = "text"
instructions
can modify the contents of elements contained in the text segment div, span, label, p and the like, unformatted.
Example:
text1.innerText = "This is a free format text, the text within the tag overwriting
4.13 Supplement 2
Method InnerHTML
format
element .innerHTML = "formatted text"
instructions
can modify the contents of elements contained in the text segment div, span, label, p, etc., with HTML format.
Example:
text1.innerHTML = " This is a formatted text, overwriting the original text
