[JQuery] DOM operations

1. DOM operation category

1.1 DOM Core

DOM Core is not specialized in JavaScript, and can be used by any programming language that supports DOM. The getElementById (), getElemetsByTagName (), getAttribute (), and setAttribute () methods in JavaScript are all components of DOM Core.

1.2 HTML DOM

Many HTML-DOM-specific properties exist when scripting HTML files with JavaScript and DOM. It provides some more concise marks to describe the attributes of various HTML elements, such as document. forms or element. src. Some methods can be implemented using DOM Core, or HTML-DOM.

1.3 CSS DOM

Css dom is a CSS operation. In JavaScript, the main function of css dom technology is to obtain and set various attributes of the style object. By changing the attributes of the style object, the webpage can display different effects.

2. DOM operations

2.1 search nodes

You can use the jQuery selector to find nodes in the document tree. For example:

var $li = $("ul li:eq(1)");var li_txt = $li.text();alert(li_txt);

After finding the required element using the jQuery selector, you can use the attr () method to obtain its various attribute values, for example:

var $para = $("p");var p_txt = $para.attr("title");alert(p_txt);

2.2 create a node

To create two <li> element nodes and add them as child nodes of <ul> element nodes to the DOM node tree, use the factory function $, the format is as follows:

$(html);

The $ (html) method creates a DOM object based on the input HTML Tag string and wraps the DOM object into a jQuery object and returns the result. For example:

var $li_1 = $("<li></li>");var $li_2 = $("<li></li>");$("ul").append($li_1);$("ul").append($li_2);

Creating an attribute node is similar to creating a text node. It is also directly created when an element node is created. For example:

var $li_1 = $("<li title="t1">t1</li>");var $li_2 = $("<li title="t2">t2</li>");$("ul").append($li_1);$("ul").append($li_2);

2.3 Insert a node

There are multiple ways to insert a new node into a document, as shown in the following table:

Method	Description	Example
Append ()	Append content to each matching element.	$ ("P"). append ("<B> me </B> ");
AppendTo ()	Append all matched elements to the specified element.	$ ("<B> me </B>"). appendTo ("p ");
Prepend ()	Forward content to each matching element.	$ ("P"). prepend ("<B> me </B> ");
PrependTo ()	Forward all matched elements to the specified element.	$ ("<B> me </B>"). prependTo ("p ");
After ()	Insert content after each matching element.	$ ("P"). after ("<B> me </B> ");
InsertAfter ()	Insert all matched elements to the end of the specified element.	$ ("<B> me </B>"). insertAfter ("p ");
Before ()	Insert content before each matching element.	$ ("P"). before ("<B> me </B> ");
InsertBefore ()	Insert all matched elements to the front of the specified element.	$ ("<B> me </B>"). insertBefore ("p ");

2.4 delete a node

If an element in the document is redundant, delete it. JQuery provides two methods to delete nodes: remove () and empty ().

The remove () method is used to delete all matching elements from the DOM. For example:

$("ul li:eq(1)").remove();

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 to the deleted node.

The empty () method is used to clear nodes. For example:

$("ul li:eq(1)").empty();

After the code is run, the content of the 2nd <li> elements is cleared, leaving only the default dot symbol of the <li> label.

2.5 copy a node

To copy an element, you can use clone (). For example:

$("ul li").click(function(){  $(this).clone().appendTo("ul");})

After a node is copied, the new element to be copied does not have any behavior. If you want the new element to be copied, you can pass a parameter true in the clone () method. For example:

$("ul li").click(function(){  $(this).clone(true).appendTo("ul");})

2.6 replace nodes

If you want to replace a node, jQuery provides the corresponding methods, namely replaceWith () and replaceAll (). The replaceWith () method is used to replace all matched elements with specified HTML or DOM elements, for example:

$("p").replaceWith("<strong>Name</strong>");

You can also use the replaceAll () method to implement it. This method works the same as the replaceWith () method, but only reverses the replaceWith () operation. For example:

$("<strong>Name</strong>").replaceAll("p");

2.7 package nodes

If you want to wrap a node with other labels, jQuery provides the corresponding method, namely, wrap (), for example:

$("strong").wrap("<b></b>");

