Dom operations in Dom Core,html DOM,CSS dom,jquery

The front-end development in order to achieve a certain purpose, often there are many ways: Dom core,html dom,jquery; Dom Core/jquery obtains property values primarily through function calls (GetAttribute ("property name")/attr ("Property name"), and the HTML DOM generally takes the form of attributes (element. property name) to obtain the corresponding attribute value, which is relatively concise. In addition, for CSS-related objects, there are CSS Dom

There are three types of nodes in front-end development: element nodes; text nodes and attribute nodes

JS is generally supported for both DOM Core and HTML DOM, except that different browsers may have different levels of support.

From Performance considerations

1, try to use the JS native method

2,dom core, HTML DOM takes precedence over jquery

3,CSS related get and set operation, try to use CSS dom such as element.style.color= "#fffffff";

JS Native method performance is higher than the method in jquery, so use the jquery native method whenever possible

This.value/this.getattribute ("value") replaces $ (this). Val ()

This.checked/this.getattribute ("checked") supersedes $ (this). attr ("Checked", true)/$ (this). Prop ("checked", true)

Dom operations in jquery

1, Node Lookup

ELEMENT node lookup: Using selectors

Text node lookup: using the corresponding element's text () function call

Attribute Node Lookup: jquery uses attr ("attribute name"), HTML DOM, and Dom Core have their own different methods

2, Node creation

No matter what kind of node, just use a section of HTML code

$nodeName =$ ("HTML code")

3, node insertion

Append (); AppendTo () (can be used for element movement);p repend (); The newly added element becomes the child element of the original element.

InsertAfter (); InsertBefore (); Above method, the newly added element becomes the sibling element of the original element

4, node deletion

Remove (): All bound events, data, etc. will be deleted

Detach (): Bound event, data is preserved

Empty (); not delete element, but element content empty

5, node replication

Clone (); Copy element, do not copy bound event

Clone (True): Copies the element while copying the events bound to the original element

6, node substitution

ReplaceWith (), ReplaceAll () the inverse of each other

7, Node Wrap

Wrap (); Wrapall (); Wrapinner ();

8, attribute operation (GET, set, delete)

Dom Core in Getattribute,setattribute,removeattribute

HTML core for specific attributes, there are. src,. checked,. Seleced,.value, etc.

jquery in attr ("attribute name"), attr ("property name", attribute value), removeattr ()

9, class operations

Element.attr ("class"); $element. addclass (); $element. Removeclass (); $element. Hasclass ();

10, State judgment

Element.is ("selector"), such as is (: visible); are (". ClassName"), etc.

11, get the node HTML, text and values

Element.html () similar to the element.innerhtml in JS

Element.text () similar to the Element.innertext in JS

Element.val () similar to the Element.value in JS

12, style operation

CSS Dom:element.style. Style name = style value

Style actions in jquery

Element.css ()

ELEMENT.CSS ("Background": "#fff", "width": "400px")

13, position operation

Get element position in JS

Element.offsettop,element.offsetleft;

The values stored by these two properties are not the absolute position of the element relative to the entire browser canvas, but rather relative to the position of the parent element whose most recent style attribute is absolute or relative, i.e. the two values are given in the upper-left corner of their parent element (0,0) Point to calculate the value.

Get element position in jquery

1) Gets the relative position of the parent element relative to its most recent style property of absolute or relative

var position=element.position ();

var left=position.left;

var top=position.top;

2) Get the position relative to the current window

var offset=element.offset ();

var left=offset.position;

var top=offset.position;

3) Gets the position relative to the top and left side of the scroll bar

ScrollTop (), scrollleft ();

4) Get where the event occurred

Function (e) {

var X=e.pagex;

var Y=e.pagey;

}

Dom operations in Dom Core,html DOM,CSS dom,jquery