Home > Developer > Web Develop

JS Learning (iii) DOM

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

HTML DOM (Document Object model)

When a Web page is loaded, the browser creates a Document object model for the page. The HTML DOM model is constructed as a tree of objects.

HTML DOM Tree:
    • JavaScript can change all HTML elements in a page
    • JavaScript can change all HTML attributes in a page
    • JavaScript can change all CSS styles in a page
    • JavaScript can react to all the events in the page
Finding HTML Elements
    • The simplest way to find HTML elements is by ID
<p id= "Intro" >hello world!</p><script>    x=document.getelementbyid ("Intro");    the text in the document.write (' <p>id= ' intro paragraph is: ' + x.innerhtml + ' </p> '); </script>HelloWorld! The text in the paragraph with id= "Intro" is: Hello world!

    • Find HTML elements by tag name
<div id= "main" >    <p>the DOM is very useful.</p></div><script>    var x = document.getElementById ("main");     var y = x.getelementsbytagname ("P");    document.write (the first paragraph in the DIV with id "main" is: ' + y[0].innerhtml); Thefirst paragraph of text in the </script> "main" div is: The DOM is very useful.

    • HTML element found through class name, invalid in IE5, 6, 7, 8
JS HTML DOM changes HTML
    • Changing the HTML output stream
<script>    document.write (Date ()); </script>tue 13:45:37 gmt+0800 (CST) Note: Never use document.write () after the document is loaded. This overwrites the document.

    • Change HTML content
      • Syntax: document.getElementById (ID). innerhtml=new HTML
<p id= "P1" >hello world!</p><script>    document.getElementById ("P1"). Innerhtml= "New Text! " ; </script>new text!

    • Changing HTML properties
      • Syntax: document.getElementById (ID). attribute=new value
<script>    document.getElementById ("image"). Src= "/ I/shanghai_lupu_bridge.jpg "; </script>

JS changes the style of HTML elements
    • Syntax: document.getElementById (ID). style.property=new style
<p id= "P2" >hello world!</p><script>    document.getElementById ("P2"). style.color= " Blue "; </SCRIPT><H1 id= "MyH" >hello world!
　　
<p id= "P1" > This is a text. </p><input type= "button" value= "hidden text" onclick= "document.getElementById (' P1 '). style.visibility= ' Hidden '"/ ><input type= "button" value= "Display text" onclick= "document.getElementById (' P1 '). style.visibility= ' Visible '/>
　　
 
    JS HTML DOM Event
 
   

 
 
    
  
  
       
   
    • Examples of HTML events: 
    
         
     
      • When the user clicks the mouse
        •  
     
      • When the page is loaded
        •  
     
      • When the image is loaded
        •  
     
      • When the mouse moves over the element
        •  
     
      • When the input field is changed
        •  
     
      • When you submit an HTML form
        •  
     
      • When the user triggers the button
        •  
    
      •  
  
    
 
 
<H1 onclick= "this.innerhtml= ' Thank you! '" > Click the text function  changetext (id) {    id.innerhtml= "Thank you!" ;} </script>
　　
 
   

 
  
    
  
   
       
    
    • HTML Event Properties
      •  
   
    
 
  
<button onclick= "displaydate ()" > Click here </button><script>function  displaydate () {    document.getElementById ("Demo"). Innerhtml=Date ();} </script><p id= "Demo" ></p>
　　
 
   

 
  
    
  
   
       
    
    • Use HTML DOM to assign events
      •  
   
    
 
  
<button id= "MYBTN" > click here </button><script>document.getElementById ("mybtn"). onclick= function () {displaydate ()}; function displaydate () {    document.getElementById ("Demo"). Innerhtml=Date ();} </script><p id= "Demo" ></p>
　　
 
   

 
  
    
  
   
       
    
    • onload and onunload Events 
     
         
      
      • The onload and OnUnload events are triggered when the user enters or leaves the page.
        The OnLoad event can be used to detect the browser type and browser version of the visitor and to load the correct version of the Web page based on that information.
        The onload and OnUnload events can be used to process cookies.
        •  
     
      •  
   
    
 
  
<body onload= "checkcookies ()" ><script>function  checkcookies () {    if ( navigator.cookieenabled==true) {        alert ("cookie Enabled")    Else {        alert ("cookie not Enabled")    }}</script>
 
   

 
  
    
  
   
       
    
    • onchange Events
      •  
   
    
 
  
function  myFunction () {    var x=document.getelementbyid (" FName ");    X.value=x.value.touppercase ();} </script>    Please enter English characters:<input type= "text" id= "fname" onchange= " MyFunction () >    <p> The function that converts the input text to uppercase is triggered when you leave the input field. </p></body>
 
   

 
  
    
  
   
       
    
    • onmouseover and onmouseout Events 
     
         
      
      •  onmouseover mouse cursor over HTML element
        •  
      
      • onmouseout when the mouse moves out of the element
        •  
     
      •  
   
    
 
  
<div onmouseover= "MOver (This)" onmouseout= "Mout (This)" style= "background-color:green;width:120px;height:20px; Padding:40px;color: #ffffff; " > Move the mouse over </div><script>function  mOver (obj) {    obj.innerhtml= "Thank You"  }function  mout (obj) {    obj.innerhtml= "Move mouse over"}</script>
 
   

 
  
    
  
   
       
    
    •    onmousedown ,  onmouseup  , and   onclick   Event   
     
         
      
      • !--? XML version= "1.0" encoding= "UTF-8" standalone= "no"?--> Onmo Usedown, onmouseup, and onclick form all parts of the mouse click event. 
        •  
      
      •  When you click the mouse button, the onmousedown event is triggered 
        •  
      
      •  when you release the mouse button, the onmouseup event is triggered 
        •  
      
      •  Finally, the onclick event is triggered when the mouse click is complete. 
        •  
     
      •  
   
    
 
  
<div onmousedown= "MDown (This)" onmouseup= "mUp (This)" style= "Background-color:green;color: #ffffff; width:90px; height:20px;padding:40px;font-size:12px; " > Click here </div><script>function  mDown (obj) {    Obj.style.backgroundColor = "#1ec5e5";    obj.innerhtml= "Release mouse button"}function  mUp (obj) {    Obj.style.backgroundColor= "Green" ";    obj.innerhtml= "Please press mouse button"}</script>
 
   

 
  
    
  
   
       
    
    • Onfocus Get Focus
      •  
   
    
 
  
 

 
  
    
  
   
       
    
    • Which mouse was clicked
      •  
   
    
 
  
functionWhichbutton (event) {varBtnnum =Event.button; if(Btnnum = = 2) {alert ("You clicked the right mouse button!" ")    }    Else if(Btnnum = = 0) {alert ("You clicked the left mouse button!" ")    }    Else if(Btnnum = = 1) {alert ("You clicked the middle mouse button!" "); }    Else{alert ("You clicked the" + btnnum+ "key and I'm not sure of its name. "); }}</script>
 
   

 
   
    
  
    
       
     
    • Coordinates of the cursor
      •  
    
    
 
   
function  show_coords (event) {    x=  Event.clientx    y=event.clienty    alert ("x coordinate:" + x + ", Y coordinate:" + y)}</script>
 
   

 
    
    
  
     
       
      
    • Position relative to the screen cursor
      •  
     
    
 
    
<script type= "Text/javascript" >function  coordinates (event) {    x=Event.screenx    Y=event.screeny    alert ("x=" + X + "y=" + Y)}</script>
 
   

 
     
    
  
      
       
       
    • The Unicode of the pressed keys
      •  
      
    
 
     
function  Whichbutton (event) {    alert ( Event.keycode)}</script>
 
    JS HTML DOM Element (node)
 
   

 
      
    
  
       
       
        
    • To add an element to the HTML DOM, you must first create the element and then append the element to an already existing element
      •  
       
    
 
      
<div id= "Div1" ><p id= "P1" > This is a paragraph. </p></div><script>    var para=document.createelement ("P");     var node=document.createtextnode (" This is the new paragraph. ");  To add text to the P element, you must first create the text node    para.appendchild (node);    var Element=document.getelementbyid ("Div1");    Element.appendchild (para);</script>
 
   DOM's curd
 
   create a new HTML element
<p id= "word" > I am P tag </p><script>//1. Add tags directly to the body (can be any type)document.write (' HelloWorld '); document.write ('  '); //2. Create a new label and insert it into any of the tags in the body appendchild    vardiv = document.createelement (' div '); Div.style.background= ' Red '; Div.style.width= ' 500px '; Div.style.height= ' 300px '; //add to Parent tagDocument.body.appendChild (DIV); //insert a picture into the Div    varimg = document.createelement (' img ')); IMG.SRC= ' Image/img_02.jpg ';    Div.appendchild (IMG); //3. Get the P tag    varIMG1 = document.createelement (' img '); IMG1.SRC= ' Image/img_03.jpg '; varp = document.getElementById (' word '); P.appendchild (IMG1);</script>
　　
 
   Delete HTML elements
 

 
      
    
  
       
       
        
    • There are 3 ways to delete: 
         
         
          
      • 1. Delete directly with body, but only for direct sub-label 
           
           
            
        • Document.body.removeChild (P);
          •  
           
        •  
          
      • 2. Get the parent tag of the current tag, and then delete 
           
           
            
        • P.parentnode.removechild (P);
          •  
           
        •  
          
      • 3. Directly take the current tag and call the Remove () method. 
           
           
            
        • P.remove ();
          •  
           
        •  
         
      •  
       
    
 
      
 
   DOM Tutorial: http://www.w3school.com.cn/htmldom/index.asp
JS Learning (iii) DOM

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More