DOM Document Object Model integrates JS and HTML CSS. Controls HTML document behavior.
Dom is to encapsulate all the contents of a page into objects.
Everything is object in the HTML document.
1. Classification of objects
Document * * *
Element * * *
Attribute
Text
Common
The above 5 classes of objects have some common features that abstract a parent class
Node
Self properties
NodeName
NodeValue
NodeType Document ==> 9 Element ==> 1
Navigation properties
ParentNode
2. How the element object is obtained on the page
Document
getElementById ();
getElementsByTagName ();
Getelementsbyclassname ();
Getelementsbyname ();
Element (the way in which element is obtained locally)
getElementsByTagName ();
Getelementsbyclassname ();
3. Events
Attach some event properties to the Element object. The type of the property is a function type. When are these function properties being run?
Look at the name of the property only.
Property name:
OnClick ==> triggered when clicked
OnDblClick ==> trigger when double-click
Trigger when onblur ==> loses focus
Trigger when onfocus ==> gets focus
onchange ==> for form elements, triggered when elements are modified
OnKeyDown ==> When the keyboard key is pressed
OnMouseMove ==> triggered when the mouse is moving
OnMouseDown ==> triggered when the mouse button is pressed
onmouseover ==> triggered when the mouse is pointing
onmouseout ==> triggered when the mouse is moved out
OnSubmit ==> triggered when a form is submitted
The onload ==> is only used for body tags. executes when the page loads.
Two ways to add events:
<body> <input type= "button" value= "point I" onclick= "alert (' AAA ');" id= "abc"/><script type= "text/ JavaScript ">// The first way to attach event properties to an element . Span style= "color: #008000;" >// // // alert (' AAA ') is the method body of the function. // prove the following var input = document.getElementById ("abc" </script></body> <body> <input type= "button" value= "Point Me" id= "abc"/><script type= "Text/javascript" >// the second way to attach an event property to an element var input = document.getElementById ("abc"function() { alert (' BBB ');} </script></body>3. Availability of Event Details:
We get the details of the event to find the detective to Know (event);
How do I get the event object?
The event object is created at the time of the event and passed to our events function. So we can use it directly.
Examples of Use:
<body> <input type= "text" id= "abc"/> <script type= "Text/javascript" >//onkeydown triggers a scenario when a keyboard key is pressed: the form submits when the user presses the ENTER key in the last input box.//Question 1: How do I get the key that the user presses? Ask the detective.//Question 2: How do I get a detective? The detective was created at the time of the event and passed to the event function when the event function was called. We just need to receive a few. varinput = document.getElementById ("abc")); Input.onkeydown=function(EVENT,ABC) {//how to get the details of the event after you get the detective (which key is pressed) //alert (event.keycode); //after observing the carriage return button the corresponding KeyCode is if(Event.keycode = = 13) {alert ("Form submitted!"); }}</script></body>
4.Event objects
Property:
KeyCode
button
ClientX (understanding) returns the horizontal coordinates of the mouse pointer when the event is triggered.
ClientY (understanding) returns the vertical coordinate of the mouse pointer when the event is triggered.
Method:
Preventdefault () ==> block the occurrence of the default associated event.
Stoppropergation ==> The downward spread of the organization events.
About the Page object additions and deletions the search
Related methods:
Document
Createlement
Element
Method
AppendChild
RemoveChild
ReplaceChild
CloneNode
SetAttribute (Key,value)
Property
InnerHTML Modify the label body. (Supports writing HTML code directly)
The concept of DHTML Dynamic HTML Dynamics Web page technology
is to integrate 4-door technology ==> DOM HTML CSS JavaScript
In layman's terms: DHTML is the enhancement of our previously learned DOM object.
What is enhancement? To the object, the enhancement is nothing more than adding a new property acquisition method.
5. Adding and deleting changes
<script type= "Text/javascript" >//dynamically add an a tag to the first Div. The a tag jumps to the home page. functionAddNode () {//1. Get the first Div vardiv = document.getElementById ("Div_1"); //2. Create a label createelement==> create a label <a></a> varEleA = Document.createelement ("a"); //3. Add a property to the a tag <a href= "http://www.itcast.cn" ></a>Elea.setattribute ("href", "http://www.itcast.cn"); //4. Add content to a tag <a href= "http://www.itcast.cn" > Wisdom </a>elea.innerhtml = "Preach wisdom"; //5. Add a tag to the DivDiv.appendchild (EleA); } //Delete Div area after clicking 2 functionDeletenode () {//1 getting the div area to delete vardiv = document.getElementById ("Div_2"); //2. Obtaining a Father varParent =Div.parentnode; //3 by Father FencingParent.removechild (DIV); } //after clicking Replace div area 3 for a beauty functionUpdatenode () {//1 getting the div area to replace 3 vardiv = document.getElementById ("Div_3"); //2 Creating an IMG Tag object varimg = document.createelement ("img"); //3 Add Property Img.setattribute ("src", "001.JPG"); //4. Get parent Node varParent =Div.parentnode; //5. Replaceparent.replacechild (img, div); } //Click to add div area 4 clone to the bottom of the page functionCopynode () {//1. Get the div you want to clone vardiv = document.getElementById ("Div_4"); //2. Clone parameter is true then clone all child elements when cloning. False only clones itself varDiv_copy = Div.clonenode (true); //3. Obtaining a Father varParent =Div.parentnode; //4. AddParent.appendchild (div_copy); } </script>
6. Add Tabular Data
Add Users:<br><br>Name:<input type= "text" name= "name" id= "name"/> Email: <input type= "text" name= "email" id= "email"/> Tel: <input type= "Text" name= "Tel" id= "tel"/><br><br> <button id= "AddUser" > Submit </butto n> <br><br> /** <a href= "javascript:void (FUN1 ())" >haha</a> function fun1 () {alert (' haha '); return "haha"; } */ /* document.getElementById ("AddUser"). Onclick=function () {//The Value property belongs to the category of DHTML. Dynamic HTML ==> Dynamics Web page ==> dom JS CSS HTML ==> DHTML is actually an enhancement to DOM objects. DHTML attaches a lot of convenient properties and methods to our DOM objects. Can simplify our development work. 1. Obtain the name of the form in the mailbox phone information var name = document.getElementById ("name"). Value; var email = document.getElementById ("email"). Value; var tel = document.getElementById ("tel"). Value; 2. assembly TR var tr = document.createelement ("tr"); 3. assemble td var Nametd = document.createelement ("TD"); nametd.innerhtml = name; var Emailtd = document.createelement ("TD"); emailtd.innerhtml = email; var Teltd = document.createelement ("TD"); teltd.innerhtml = Tel; 4. Add TD to TR Tr.appendchild (NAMETD); Tr.appendchild (EMAILTD); Tr.appendchilD (TELTD); 5. Add the TR to table document.getElementById ("Usertable"). appendchild (TR); }*/document.getElementById ("AddUser"). onclick=function(){ //the Value property belongs to the category of DHTML. Dynamic HTML ==> Dynamics Web page ==> dom JS CSS HTML ==> DHTML is actually an enhancement to DOM objects. //DHTML attaches a lot of convenient properties and methods to our DOM objects. Can simplify our development work. //1. Obtain the name of the form in the mailbox phone information varName = document.getElementById ("name"). Value; varemail = document.getElementById ("email")). Value; varTel = document.getElementById ("tel"). Value; //2 Assembly TR varTR = document.createelement ("tr"); Tr.innerhtml= "<td>" +name+ "</td><td>" +email+ "</td><td>" +tel+ "</td><td><a href= ' Javascript:void (0) ' onclick= ' del (This) ' >Delete</a></td> '; //3 Adding a TR to a tabledocument.getElementById ("Usertable"). appendchild (TR); } //Small Knowledge Point: Protocol name: protocol content //castration the function of a label itself. //<a href= "javascript:void (0)" onclick= "del (This)" >Delete</a> //Small Knowledge Point: This refers to the caller of the method, in the current example. This points to a tag functiondel (obj) {obj.parentNode.parentNode.parentNode.removeChild (A.parentnode.parentnode); } </script>JavaScripts Study Diary--dom
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
