js - DOM Object

A, the DOM: the Document Object Model Document Object Model

Two, Dom Category: Dom Core (core);

　　　　　　　HTML Dom;

　　　　　　　Css Dom;

Third, the relationship between nodes and node:

　　1. The entire document is a document node

　　2. Each node is an element tag html

　　3. html text contained in the element is a text node

　　4. Each attribute is an attribute node html

　　5. Note the comment node belongs

Fourth, the access node

　　(1) The series method of access to the specified node of the document object

　　(2) according to hierarchy access node

　　　　　　parentNode Returns the parent node of

　　　　　　childNodes returns the set of child nodes, childNodes [i]

　　　　　　firstChild returns the first child node of the most common usage is to access the text of an element node

　　　　　　lastChild return to the last child node

　　　　　　nextSibling next node

　　　　　　previousSibling on a node

Five resolve browser compatibility issues:

　　firstElementChild returns the first child node of the most common usage is to access the text of an element node

　　lastElementChild return to the last child node

　　nextElementSibling next node

　　previousElementSibling on a node

例如：oNext = oParent.nextElementSibling || oParent.nextSibling

Sixth, the node information:

　　nodeName : Node Name

　　the nodeValue : node value (for document nodes and element nodes are not available)

　　nodeType : Node Type

　　　　Element element: 1

　　　　Attribute attr: 2

　　　　Text text: 3

　　　　Comment comments: 8

　　　　Document document: 9

Seven, the operation node:

　　Node attributes:

　　　　getAttribute ( "property name")

　　　　setAttribute ( "attribute name", "property value")

　　Create and insert node:

　　　　createElement (tagName) to create a tag called tagName new element node

　　　　A.appendChild (B) at the end of the Node B is added to A node

　　　　insertBefore (A, B) prior to insertion into the A Node B Node

　　　　cloneNode (deep) copy a specified node

　　　　　　Copy all child nodes of the node and the node: deep: true

　　　　　　　　　false: just copy the nodes and their property

　　Remove and replace node:
　　　　removeChild (the Node) Removes the specified node
　　　　replaceChild (newNode, oldNode) attribute attr replace the specified node with other nodes

　　Operation node style:

　　　　1.style property:

　　　　　　Element .style. Property style = "Value"

function whtmouseover() {
//要让字体变大 颜色变绿
document.getElementById("wht").style.fontSize="15px";
document.getElementById("wht").style.color="green";
};
function whtmouseout() {
//要让字体变小 
document.getElementById("wht").style.fontSize="8px";
document.getElementById("wht").style.backgroundColor="pink";
};

　　　　2.className property

　　　　　　/ * Create a style element .className previously named .className list of values ​​in a style * /　　

　　　　　　Element .className = "style name"

function lbmouseover() {
document.getElementById("lb").className="lb";
};
function lbmouseout() {
document.getElementById("lb").className="lbout";
}

　　　　3.  element .style.cssText = "css attribute value"

function llmouseover() {
document.getElementById("ll").style.cssText="color:red;font-size:10px;";
}
function llmouseout() {
document.getElementById("ll").style.cssText="color:black;font-size:60px;";
}

Eight, to obtain elements of style　　　

　　1. elements .style. Style properties

　　　　But this way can only get the value of inline, so you can use the object currentStyle

　　2. elements .currentStyle. Style properties

　　　　Characteristics of this object is read-only, if you must give the property assignment style with style objects (only IE browser)

　　3.document.defaultView.getComputedStyle (element, null). Property

　　　　(Only IE does not support)

Nine, get element position

　　Element attributes:
　　　　the offsetLeft returns the current element from the left margin to the left boundary of its parent element, the read-only attribute
　　　　offsetTop Returns the current element border to its distance from the boundary of the parent element, the read-only attribute
　　　　offsetHeight returns the height of the element
　　　　offsetWidth return element width
　　　　offsetParent return element offset containers, i.e. the recent dynamic positioning of a reference element comprising
　　　　scrollTop returns the vertical scroll position matching elements
　　　　scrollLeft return horizontal scroll position matching elements
　　　　clientWidth return the element widths of the visible
　　　　clientHeight return element highly visible
　　element attributes apply:
　　　　document.documentElement.scrollTop;
　　　　document.documentElement.scrollLeft;
　　　　or
　　　　document.body.scrollTop;
　　　　document.body.scrollLeft;
　　making fixed ad:

adver var; 
the window.onload = function () { 
adver = document.getElementById ( "adver" ); 
} 
// the onscroll: the scroll bar to scroll trigger 
window.onscroll = function () {
 // Get the size of the scroll bar to scroll 
var scorlltop = || document.documentElement.scrollTop document.body.scrollTop; 
var scorllleft = document.documentElement.scrollLeft || document.body.scrollLeft;
 // elements follow along with the scroll bar changes 
adver.style.top = scorlltop + 30 + "px " ; 
adver.style.left = 10 + + scorllleft "PX" ; 
}