DOM nodes in JS and the Offset,client,scroll family

I. Node. 1. Parent node: parentnode;2. Sibling node: (1). Next sibling node: nextelementsibling (with nextsibling in IE);(2). Previous sibling node: Previouselementsibling (with previoussibling in IE); 3. Child nodes: (1). Select the first child node: Firstelementchild (using FirstChild in IE);(2). Select the last child node: Lastelementchild (with LastChild in IE);(3). Select All child nodes: children (with childnodes in IE);  two. Dom node operation; 1. Create a node;   CreateElement: Var lis=document.createelement ("Li"); 2. Add node;  (1). appendchild (); Add child at the end of the box;  (2) . insertbefore (); Insert node, such as: Lis.insertbefore (PI,PI1);p i is the inserted node, PI1 is the node to be inserted;        If PI1 is: Null The default generated box is placed on the last side, otherwise put in front of the PI1; 3. Remove Node;   removechild (), such as Lis.removechild (PI1), can remove the original, can remove the custom add, 4. Clone node;   clonenode (), such as: Lis.appendchild (Pi1.clonenode ()); 5. Replace node;   replaceclid ();  Three. The offset family; (JS has a convenient way to get the element size); 1. The operand. Offsetleft and offsettop, (returns a number, and Style.left returns a string with a unit);     Offset left, for advanced browsers, is the distance from its own bounding box to the inner border of the parent container. Poor compatibility, different browsers should consider different adaptation; for Ie6,ie7, as with advanced, the IE8 is calculated from the outer border of the parent container; 2. The action object. OffsetParent     Each Tag object has this property, to get its own offset reference box, for the Advanced browser, refers to the reference has the location of the parentIf they are not positioned, refer to body;   for Ie6.ie7 If you don't have a location, 1. The parent container is positioned, the parent container is found, and 2. The parent container does not locate the element that is closest to its own ancestor, or has a height, that is nearest to itself, and if it is positioned, it is the nearest element of its own ancestor. ;      (self-positioning, parent boundless;) can be guaranteed to be compatible in the browser, 3.offsetWidth and offsetheight   A box of offsetwidth value is their own width+ around padding+ The width of the left and right border; if the box is not wide, all browsers will treat the PX value as offsetwidth instead of 100%; if the box is not high and text-propped, all browsers will use the PX value as offsetheight;  Four. The client family;   clientwidth and clientheight   are the values of their own width+padding. If the box is not wide, all browsers will use the PX value as Clentwidth, and not 100%; if the box is not high, text-supported, Ie6 clientheight is 0; all other browsers are numeric; Offset family properties can only get;  five. Scroll family;  ScrollTop and scrollleft;  ScrollTop were rolled to the head; when scrolling the scroll wheel Browser Web page, the distance from the top of the screen;  six. Other; 1.scrollWidth   size is the size of the content; 2.window.screen.width     Get wide;  of screen resolution seven. Common properties of the event; (Advanced browser writes event directly. For Ie6. with window.event;)   1. Event.offsetx   The horizontal position of the cursor relative to the inside of its box border, excluding the border;  2.event.offsety   The vertical position of the cursor relative to its own box;  3.pageX   The cursor is relative to the horizontal position of the page;;  4.pageY   cursor vertical position relative to the Web page;  5.screenX   cursor relative to the horizontal position of the screen;  6.screeNY   The vertical position of the cursor relative to the screen;  7.clientX    the cursor is relative to the horizontal position of the Web page (visible area);  8.clientY   The cursor's vertical position relative to the Web page (visible area);     

The DOM node in

JS and the Offset,client,scroll family