The Javascript:js DOM object of the front end is a

JS Dom Object One

first, what is the 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)

second, Dom tree

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

third, Dom node

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. 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 children
• 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:

3. Node Lookup

There are two ways of doing this:

Method One: Find the node directly (this is a lookup method)

     node Lookup (node is a label)        document.getElementById (' idname ');//Search by ID, get a Tag object        Document.getelementsbyclassname (' classname ');//Follow the class tag to find a label stored in an array        document.getelementsbytagname (' TagName ');//through the tag name to find, is also an array of        var a = document.getelementsbyname (' yuan ');//Search by the Name property, and get an array        Console.log (a);

1 ///==2.========================2     varEle = document.getElementById (' Div1 '));3Console.log (ele.length);//back to Undified4 5     varEle2 = document.getElementById (' Div3 '));6Console.log (ele2.length);//back to Undified7 8     varEle3 = Document.getelementsbyclassname (' Div2 '));9Console.log (ele3.length);//returns 1Ten  One     varEle4 = document.getElementsByTagName (' P '); AConsole.log (ele4.length);//returns 1 -  -     varEle5 = document.getelementsbyname (' Haiyan ')); theConsole.log (ele5.length);//returns 1 -  - //====3.============================= - ID and name not supported +    varDiv1=document.getelementbyid ("Div1"); -  + ////support; A    varele= div1.getelementsbytagname ("P"); at alert (ele.length); - ////Support -    varEle2=div1.getelementsbyclassname ("Div2"); - alert (ele2.length); - ////Not supported -    varEle3=div1.getelementbyid ("Div3"); in alert (ele3.length); - ////Not supported to    varEle4=div1.getelementsbyname ("Yuan"); +Alert (ele4.length)

Length Property

Length above: Returns the number of labels, one in the local,, and one in the global (document.~~~)

Way two: Navigate to find a node: Find another label (this is a navigation property) by the location of one of the tabs

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

1 //Way Two: navigate to find2 //<div id = ' Div1 ' >3 //<div class= "div2" name = ' Haiyan ' >lallala</div>4 //<div name= "Haiyan" >lkkaakkka</div>5 //<div id = ' Div3 ' >aaaaaaaaaaaaaa</div>6 //<p>hrllo</p>7 //</div>8 //Note: 1. If it is an array, remember Getelementsbyclassname (' Div2 ') [0]9 //2. Find the elements of the method elements added s to print is the arrayTen //1,================== One     varEle = Document.getelementsbyclassname (' div2 ') [0]; A     varele1=ele.parentelement; -Console.log (ELE1);//father looking for div2 tag. - //2.=============== the     varEle = document.getElementById (' Div1 ')); -     varEle1 =Ele.children; -Console.log (ELE1);//Find all the sub-tags under div1 - //3.=================== +     varEle = document.getElementById (' Div1 ')); -     varEle1 =Ele.firstelementchild; +Console.log (ELE1);//find the element of the first child tag under Div1 A //4.================== at     varEle = document.getElementById (' Div1 ')); -     varEle1 =Ele.lastelementchild; -Console.log (ELE1);//find the element of the last child tag under Div1 - //5.=============== -     varEle = document.getelementsbyname (' Haiyan ') [0]; -     varEle1 =ele.nextelementsibling; inConsole.log (ELE1);//Next sibling tag element - //6.=============== to     varEle = document.getelementsbyname (' Haiyan ') [0]; +     varEle1 =ele.previouselementsibling; -Console.log (Ele1)//previous sibling tag element the  *Test

View Code

4. Node operation

1. Create a Node

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

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

2. 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);

3. Delete a node

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

4. Replacing nodes

Somenode.replacechild (NewNode, a node);

5. Node Properties operation

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

InnerText: Whether you are assigning or taking values, only plain text is recognized

     InnerHtml: Both plain text and tags can be identified

    text attributes//  1.innerText: Whether you are an assignment or a value, you can only identify plain text        var a1 = document.getelementsbyclassname (' c2 ') [0];//        Console.log (A1);        Value Operation        Console.log (a1.innertext);//How are you/        console.log (a1.innerhtml);//Hello///        assignment Operation        a1.innertext= ' Egon ';        A1.innerhtml= ' <a href= ' >hello</a> ';//  2.innerHtml: Both plain text and tag        var B1 are recognized Document.getelementsbyclassname (' C2 ') [1];//        Console.log (B1);        Value Operation        Console.log (b1.innertext);        Console.log (b1.innerhtml);        Assignment operation        b1.innertext = ' lala ';        b1.innerhtml = ' <input type= ' text ' > ';

2. Properties (attribute) operation:

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

Refers to all attributes
GetAttribute can operate other, but cannot manipulate class

<body><div class= "C1" id= "D1" >DIV</div><script>    var ele = Document.getelementsbyclassname (' C1 ') [0];    Ele.id= ' D2 ';//Modify ID    console.log (ele);//Take attribute value://    mode one    console.log (ele.getattribute (' id '));//    mode two    Console.log (ele.id); Attribute assignment//    mode one    ele.setattribute (' id ', ' d3 ');    Console.log (ele);//    mode two    ele.id = ' D3 ';    Console.log (ele);

3.value gets the currently selected value values

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

4. About the class operation:

    class attribute =============     var ele = document.getelementsbyclassname (' c1 ') [0];     Console.log (Ele.classname); Print the name of the class          Ele.classList.add (' hide ');     Console.log (ele); <div class= "C1 Hide" id= "D1" >     ele.classList.remove (' hide ');//bar added remove removed     

5. Change the CSS style:

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

Iv. DOM Event (events)

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

2. Bind Event Mode

Way One

< How to!--bind events one--><div onclick= "foo (this)" >div</div><div class= "C1" >div2</div>< script>    function foo (self) {        console.log (self),//<div onclick= "foo (this)" style= "color:red;" >        self.style.color = ' red ';    }

Way Two

Mode two//    event binding Mode 2: Label object. On event = function () {}     var ele=document.getelementsbyclassname ("C1") [0];     Ele.onclick=function () {        Console.log (this),//This means: the current trigger time of the label object;        this.style.fontsize= "30px"    };

3. Event description

4. Event Propagation

Example Practice

1. Left menu

2. Search box

3. Modal dialog box

4. Form Cases

5.select Mobile

6. Level Two linkage

7. Marquee and TAB switch

The Javascript:js DOM object of the front end is a