Details on DOM operations in jQuery _ jquery

This article mainly introduces DOM operations in jQuery. For more information, see DOM operations in jQuery

DOM (Document Object Model-Document Object Model): an interface unrelated to browsers, platforms, and languages. you can use this interface to easily access all standard components on the page.

Classification of DOM operations:

DOM Core: DOM Core is not specialized in JavaScript. it can be used by any programming language that supports DOM. it is not only used to process web pages. It can also be used to process any document written in markup language, such as XML.

Html dom: When scripting HTML files with JavaScript and DOM, there are many HTML-DOM-specific properties

CSS-DOM: for CSS operations, in JavaScript, CSS-DOM is primarily used to get and set various attributes of a style object

SEARCH nodes

SEARCH nodes:

Search for element nodes: using the jQuery selector.

Search for attribute nodes: After finding the required elements, you can call the attr () method of the jQuery object to obtain various attribute values.

Create a node

Create a node: Use the jQuery factory function $ (): $ (html); to create a DOM object based on the input html tag string, and wrap the DOM object into a jQuery object to return.

Note:

The newly created element node is not automatically added to the document, but needs to be inserted to the document in other ways;

When creating a single element, you must close the tag and use the standard XHTML format. for example, create

Element, you can use $ ("

") Or $ ("

"), But cannot use $ ("

") Or $ ("

")

When creating a text node, you can directly write the text content when creating an element node. when creating an attribute node, you can also create an element node together.

Insert node (1)

Dynamic HTML element creation is not actually useful. you also need to insert the newly created node into the document to become a subnode of a node in the document.

Insert node (2)

The preceding method not only inserts a newly created DOM element into the document, but also moves the original DOM element.

Delete a node

Remove (): removes all matching elements from the DOM. the input parameters are used to filter elements based on jQuery expressions. when a node is deleted using the remove () method, all child nodes contained in the node will be deleted at the same time. the return value of this method is a reference pointing to the deleted node.

Empty (): clear nodes-clear all descendant nodes in the element (excluding attribute nodes ).

Copy a node

Clone (): clone the matched DOM element. the returned value is the cloned copy, but the copied new node does not have any behavior.

Clone (true): copying an element and copying an event in the element

Replace node

ReplaceWith (): replaces all matched elements with specified HTML or DOM elements.

ReplaceAll (): The reverse replaceWith () method.

Note: If an event has been bound to an element before replacement, the previously bound event will disappear with the original element after replacement.

Package node

Wrap (): wrap the specified node with other tags. this method is useful for inserting additional structured tags in the document without damaging the semantics of the original document.

WrapAll (): wrap all matching elements with one element. The wrap () method is to wrap all elements separately.

WrapInner (): wrap child content (including text nodes) of each matching element with other structured tags.

Attribute operations

Attr (): Get and set attributes

When a parameter is passed for this method, it is used to obtain the specified attribute of an element.

When two parameters are passed for this method, that is, the attribute value specified for an element is set.

Many methods in jQuery are used to obtain and set functions. such as attr (), html (), text (), val (), height (), width (), css (), etc.

RemoveAttr (): deletes a specified attribute of a specified element.

Set and obtain HTML, text, and value

Read and set the HTML content of an element: html (). This method can be used for XHTML, but not for XML documents.

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

Read and set the value in an element: val () --- this method is similar to the value attribute in JavaScript. for the text box, drop-down list box, single comment this method can return the value of the element (multiple select box can only return the first value ). if you select multiple drop-down lists, an array containing all selected values is returned.