BOM Dom objects in the front-end base---javascript

1.BOM objects

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.

Windows object Methods

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 ();

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. 

2.DOM objects

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 an HTML document as a tree structure with elements, attributes, and Text (node tree)

2.2.DOM Tree

The DOM tree is designed to show the relationships between objects in a document and to navigate through 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

2.3.2. 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

2.3.3. Node Lookup

Direct Lookup

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

Navigating Find

'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 '

There's no way to find all the brother tags in js.

4. Node operation

Create a Node

CreateElement (sign): Creates an element of the specified name.

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

Adding nodes

Append a child node (as the last child node) Somenode.appendchild (NewNode) puts the added node to the front of a node Somenode.insertbefore (NewNode, a node);

Delete a node

RemoveChild (): Gets the element to be deleted, called by the parent element to delete

Replace node

Somenode.replacechild (NewNode, a node);

5. Node Properties operation

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

5.2. Attribute operation

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

5.3. Value gets the currently selected value
1.input
2.select (SelectedIndex)
3.textarea
5.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.5, about the operation of class:

ElementNode.classNameelementNode.classList.addelementNode.classList.remove

5.6. Change CSS style:

<p id= "P2" >hello World!</p>document.getelementbyid ("P2"). style.color= "Blue";                             . Style.fontsize=48px

6.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.

Two ways to bind events

Method 1:

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

Method 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.

<!    DOCTYPE html>/*window.onload=function () {var Ele=document.getelementbyid ("PPP");             Ele.onclick=function () {alert (123)};                  }; */          functionFun () {varEle=document.getelementbyid ("PPP"); Ele.onclick=function() {alert (123)            }; }    </script>View Code
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.
<!    DOCTYPE html>window.onload=function(){            //Block Form submission Method 1 ().            //onsubmit The named event function, which can accept the return value. The return false indicates the interception form submission. Other for release.             varEle=document.getelementbyid ("form"); Ele.onsubmit=function(event) {//alert ("Validation failure form will not be submitted!");            //return false;            //block form submission Mode 2 Event.preventdefault (); ==> notifies the browser not to perform the default action associated with the event. Alert ("Validation failure form will not be submitted!"));    Event.preventdefault ();    }        }; </script>View Code
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 ');             // prevents events from propagating to the outer div.         }</script>
View Code
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>
View Code
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>
View Code
7. The difference between onmouseout and OnMouseLeave events:
<!    DOCTYPE html>#container {width:300px;            } #title {cursor:pointer;        Background: #ccc;           } #list {display:none;       Background: #fff; } #list div{ line-height:50px; } #list. item1{background-Color:green; } #list. item2{background-color:rebeccapurple; } #list. item3{background-Color:lemonchiffon; }    </style>//1. The Mouseout event is triggered whenever the mouse pointer leaves the selected element or any child element. //2. The MouseLeave event is triggered only when the mouse pointer leaves the selected element.    varContainer=document.getelementbyid ("Container"); varTitle=document.getelementbyid ("title"); varList=document.getelementbyid ("list"); Title.onmouseover=function() {List.style.display= "Block";   }; Container.onmouseleave=function(){//instead, try Mouseout .List.style.display= "None"; };/*because the Mouseout event is bubbling, that is, the onmouseout event may be bound to the container's child element title and list, so the mouse moves out of each child element will also trigger our List.style.display = "None";*/  /*thinking: If:list.onmouseout=function () {list.style.display= "none";     };     Why is the entire list hidden when the first row is moved?   In fact, the same is true, the onmouseout event is bound to the list and its three child elements on item, so leaving any child element will also trigger list.style.display= "none"; */</script></body>View Code
BOM Dom objects in the front-end base---javascript