JS Common DOM Operations

Using DOM to get page element nodes

A) document.getElementById ()//id Get element Node object

b) document.getelementsbytagname ()//html tag get element node object (array)

c) Document.getelementsbyname (); Commonly used in forms (arrays)

property to determine the current node type NodeType

A) 1 element nodes

b) 2 attribute node

c) 3 Text node

d) 9 document node

Gets the number of nodes dom.length; Gets the content of the text node Dom.nodevalue; the name of the element node nodename

Get parent Node ParentNode

Get child node childNodes (Firefox, Chrome, etc. will wrap the line as a child node, IE will not)

Gets the first child node FirstChild; the last child node LastChild

Get sibling node

Previous node previoussibling; next node nextsibling

Dom Property Manipulation

Dom.name= "username"; Direct value Assignment (only valid for the standard properties)

SetAttribute (' name ', ' username '); Value assignment by method (valid for any property)

var name = getattribute (' name ');

　　

The DOM takes note of the class attribute: Because class is a keyword, it cannot be directly dom.class= '; it should be dom.classname= '; the GetAttribute and SetAttribute methods do not change.

DOM Action style (Actions on styles are only for inline styles)

Dom.style.width = "100px";

The JS variable name cannot contain-, so if the name of the band-in the style attribute needs to be converted to a camel-like name, such as Background-color (-a) backgroundcolor

Node operations (Create-and-reinsert)

Create element node createelement (' P '); Create a text node createTextNode (' Today's Day of the Week ');

Append node Prentnode.appendchild (the name of the created node);

Prentnode.insertbefore (new,old) inserted in front of the old node as a sibling node;

AppendChild () and insertbefore () can not only perform append nodes, but also perform operation of node position movement.

Node replacement prentnode.replacechild (New,old)

Node replication Dom.clonenode () copies a DOM node (including child nodes), Dom.clonenode (false) (excluding child nodes), and appends it to the document after copying.