The wrapAll () method encapsulates all matching elements with one element. Unlike the wrap () method, the wrap () method encapsulates all elements separately. For example:

$("strong").wrapAll("<b></b>");

The wrapInner () method wraps the child content of each Matching Element with other structured tags, for example:

$("strong").wrapInner("<b></b>");

2.8 attribute operations

In jQuery, the attr () method is used to obtain and set element attribute values. For example:

var p_txt = $("p").attr("title");

If you want to set the element property value, you can also use the same method. The difference is that two parameters need to be passed, for example:

$("p").attr("title", "my title");

In some cases, you can use the removeAttr () method to delete a specific attribute of an element in a document. For example:

$("p").removeAttr("title");

2.9 style operations

You can use the attr () method to obtain the class of an element, for example:

var p_class = $("p").attr("class");

You can also use the attr () method to set the class, for example:

$("p").attr("class", "high");

In most cases, it replaces the original class with the new class, rather than appending the new class on the basis of the original. JQuery provides a special addClass () method to append styles. For example:

$("p").addClass("another");

If you want to delete a value of the class, you can use the removeClass () method opposite to the addClass () method. For example:

$("p").removeClass("high");

When it does not contain parameters, all class values will be deleted, for example:

$("p").removeClass();

JQuery also provides a toggleClass () method to control repeated switching of styles. If the class name exists, delete it. If the class name does not exist, add it. For example:

$("p").toggleClass("high");

HasClass () can be used to determine whether an element contains a class. If yes, true is returned; otherwise, false is returned. For example:

$("p").hasClass("high");

2.10 set and obtain HTML, text, and values

The html () method is similar to the innerHTML attribute in javascript and can be used to read or set HTML content in an element. For example:

var p_html = $("p").html();

You can also use this method to set the HTML of an element, for example:

$("p").html("<strong>Name</strong>");

The text () method is similar to the innerText attribute in javascript and can be used to read or set the text content in an element. For example:

var p_text = $("p").text();

The val () method is similar to the value attribute in javascript and can be used to set and obtain the value of an element. For example:

$("#username").focus(function(){  var text_value = $(this).val();  alert(text_value);});

2.11 traverse nodes

The children () method is used to obtain the child element set of the matching element. For example:

$("p").children();

The next () method is used to obtain the peer element next to the matching element. For example:

$("p").next();

The prev () method is used to obtain peer elements adjacent to matching elements. For example:

$("p").prev();

The siblings () method is used to obtain all peer elements before and after matching elements, such as sli.

$("p").siblings();

The closet () method is used to obtain the most recent Matching Element. First, check whether the current element matches. If it matches, return directly. If it does not match, search for the parent element up until the element matching the selector is found, if not found, an empty jQuery object is returned, for example:

$(e.target).closet("li").css("color", "red");

2.12 CSS-DOM operation

CSS-DOM technology is simply to read and set the various attributes of the style object, you can directly use the css () method to obtain the style attributes of the element, such:

$("p").css("color");

You can also directly use the css () method to set a single style of an element, for example:

$("p").css("color", "red");

There is also a height () method in jQuery to obtain the height value currently calculated by the matching element, for example:

$("p").height();

There is also a width () method corresponding to the height () method to obtain the width value of the matching element, for example:

$("p").width();

CSS-DOM, there are several frequently used methods. The offset () method is used to obtain the relative skewness of an element in the current window. The returned object contains two attributes: top and left, which are only valid for visible elements. For example:

var offset = $("p").offset();var left = offset.left;var top = offset.top;

The position () method is used to obtain the relative offset of the element relative to the last position style attribute and set the parent node of relative or absolute. The returned object also includes two attributes: top and left, for example:

var position = $("p").position();var left = position.left;var top = position.top;

The scrollTop () method and scrollLeft () method are used to obtain the distance between the element's scroll bar from the top and the left, for example:

var $p = $("p");var scrollTop = $p.scrollTop();var scrollLeft = $p.scrollLeft();

In addition, you can specify a parameter for the two methods to control the scrolling of the element to the specified position, for example:

$("textarea").scrollTop(300);$("textarea").scrollLeft(300);

This article is from the "Fangyuan" blog and will not be reposted!