JavaScript's Bom,dom Object

BOM Object

Window object

Window objects are supported by all browsers.
Conceptually speaking. 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.

Window Object Method

Alert ()            displays a warning box with a message and a confirmation button. Confirm ()          displays a dialog box with a message along with a confirmation button and a Cancel button. Prompt ()           displays a dialog box to prompt the user for input. Open ()             opens a new browser window or looks for 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 (). SetTimeout ()       invokes a function or evaluates an expression after the specified number of milliseconds. Cleartimeout ()     cancels the timeout set by the SetTimeout () method. ScrollTo ()         scrolls the content to the specified coordinates.

Method uses

1. Alert Confirm prompt and open function

//----------Alert confirm prompt----------------------------    //alert (' AAA ');            /*var result = confirm ("Are you sure you want to delete it?"); alert (result); */    //prompt Parameter 1: prompt information. Parameter 2: The default value for the input box. The return value is what the user entered.    //var result = prompt ("Please enter a number!", "haha");    //alert (result);Method explained://Open method opens and a new window and enters the specified URL. Parameter 1: URL.        //Call Mode 1            //Open ("http://www.baidu.com");        //parameter 1 Nothing is to open a new window. Parameter 2. Fill in the name of the new window (you can usually not fill in). Parameter 3: Parameters for the newly opened window.Open (', ', ', ' width=200,resizable=no,height=100 ');//opens a new window with a width of 200 and a height of 100        //the Close method closes the current document window.            //close ();

View Code

Example:

