Dom manipulation in JS

First, the creation of DOM

A DOM node usually corresponds to a label, a text, or an HTML attribute. The DOM node has a Notetype property to represent the type of the current element, which is an integer:

1. Element, elements

2. Attribite, properties

3. Text, texts

The most common use of DOM node creation is the Document.createelement and document.createTextNode methods:

var Node1 = document.createelement (' div ');

var node2 = document.createTextNode ("Hello world!");

Second, Dom query

Returns the first element in the current document with the class name "MyClass"

Val el = Document.queryselector (". MyClass");

Returns all DIV elements in a document with the class "note" or "alert"

Val els = Document.queryselectorall ("Div.note,div.alert");

Get element

Val el = document.getElementById (' XXX ');

Val els = document.getelementsbyclassname (' highlight ');

Val els = document.getelementsbytagname (' TD ');

Get parent element, parent node

var parent = ele.parentelement;

var parent = Ele.parentnode;

var offsetparent= ele.offsetparent; Read-only, no compatibility issues

Gets the child node, the child node can be any kind of node, can use Notetype to judge

var nodes = Ele.children;

var nodes = Ele.childnodes;

Get list of element attributes

var attr = ele.attributes;

Querying child elements

var els = ele.getelementsbytagname (' TD ');

var els = ele.getelementsbyclassname (' highlight ');

The first/Last child element node of the current element

Val el = Ele.firstchild;

Val el = Ele.lastchild;

Val el = Ele.firstelementchild;

Val el = Ele.lastelementchild;

  Next/previous sibling element node

var el = Ele.nextsibling;var el = Ele.previoussibling;var el = ele.nextelementsibling;var el = ele.previouselementsibling;

Third, Dom changes

Add, remove child elements Ele.appendchild (EL); Ele.removechild (EL);//Replace child element Ele.replacechild (EL1, EL2);// Insert child element Parentelement.insertbefore (newelement, referenceelement);//Clone element Ele.clonenode (TRUE)// This parameter indicates whether the replicated node includes all the attributes and child nodes of the original node

Iv. attribute Manipulation

Gets an array of {name, value}

var attrs = el.attributes;

Get, set properties

var c= el.getattribute (' class ');

Whether there are property settings

El.hasattributes ();

Dom manipulation in JS