Js-dom node, parent-child node

ChildNodes: Read-only property yourself but list collection
The standard (ff,chrome, etc.) contains nodes of text and element types, and also contains illegal nested child nodes
Non-standard: contains only the element type of the node, IE7 the following will not contain illegal nested subnodes

ChildNodes contains only one level of child nodes and does not contain nodes below the grandchild level of the descendants

There are 12 different types of DOM nodes

element. NodeType: Read-only property the node type of the current element

ELEMENT node: 1
Attribute node: 2
Text nodes: 3

element. Attributes: Read-only Property list collection

alert (oUl.attributes.length);

alert (Oul.attributes[0].nodetype);

for (var i=0; i<oul.childnodes.length; i++) {

if (Oul.childnodes[i].nodetype = = 1) {
Oul.childnodes[i].style.background = ' red ';
}

}

Improvement: replace childnodes with children
/*
element. Children: read-only attribute child node list collection
Standard: Nodes that contain only element types
Non-standard: nodes that contain only element types
*/

alert (oUl.children.length);

for (var i=0; i<oul.children.length; i++) {

Oul.children[i].style.background = ' red ';

}

Firschild:
Standard (Ff,chrome, etc.): FirstChild
Non-standard under: Firstelementchild
var Ofirst = Oul.firstelementchild | | Oul.firstchild;

Have the same problem with child, improve: children[0];

LastChild
Standard (Ff,chrome): LastChild
Non-standard under: Lastelementchild
var Ofirst = Oul.lastelementchild | | Oul.lastchild;

element. nextSibling | | Element. Nextelementsibling Next Sibling node

var onext = ofirst.nextelementsibling | | ofirst.nextsibling;
ONext.style.background = ' Blue ';


element. previoussibling | | element. previouselementsibling Previous Sibling node

var Oprev = olast.previouselementsibling | | olast.previoussibling;
OPrev.style.background = ' orange ';

element. parentnode: Read-only property the parent node of the current node
No compatibility issues

OffsetParent: The read-only property currently has a parent node for the anchored property
If the parent element of the current element does not have CSS positioning (position is absolute or relative), offsetparent is body.
If there is a CSS anchor in the parent element of the current element (position is absolute or relative), offsetparent takes the nearest parent element.

IE7 below, if the current element is not positioned by default is body, if there is a location it is HTML
IE7 below, if layout is triggered by a parent of the current element, then offsetparent will be directed to the parent node that triggered the layout attribute

Element. Offsetleft[top], Offsetwidth[top]:
Detailed Explanation:
Http://www.cnblogs.com/jscode/archive/2012/09/03/2669299.html

Gets the distance from the element to body/html:
function GetPos (obj) {
var pos = {left:0, top:0};
while (obj) {//layer up gets offsetparent
Pos.left + = Obj.offsetleft;
Pos.top + = Obj.offsettop;
obj = obj.offsetparent;
}
return POS;
}

To create an element:
var a=createelement (' Li ');
A.innerhtml= ' aaaaaa ';
Parent. appendchild (a); Inserted after the original Li;

Parent. Insetbefore (A, parent. children[0])//IE6 7 error
Parent. InsertBefore (new element, inserted element) method inserts a new element in front of the specified element
In IE, if the node of the second parameter does not exist, an error will be
In other standard browsers if the node of the second parameter does not exist, it will be added as AppendChild

Improved:
if (Oul.children[0]) {
Oul.insertbefore (OLi, oul.children[0]);
} else {
Oul.appendchild (OLi);
}
To delete an element:
Parent. RemoveChild (the element to be deleted); Delete Element
Parent. RemoveChild (This.parentnode);

Replace element
Parent. ReplaceChild (The new node, the node to be replaced);

Js-dom node, parent-child node