Javascript--dom operation

Source: Internet
Author: User

1. The DOM operation in jquery:

Categories of--dom operations:

--1) Dom Core:dom Core does not belong to JavaScript, any kind of DOM-enabled programming language can use it, its purpose is not limited to the processing of web pages, but also can be used in any kind of markup language written documents, such as XML documents;

--2) HTML DOM: When scripting HTML files using JavaScript and DOM, there are many attributes that are specifically html-dom;

--3) Css-dom: For CSS operations, in JavaScript, Css-dom is primarily used to get and set various properties of a style object.

2. Create and INSERT nodes:

--Create node: The Factory function using jquery $ (): $ (HTML); Creates a DOM object based on the incoming HTML tag string and wraps the DOM object back into a jquery object;

--Dynamically created new elements are not automatically added to the document and need to be inserted using a given method;

--When creating a single element, be aware of closing the label and using the standard XHTML format. For example, create a <P> element that can use $ ("<p/>") or $ ("<p></p>"), but not directly using $ ("<p>");

--Creating a text node simply writes the text content when the element node is created; Creating an attribute node is also created when the element node is created.

--method one of inserting nodes:

--Insert Node method two:

--These methods can not only insert the newly created DOM elements into the document, but also move the original DOM elements.

3. Delete the node:

--1) Remove (): Removes all matching elements from the DOM, the passed parameters are used to filter the elements according to the jquery expression, and when a node is removed with the Remove method, all descendant nodes (child nodes) that the node contains are deleted. The return value of the method is a reference to the node that has been deleted;

--2) Empty (): Empties the node-empties all descendant nodes (without attribute nodes) in the element.

4. Clone and replace child nodes:

--Copy Node Clone (): Clones the matching DOM element, the return value is the cloned copy, but at this point the copied new node does not have any behavior; Clone (true): Copies the elements and also copies the events in the element;

--Replace Node replacewith (): Replaces all matching elements with the specified HTML or DOM element;

--replaceall (): Reversed ReplaceWith () method;

--If an event has been bound on the element prior to the replacement, the original binding event will disappear with the original element;

5. Parcel node:

--wrap (): Wraps the specified node with other tokens, which is useful for inserting additional structured markup into the document without destroying the semantics of the original document;

--wtapall (): Wraps all matching elements with one element. The Wrap () method is to wrap all the elements individually;

--wrapinner (): Wraps the contents of each matching element (including the text node) with other structured tags.

6. Attribute Operation:

--attr (): Gets the property and set the property--when only one parameter is passed, that is, to get the specified property; When passing two parameters, the property value is set for the specified property;

Many of the methods in--jquery are a function implementation to get and set, such as attr (), HTML (), text (), Val (), Height (), Width (), CSS (), and so on;

--removeattr (): Deletes the specified attribute of the specified element;

7. JQuery Method:

--1) HTML (): reads and sets the HTML content in an element, which can be used in XHTML, but not in an XML document;

--2) Text (): reads and sets the text content of an element, which can be used for both XHTML and XML documents;

--3) Val (): Reads and sets the value property of an element. Note: Val () can get the value of all selected, but only the value of the first checked is obtained;

Javascript--dom operation

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.