See Ajax-three access methods for JavaScript to access dom

ArticleDirectory

• I am so cool recently
• A simple example:
•  
• For example (method 1)
• In addition, there is another method for accessing nodes through JavaScript.
•  
• In fact, there are still methods, that is, there are few such methods.

I am so cool recently

I recently worked as an intern in a small company and wrote some small things. Small companies, people say they want to write everything in small companies. True.

Front-end and back-end services, including HTML, CSS, JavaScript, XML, and Java, must be fully integrated. Fortunately, the requirements on the front-end are not high. Write something about sesame bean curd. However, it is estimated that this is more than enough for the entire project. In addition, I have never cared much about front-end things in my experience. I have always thought that this is something that has nothing to do with me. This is estimated to be a tragedy. So I found a book called Ajax practice. It cannot be said that it is useless. Compared with those who have never written Java, I still feel that writing some simple JavaScript helps the background faster than writing Java. In addition, Ajax is required for interaction. I hate to refresh the whole page, which affects the experience too much.

Ajax: Let's talk about what it is. A person or a football team...

Ajax is not a single technology, and we all know that, okay, I'm so embarrassed.

Technologies designed by Ajax: JavaScript, CSS, Dom, and XMLHttpRequest objects.

JavaScript and CSS, these two technologies have been written before, so I have some knowledge about them. I have always felt that Dom is hard to understand, mainly because I am lazy and have never looked at it myself. XMLHttpRequest is nothing more than something to deal with the server. Request.

Use JavaScript to improve user experience. Use CSS to define the appearance of an application. Use Dom to organize views. Load data asynchronously using XML technology. In short, Ajax has done these things.

For the moment, I only want to give an example of JavaScript operations on CSS and Dom. Let's talk about XML later. Step by step.

A simple example:

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  > 
 <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  > 
 <  Head  > 
 <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charset = gb2312"   /> 
 <  Title  > Hello Ajax </  Title > 
 <  Style  Type  = "Text/CSS"  >  
. News  {  
Color  :  # Ff0000  ;  
Font-family :  ""  ;  
Font-size  :  14px  ;  
Font-weight  :  Normal  ;  
 }  
. More  {  
Color  :  # 0000ff  ;  
Font-family  :  ""  ; 
Font-size  :  150px  ;  
Font-weight  :  Bold  ;  
Height  :  200px ;  
Width  :  200px  ;  
Line-height  :  200px  ;  
Text-align  : Center  ;  
Border  :  Solid Green 2px  ;  
Float  :  Left  ;  
Margin :  10px  ;  
  }  
  </  Style  > 
 <  Script  Type  = "Text/JavaScript"  > 
  //  JavaScript document  
  
  VaR  Data  =  "  Happy July April 1 holiday!  " ;

Window. onload  =  Function  (){
  VaR  Hello  =  Document. getelementbyid (  '  Hello  ' );
Hello. classname  =  '  News  '  ;
}

  Function  More (){
  VaR  Empty  = Document. getelementbyid (  '  Empty  '  );
  For  (  VaR  I  =  0  ; I <  Data. length; I  ++  ){
Addnode (empty, data [I]);
}
  VaR  Children  =  Empty. childnodes;
  For  (  VaR I  =  0  ; I  <  Children. length; I  ++  ){
Children [I]. classname  =  '  More '  ;
}
}

  Function  Addnode (El, text ){
  VaR  Childel  =  Document. createelement (  "  Div  " );
El. appendchild (childel );
  VaR  Txtnode  =  Document. createtextnode (text );
Childel. appendchild (txtnode );
}
  </  Script  > 
 </  Head  > 

 < Body  > 
 <  P  ID  = "Hello"  > News: blog Park acquired csdn </  P  > 
 <  A  Href  = "Javascript :;"  Onclick  = "More ()" > More </  A  > 
 <  Div  ID  = "Empty"  > </  Div  > 
 </  Body  > 
 </  Html > 

Javascript is fun.

Example: yu'e Edition

This is an example of using JavaScript to operate document and CSS.

Dom can publish web pages for the JavaScript engine. With Dom, you can program the operationCompositionFile structure. The DOM Representation on the Web page is a tree structure consisting of elements or points. A node can contain many subnodes. Javascript exposes the root node of the current web ye Mengde through the global variable document. This variable is the starting point of all Dom operations. The Dom uses the container attributes for indexing, instead of using numbers for indexing. The relationship between elements in the Dom can be viewed as an image of the HTML list. This relationship can be bidirectional. Modifying the Dom will change the HTML tag, which will be reflected in the reality of the page.

For example (method 1)

 
VaRNode = Document. form1.hello;
 

You can access

<PID= "Hello">News: blog Park acquired csdn</P>
 

This node.

 

In addition, there is another method for accessing nodes through JavaScript.

 
VaRNode = Document. getelementbyid ('hello ');
 

This method can also be used to access nodes.

<PID= "Hello">News: blog Park acquired csdn</P>
 

In fact, there are still methods, that is, there are few such methods.

 
VaRNode = Document. getelementbytagname ('A ');
 

This method searches the dom for all the <A> labels. This is useful in batch operations.

The title is a little big, but it is reading...