DOM operations in JQuery _jquery

DOM (Document Object model-model): A browser-and-platform, language-independent interface that makes it easy to access all the standard components in a page

Classification of DOM operations:

Dom Core:dom Core is not specifically JavaScript, and can be used by any programming language that supports DOM. Its use is not limited to processing Web pages, but can also be used to handle any kind of document written in markup language, for example: XML

HTML DOM: When scripting HTML files with JavaScript and DOM, there are many attributes that are html-dom-specific

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

Find nodes

Lookup node:

Find element node: done through the jQuery selector.

Lookup attribute node: After you find the element you want, you can call the attr () method of the JQuery object to get its various property values

Creating nodes

Create node: Factory function using JQuery $ (): $ (HTML); Creates a Dom object from the passed-in HTML tag string and wraps the DOM object back into a jquery object.

Attention:

Dynamically created new element nodes are not automatically added to the document, but need to be inserted into the document using other methods;

When creating a single element, pay attention to closing the label and using the standard XHTML format. For example, to create a <p> element, you can use $ ("<p/>") or $ ("<p></p>"), but you cannot use $ ("<p> ") or $ (" <P> ")

Creating a text node is simply writing the text content when you create the element node; Creating an attribute node is also created together when you create an element node

Insert Node (1)

Creating HTML elements dynamically is not practical, and you need to insert a newly created node into a document that becomes a child of a node in a document

Insert Node (2)

The above method not only inserts the newly created DOM elements into the document, but also moves the existing DOM elements.

Delete a node

Remove (): Deletes all matching elements from the DOM, and the incoming arguments are used to filter the elements based on the jquery expression. When a node is deleted with the Remove () method, all descendant nodes that the node contains are deleted at the same time. The return value of this method is a reference to a node that has been deleted.

Empty (): Clears the node-clears all descendant nodes in the element (not including the attribute node).

Replication node

Clone (): Clones a matching DOM element and returns a cloned copy of the value. However, the new node being replicated does not have any behavior at this time.

Clone (True): Copies an element and also copies the events in the element

Replacing nodes

ReplaceWith (): Replaces all matching elements with the specified HTML or DOM element

ReplaceAll (): Reversed ReplaceWith () method.

Note: If an event has been bound on the element before replacing it, the event that the original binding will disappear with the original element

Parcel Node

Wrap (): Wraps the specified node with a different tag. This method is useful for inserting additional structured markup in a document and does not break the semantics of the original document.

Wrapall (): Wraps all matching elements in one element. The wrap () method is to wrap all the elements individually.

Wrapinner (): Wraps the child contents of each matched element (including text nodes) with other structured tags.

Property action

attr (): Getting Properties and setting properties

When a parameter is passed for the method, the property is specified for the acquisition of an element

When two arguments are passed for this method, the value of the specified property is set for an element

Many of the methods in JQuery are a function implementation fetch and set. such as: attr (), HTML (), text (), Val (), Height (), Width (), CSS (), etc.

Removeattr (): Deletes the specified attribute of the specified element

Set up and get HTML, text, and values

Reads and sets the HTML content in an element: HTML (). This method can be used for XHTML, but not for XML documents

Reads and sets the text content in an element: text (). This method can be used both for XHTML and for XML documents.

Reads and sets the value in an element: Val ()---The method is similar to the Value property in JavaScript. For text boxes, Drop-down list boxes, radio boxes This method returns the value of the element (the multiple-selection box can only return the first value). If you are a multiple-selection drop-down list box, returns an array that contains all of the selected values