The usage and application of JS DOM

Dom Introduction: Document Object Model

It is convenient for JavaScript to manipulate HTML through DOM.

Node classification in HTML:

1. Documentation Node (document)

2. ELEMENT nodes

3. Text node

4. Attribute nodes

5. Note Node

Selection of nodes

1.document.getelementbyid (id attribute value);

2.document.getelementsbytagname (tag tag name);

3.document.getelementsbyname (Name property value); not recommended

Note: 1. The collected elements are returned as strings.

Method of obtaining a text node (Nodes: node)

var dd = document.getelementsbytagname (' div ') [0];

FirstChild, LastChild: Parent node gets first/last child node

NextSibling: Get the next sibling node

PreviousSibling: Get the last sibling node

ChildNodes: Parent node obtains all internal child node information

Get property value

1. Get Property values

Itnode. Attribute name;

Itnode.getattribute (attribute name);

2. Setting Property values

Itnode. Property name = value;

Itnode.setattribute (name, value);

Obtaining a Property node

var attrlist = itnode.attributes;

Attrlist. Attribute name;

Creation of nodes

Element node: document.createelement (tag tag name);

Text node: document.createTextNode (text content);

Property settings: Node.setattribute (name, value);

Increase of nodes

Parent node. appendchild (child node);

Parent node. insertbefore (Newnode,oldnode); NewNode put it in front of the OldNode.

Parent node. replacechild (Newnode,oldnode); NewNode Replace to OldNode node

Get CSS Styles

Element node. style.css style name;

Divnode.style.width; Get width style

Set CSS styles (modified, not added)

Element node. STYLE.CSS style name = value;

Divnode.style.width = ' 500px '; set div width style

The usage and application of JS DOM