Common Dom Collation

JS in the Operation Dom there are many cross browser aspects of the hole, this article took me nearly a week to organize, I will be based on the example of the large and small "pit."

Objective:

HTML builds a DOM tree for document, which is composed of a series of node nodes. He defined the structure of the document for us.

Node Type:

Node.element_node (1); ELEMENT nodes are more commonly used

Node.attribute_node (2); Attribute nodes are more commonly used

Node.text_node (3); Text nodes are more common

Node.cdata_section_node (4);

Node.entity_reference_node (5);

Node.entity_node (6);

Node.processing_instruction_node (7);

Node.comment_node (8);

Node.document_node (9); Document nodes are more common

Node.document_type_node (10);

Node.document_fragment_node (11);

Node.notation_node (12);

Related functions:

1, obtain the node:

document.getElementById (' element ');

document.getElementsByTagName (' element '); Returns the class Array object

Document.getelementsbyname (' element '); Returns the class Array object

Document.getelementsbyclassname (' ClassName ') returns the array object of the class, IE7 and below are not supported;

Document.queryselectorall (' class ' | ' element ') returns a class array object

2, traverse the node

Lookup child node: Element.childnodes return Class Array Object

Find first child node: Element.firstchild

Find the last child node: element.lastchild

Find parent element: Element.parentnode

Find the previous sibling element: Element.previoussibling

Find the latter sibling element: element.nextsibling

3, get the node information

Gets the label name of an element or attribute node: elementnode.nodename

Gets the contents of the text node: textnode.nodevalue;

Gets and sets the contents of the element node (which may contain HTML tags): elementnode.innerhtml

Gets and sets the plain text content of the element node: Element.innertext (IE) | Element.textcontent (FF)

Gets the value of the attribute node: Attrnode.getattribute (Attrname);

Sets the value of the property node: Attrnode.setattribute (Attrname,attrvalue);

Gets the type of the node: Node.nodetype;

ELEMENT node: 1;

Attribute node: 2;

Text nodes: 3;

Document node: 9;

Note node: 8;

4. Operation Node

Create element node: document.createelement (' element ');

Create text node: document.createTextNode (' text ');

Create attribute node: Document.createattribute (' attribute ');

Delete node: Node.remove ();

Delete child nodes: Parentnode.removechild (Childnode);

Insert node: parentnode.appendchild (Childnode); Insert to the end of a parent node

Parentnode.insertbefore (Newnode,existingnode)//inserted in front of existing nodes;

Clone node: Node.clonenode ([true])//pass in true for depth replication

Replacement node: Parentnode.replacechild (Newnode,oldnode);

Related development:

1, because IE low version of the browser and other browsers in the processing DOM is incompatible, so do some simple encapsulation processing.

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21st

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40//=================

function Getelementchildren (Element) {

var children = [],

Oldchildnodes = Element.childnodes;

For (Var i=0, len=oldchildnodes.length I

if (Oldchildnodes[i].nodetype = = 1) {

Children.push (Oldchildnodes[i]);

}

}

return children;

}

//==================

function Getelementnext (Element) {

var next = element.nextsibling | | Null

if (next) {

if (Next.nodetype = = 1) {

return to Next;

} else {

Return Arguments.callee (next);

}

} else {

throw new Error ("Next sibling element does not exist!");

}

}

//======================

function Getelementprev (Element) {

var prev = element.previoussibling | | Null

if (prev) {

if (Prev.nodetype = = 1) {

return prev;

} else {

Return Arguments.callee (prev);

}

} else {

throw new Error ("Previous sibling element does not exist!");

}

}

2, manipulate the style of DOM elements

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19//=========================

function Getelementstyle (element,stylename) {

if (typeof getComputedStyle!= ' undefined ') {

Return getComputedStyle (Element,null) [stylename];

} else {

return Element.currentstyle[stylename];

}

}

//==========================

function AddClass (element,classname) {

Element.classname + = ClassName;

}

//==========================

function Removeclass (element,removeclassname) {

var classstr = Element.classname;

Element.classname = Classstr.replace (Removeclassname, '). Split (/s+/). Join ("). Replace (/^s+/, '"). Replace (/s+$/, "" );

}

The above mentioned is the entire content of this article, I hope you can enjoy.