JavaScript Object/Bottom

Object of JavaScript First, BOM ObjectBOM----Browser object Model 1. Window Object

Window objects are supported by all browsers.

Conceptually, an HTML document corresponds to a Window object.

Functionally speaking: Controls the browser window.

use: The Window object does not need to create objects, directly to use .

2. widow Object Methods

Alert ()   displays a warning box with a message and a confirmation button confirm () displays a dialog box with a message and a confirmation button and a Cancel button. Prompt () Displays a dialog box that prompts for user input open ()  opens a new browser window or looks up a named window. Close () Closes the browser window setinterval () invokes a function or evaluates an expression by the specified period (in milliseconds). Clearinterval () cancels the timeout set by SetInterval ().

3. Method Use 3.1

1,//alert//Displays a warning box with a message and a confirmation button Window.alert ("Hello");Confirm ()//There is a return value confirming that true cancellation is falsevar ret= Window.confirm ("Num"); Console.log (ret)//prompt () has a return value that shows a specific value for the dialog box that prompts the user to enter Var ret1=window.prompt (100);//Console.log (RET1)//the Open () function opens a new web pageOpen"http://www.baidu.com","New","Height=200,width=200,resizable=no")

View Code

3.2 setinterval , Clearinterval

The SetInterval () method keeps calling functions until Clearinterval () is called or the window is closed. The ID value returned by setinterval () can be used as a parameter to the Clearinterval () method.

Syntax:<br>     setinterval (code,millisec) where code is the function to be called or the code string to execute. Millisec the time interval between periodic execution or calling code, in milliseconds.

  function foo () {//            Console.log ("OK")//        }//         setinterval (foo,5000);  Execute Foo again 5 minutes

Example:

<!--<input type="text"Id="Timer"onfocus="Start ()">Triggering Events<!--<button onclick="Stop ()">end</button>-->Get cursor Events<script>var ID; function Start () {if(id==undefined)            {bar (); ID=setinterval (bar,1000)}}} function bar () {var s_time=new Date (); //get current time var times=s_time.tolocalestring (); //convert time format var ret=document.getelementbyid ("Timer"); //find objects based on attributes Ret.value=times; //the value is then assigned Console.log (RET)} function Stop () {clearinterval (ID); ID==undefined; }</script>

View Code

Two DOM Object 2.1 What is HTML DOM

HTML Document Object Model

HTML DOM defines a standard way to access and manipulate HTML documents

HTML DOM renders HTML document as a number structure with elements, attributes, and Text (node tree)

2.2 DOM Tree

The DOM tree is drawn to show the relationships between the objects in the document and to navigate the objects.

2.3 DOM node 2.3.1 Node Type

Each component in an HTML document is a node.

This is what the DOM provides:
The entire document is a document node
Each HTML tag is an element node
Text that is contained in an HTML element is a text node
Each HTML attribute is an attribute node

Among them, document and element node is the focus.

2.3.2-node Relationship

Nodes in the node tree have hierarchical relationships with each other.
Terms such as the parent, Son (Child), and fellow (sibling) are used to describe these relationships. The parent node has child nodes. Child nodes of a sibling are called siblings (brothers or sisters).

In the node tree, the top node is called root (root)

Each node has a parent node, except for the root (it has no parent node)

A node can have any number of sub-

A sibling is a node that has the same parent node

The following image shows part of the node tree and the relationship between nodes:

accessing HTML elements (nodes), accessing HTML elements is equivalent to accessing nodes, and we are able to access HTML elements in different ways.

2.3.3 Node Lookup

Direct lookup node (partial lookup)

document.getElementById ("Idname") document.getelementsbytagname ("TagName") document.getelementsbyname ("name") Document.getelementsbyclassname ("name")

<div> <p>hello</p><divclass="C1"> <divclass="C2">c2222</div> &LT;P&GT;C1---ppp</p><a href=""Id="ID1">c22222</a></div><script>//var ret =document.getelementsbyclassname ("C1"); Search for node tags by class//Console.log (ret[0])var ret1=document.getelementsbytagname ("P"); Search by tag name//Console.log (ret1[0]);Console.log (ret1[1]);var Ret3=document.getelementbyid ("ID1"); Search by ID//Console.log (RET3)</script>

Partial Lookup 2.3.4 Navigation Node Properties

" " parentelement           //parent node tag element children//                All child tags firstelementchild       //First child tag element lastelementchild        // Last child tag element nextelementtsibling     //Next sibling tag element previouselementsibling  //previous sibling tag element '

2.4 Node operation 2.4.1 Create a node:

createelement (sign): Creates an element of the specified name. For example:/  /var tag=document.activeelement("input");    Tag.setattribute ("type","text");

2.4.2 Adding nodes:

Appending a child node (as the last child node) to the parent node adds a child node to call append Somenode.appendchild (newnode) to place the added node in front of a node Somenode.insertbefore (NewNode, a node);

2.4.3 Replace node:

Somenode.replacechild (NewNode, a node);

<body>class="img"></div><button onclick="foo ()">add</button><button onclick="Bar ()">del</button><script>function Bar () {var con=document.getelementsbyclassname ("img") [0]; ELE_H1=con.getelementsbytagname ("H1") [0]; Con.removechild (ELE_H1); } function foo () {//Create a Label object var ele=document.createelement ("img"); //Create a node//Assigning a Value property to a labelEle.setattribute ("src","top.jpg"); //Original Ecological Ele.src="top.jpg"; //DHTML Dynamic recommendation Console.log (ele); //Parent Tag Add Child label var con=document.getelementsbyclassname ("img") [0]; //Con.appendchild (ele); }    </script></body>

View Code

2.5 Node Property operation

1. Get the value of the text node: InnerText InnerHTML (There are tabs in it to get it out)

2. Attribute operation

  Elementnode.setattribute (name,value)           Elementnode.getattribute (attribute name)        <-------------- >elementnode. Property name (DHTML)     elementnode.removeattribute ("attribute name");

To modify the label properties:

3. Value gets the currently selected value

1.input
2.select (SelectedIndex)
3.textarea

4, innerHTML Add HTML code to the node

This method is not the standard of the web, but the master browser supports

Tag.innerhtml= "<p> to show content <p>";

5, about the operation of class;

Elementnode.classname

ElementNode.classList.add

ElementNode.classList.remove

6. Change CSS style:

<p id= "P2" >Helloworld!</p>

document.getElementById ("P2"). style.color= "Blue";

. style.fontsize=48px

Iii. DOM Event (events) 3.1 Event Types

OnClick an        event handle that is invoked when a user taps an object. OnDblClick an     event handle that is called when the user double-clicks an object. The onfocus        element gets the focus.               Exercise: The input box onblur         element loses focus.               scenario: For form validation, when a user leaves an input box, the Representative has already entered it and we can verify it.       the contents of the onchange domain are changed.             scenario: Typically used for form elements that are triggered when the element content is changed. (three-level linkage)

3.2 Bind event Mode

Mode 1:<div id="Div"onclick="foo (this)"> Point Me </div><script>function foo (self) {//the formal parameter cannot be this; Console.log ("Point your uncle!");       Console.log (self); }</script>Mode 2:<p id="ABC"> Try a!</p><script>var ele=document.getelementbyid ("ABC"); Ele.onclick=function () {Console.log ("OK");    Console.log (this); //This is used directly};</script>

View Code

JavaScript Object/Bottom