Relationship Between DOM and javascript and jQuery

Source: Internet
Author: User
DOMDOM is the W3C standard. It defines the criteria for accessing HTML and XML documents. It provides a structured representation for the document, which can change the content and presentation of the document. DOM is an interface unrelated to browsers, platforms, and languages. Using this interface, you can easily access DOM as the W3C standard. It defines the criteria for accessing HTML and XML documents. It provides a structured representation for the document, which can change the content and presentation of the document. DOM is an interface unrelated to browsers, platforms, and languages. It allows you to easily access all standard components on the page. DOM is the core content of the browser, rather than the content specified in the JavaScript language specification. If you download a reference help document for the JavaScript language, it is even a well-known document. the write method cannot be found. Simple understanding: DOM is the document object model, which is a general term for element objects in the browser. DOM represents each element node on the page in the shape of a tree and provides a standard access method for us to operate on it. W3C DOM standards are divided into three different parts: core DOM-Standard Model for any structured documents xml dom-Standard Model for XML documents html dom-Relationship between standard models for HTML documents and JavaScript through JavaScript, you can refactor the entire HTML document. You can add, remove, change, or rearrange projects on the page. To change something on the page, JavaScript needs to access all elements in the HTML document. This entry, along with the methods and attributes for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM ). For example, Is a DOM object. javascript can add, delete, and perform other operations on it. jquery jquery is a so-called javascript framework, which is actually a collection of javacripss functions. 1. the jQuery object and DOM object are the objects we obtain using the traditional method (javascript). The jQuery object is the object obtained using the selector of the jQuery class library. The Code is as follows: [javascript] var domObj = document. getElementById ("id"); // DOM object var $ obj =$ ("# id"); // jQuery object; jQuery objects are generated after DOM objects are encapsulated by jQuery. They are unique to jQuery. If an object is a jQuery object, you can use the method example in jQuery: [javascript] $ ("# foo" ).html (); // obtain the html code in the element with the id of foo. html () is a unique method of jQuery. The above code is equivalent to [javascript] document. getElementById ("foo "). innerHTML; Note: No methods of DOM objects can be used in jQuery objects. For example: $ ("# id "). innerHTML and $ ("# id "). checked and other statements are incorrect. You can use $ ("# id" ).html () and $ ("# id "). instead of jQuery methods such as attr ("checked. Similarly, DOM objects cannot use the jQuery method. 2. Mutual conversion between jQuery objects and DOM objects. jquery objects and dom objects are different! For example, the jquery object cannot use the dom method, and the dom object cannot use the jquery method. What should I do if jquery does not encapsulate the method I want? In this case, we can convert a jquer object into a dom object. jquery provides two methods to convert a jquery object into a dom object, that is, [index] And get (index ). Some people may wonder how to use subscript. That's right. The jquery object is an array object. the following code shows how to convert a jquery object to a dom object. The code for using a dom object is as follows: [javascript] var $ cr = $ ("# cr "); // jquery object var cr = $ cr [0]; // dom object can also be written as var cr = $ cr. get (0); alert (cr. checked); // check whether the checkbox converts the selected dom object to a jquery object. For a dom object, you only need to wrap the dom object with $, you can get a jquery object by using the $ (dom object) method. The Code is as follows: [javascript] var cr = document. getElementById ("cr"); // dom object var $ cr = $ (cr); // convert to a jquery object using the above method, you can convert jqu to any other object. Ery object and dom object. ps: The jquery objects used at ordinary times are made by the $ () function, and the $ () function is a manufacturing factory of jquery objects. suggestion: If the obtained object is a jquery object, add $ to the variable to easily identify jquery objects, such as var $ variable = jquery objects; if a dom object is obtained, it is defined as follows: var variable = dom object Summary: jQuery and JavaScript are always known, but DOM understanding is not very clear. Why do we need to explain DOM in JavaScript? In addition, its understanding does not have any connection with other learning content. Today, by checking the information, we will know what it will do. In the BS phase, it is not available in our learning. DOM associates webpages with scripts and other programming languages, developers can control, manipulate, and create dynamic web page elements through the attributes, methods, and events of document objects. Simply put, it allows us to easily access each node on the page, set different attributes for each node, and implement different operations.

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.