Dom definition and Dom correlation

Dom:document Object Model Document objects
Documents: HTML pages
Document objects: Elements in a page
Document Object Model: definition to enable the program (JS) to manipulate elements in the page

The DOM sees the document as a tree and defines a number of ways to manipulate each element (node) in that number.

DOM node

getElementById
Getelementbytagname
Document
Document.body

element. ChildNodes : read-only attribute child node list collection; Standard: A node containing text and element types, also containing illegal nested child nodes; non-standard: a node containing only element types, IE7 the following does not contain illegal nested subnodes. The 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

 for (var i=0; i<oul.childnodes.length; i++) {                if1  ) {             ' Red ' ;        }            }

element. Children : Read-only attribute child node list collection; Standard: A node containing only the element type; non-standard: A node that contains only the element type.

element. FirstChild: read-only property the first child node; Standard: FirstChild contains the text type of the node; non-standard: contains only ELEMENT nodes.

element. Firstelementchild: Gets the child nodes of the first element type under the read-only property standard.

element. LastChild | | element. lastelementchild : Last child node

element. nextSibling | | element. nextelementsibling: Next sibling node

element. previoussibling | | element. previouselementsibling : Previous sibling node

element. parentnode: read-only property the parent node of the current node.

element. OffsetParent: The Read-only property is the closest parent to the current element, and if no parent is located, the default is Body;ie7, if the current element is not positioned by default, if there is a location, it is html;ie7 below. If layout is triggered by a parent of the current element, then offsetparent is directed to the parent node that triggered the layout attribute.

element. Offsetleft[top]: read-only property the distance (offset) from the current element to the anchored parent; the distance to the offsetparent of the current element
If no parent is located
OffsetParent, Body
HTML offsetleft

If you have a location parent
IE7: If you do not have a position, then Offsetleft[top] is the distance to the body
If you have a position, it is the distance to locate the parent
Other: The distance to locate the parent.

Width height of element: width height

Style.width: Style width
ClientWidth: Visible Area width = style width + padding
Offsetwidth: Placeholder width = style width + padding + border = viewable area width + border

element. getattribute (attribute name); Method gets the value of the specified property of the specified element

element. SetAttribute (attribute name, attribute value); method sets the value of the property specified by the specified element

element. RemoveAttribute (attribute name); method to remove the specified property from the specified element

document.createelement (tag name); Creating elements

parent. RemoveChild (the element to be deleted); Delete Element

parent. appendchild (element to add) method appends child elements

The parent. InsertBefore (new element, inserted element) method inserts a new element in front of the specified element; If the node of the second parameter does not exist in IE, an error will be given; under other standard browsers, if the node of the second parameter does not exist, Will be added in the form of appendchild

if (oul.children[0]) {     Oul.insertbefore (oLi, oul.children[0]);   Else {     oul.appendchild (oLi);   }

parent. ReplaceChild (new node, replaced node) Replace child nodes

Appendchild,insertbefore,replacechild can operate dynamically created nodes, or you can manipulate existing nodes

Dom definition and Dom correlation