See Ajax-three access methods for JavaScript to access dom

Source: Internet
Author: User
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...

Related Article

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

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