varnum = Math.Round (math.random () *100); functionAcceptinput () {//2. Allow user input (prompt) and accept user input results    varUsernum = Prompt ("Please enter a number between 0~100!", "0"); //3. Compare user-entered values to random numbers            if(IsNaN (+usernum)) {                //Invalid user input (repeat 2,3 step)Alert ("Please enter a valid number!"));            Acceptinput (); }            Else if(Usernum >num) {            //Big ==> Prompt user big, let user re-enter (repeat 2,3 step)Alert ("You've entered the big!"));            Acceptinput (); }Else if(Usernum <num) {            //small ==> Prompt user small, let the user re-enter (repeat 2,3 steps)Alert ("You have entered a small!"));            Acceptinput (); }Else{            //the ==> prompts the user to answer correctly and asks the user if they want to continue the game (confirm).                varresult = Confirm ("Congratulations!"). Do you want to continue the game?); if(Result) {//is ==> repeat 123 steps.num = Math.Round (math.random () *100);                Acceptinput (); }Else{                    //no ==> close the window (Close method).Close (); }            }    }

View Code

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.

语法：<br>     setInterval(code,millisec)

其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。

Example:

<input id= "ID1" type= "text" onclick= "Begin ()" ><button onclick= "End ()" > Stop </button><script>functionShowTime () {varNowd2=NewDate (). toLocaleString (); varTemp=document.getelementbyid ("ID1"); Temp.value=nowd2; }    varID; functionbegin () {if(id==undefined)             {showTime (); ID=setinterval (showtime,1000); }    }    functionEnd () {clearinterval (ID); ID=undefined; }</script>

View CodeDOM ObjectWhat is HTML DOM

• HTML Document Object Model
• HTML DOM defines a standard way to access and manipulate HTML documents
• HTML DOM renders an HTML document as a tree structure with elements, attributes, and Text (node tree)

DOM Tree

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

DOM nodenode 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.

Node Relationships

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.

Node Lookup

Directly find nodes

1234	document.getElementById(“idname”)document.getElementsByTagName(“tagname”)document.getElementsByName(“name”)document.getElementsByClassName(“name”)

Partial Lookup

Note: Design to look for elements, note <script> label location!

Navigation Node Properties

‘‘‘
Parentelement           //Parent node Tag element
Children                //all sub-tags
Firstelementchild       //First child tag element
Lastelementchild        //Last child tag element
Nextelementtsibling     //Next sibling tag element
Previouselementsibling  //previous sibling tag element ' '

Note that there is no way to find all the brother tags in JS!

node Operations

To create a node:

1	createElement(标签名) ：创建一个指定名称的元素。

Example: Var tag=document.createelement ("Input")
Tag.setattribute (' type ', ' text ');

To add a node:

12345

追加一个子节点（作为最后的子节点）somenode.appendChild(newnode)把增加的节点放到某个节点的前边somenode.insertBefore(newnode,某个节点);

To delete a node:

1	removeChild()：获得要删除的元素，通过父元素调用删除

Replace node:

1	somenode.replaceChild(newnode, 某个节点);

Node Property operations:

1. Get the value of the text node: InnerText InnerHTML

2. Attribute operation

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

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 a standard, but the mainstream browser supports
tag.innerhtml = "<p> to display content </p>";

5, about the operation of class:

123	elementNode.classNameelementNode.classList.addelementNode.classList.remove

6. Change CSS style:

123	<p id="p2">Hello world!</p>document.getElementById("p2").style.color="blue";                             .style.fontSize=48px

DOM Event (events)Event Type

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, which are triggered when the element content is changed. (three-level linkage) onkeydown      a keyboard key is pressed.          Application Scenario: When the user presses the ENTER key in the last input box, the form submits. onkeypress     a keyboard key is pressed and released. onkeyup        a keyboard key is released.
OnLoad         a page or an image to finish loading.
onmousedown    the mouse button is pressed. OnMouseMove    Mouse is moved. onmouseout     the mouse to move away from an element. onmouseover    mouse moves over an element. OnMouseLeave   mouse away from element onselect       text is selected. OnSubmit       confirm button is clicked.

Bind event Mode

Mode 1:

<div id= "div" onclick= "foo (this)" > Dot me </div><script>    function foo (self) {           //parameter cannot be this;        Console.log ("Point your uncle!");        Console.log (self);       } </script>

Mode 2:

<p id= "abc" > Try!</p><script>    var ele=document.getelementbyid ("abc");    Ele.onclick=function() {        Console.log ("OK");        Console.log (this);    // This is used directly     }; </script>

Event Description

1.onload:

The OnLoad property is only added to the BODY element in development. The triggering of this attribute indicates that the page content is loaded. Application scenario: When something we want to execute immediately after the page is loaded, you can use the event property.

2, OnSubmit:

Triggered when the form is submitted. This property can also be used only for form elements. Scenario: Verify that the user input is correct before the form is submitted. If validation fails. In this method we should block the submission of the form.

3. Event Propagation: 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

<div id= "abc_1" style= "border:1px solid red;width:300px;height:300px;" >        <div id= "abc_2" style= "border:1px solid red;width:200px;height:200px;" >        </div></div><script type= "Text/javascript" >        document.getElementById ("Abc_1"). Onclick=function () {            alert (' 111 ');        };        document.getElementById ("abc_2"). Onclick=function (event) {            alert (' 222 ');            Event.stoppropagation (); Prevents events from propagating to the outer div.        } </script>

<div id= "abc_1" style= "border:1px solid red;width:300px;height:300px;" >        <div id= "abc_2" style= "border:1px solid red;width:200px;height:200px;" >        </div></div><script type= "Text/javascript" >        document.getElementById ("Abc_1"). Onclick=function () {            alert (' 111 ');        };        document.getElementById ("abc_2"). Onclick=function (event) {            alert (' 222 ');            Event.stoppropagation (); Prevents events from propagating to the outer div.        } </script>

4, Onselect:

<input type= "text" ><script>    var ele=document.getelementsbytagname ("input") [0];    Ele.onselect=function () {          alert (123);    } </script>

5, OnChange:

<select name= "" id= "" >    <option value= "" >111</option>    <option value= "" >222</ option>    <option value= "" >333</option></select><script>    var ele= document.getElementsByTagName ("select") [0];    Ele.onchange=function () {          alert (123);    } </script>

<select name= "" id= "" >    <option value= "" >111</option>    <option value= "" >222</ option>    <option value= "" >333</option></select><script>    var ele= document.getElementsByTagName ("select") [0];    Ele.onchange=function () {          alert (123);    } </script>

6, OnKeyDown:

Event object: The Event object represents the state of the incident, such as the element in which the event occurred, the state of the keyboard key, the position of the mouse, and the state of the mouse button.
Events are often used in conjunction with functions, and functions are not executed until the event occurs! The event object is created as soon as it occurs, and is passed to the event function when the event function is called. We just need to receive it. For example, onkeydown, we want to know which key is pressed and need to ask the property of the event object, here is the keycode.

<input type= "text" id= "T1"/><script type= "Text/javascript" >    var ele=document.getelementbyid ("T1");    Ele.onkeydown=function (e) {        e=e| | window.event;        var Keynum=e.keycode;        var keychar=string.fromcharcode (keynum);        Alert (keynum+ '-----> ' +keychar);    }; </script>

<input type= "text" id= "T1"/><script type= "Text/javascript" >    var ele=document.getelementbyid ("T1");    Ele.onkeydown=function (e) {        e=e| | window.event;        var Keynum=e.keycode;        var keychar=string.fromcharcode (keynum);        Alert (keynum+ '-----> ' +keychar);    }; </script>

7. The difference between onmouseout and OnMouseLeave events:

The onmouseout event is the event that is triggered when the mouse is removed from its child tag;

The OnMouseLeave event is the event that is triggered when the mouse only removes the tag that added the event.

JavaScript's Bom,dom Object