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