Step by step learning JQuery (5) using JQuery to play with nodes, jquery nodes

Step by step learning JQuery (5) using JQuery to play with nodes, jquery nodes

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

1. Search for nodes

Search nodes:
Search for Attribute nodes: Use the jQuery selector.
Operation attribute node: after finding the required element, you can call the attr () method of the jQuery object to obtain its various attribute values.
Operate text nodes: Use the text () method

<Span style = "font-size: 14px;"> 

2. 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, to create a <p> element, you can use $ ("<p/>") or $ ("<p> </p> "), but cannot use $ ("<p>") or $ ("<P> ")
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.


<Span style = "font-size: 14px;"> 
3. Insert a node



1. dynamically creating HTML elements is of no practical use. You also need to insert the newly created node into the document to become a subnode of a node in the document.


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

<Span style = "font-size: 14px;"> 
4. 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 ).

<Span style = "font-size: 14px;"> 
5. 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

<Span style = "font-size: 14px;"> <! Doctype html public "-// W3C // dtd html 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> 
6. Replace nodes

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.

<Span style = "font-size: 14px;"> 
7. Package nodes

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.

<Span style = "font-size: 14px;">