DOM: Document Object Model Document Object Model
Dom Category: Dom core; HTML Dom; Css Dom;
according to the hierarchical access point:
the parentNode returns the parent of the node
returned by childNodes child nodes, childNodes [I]
the firstChild Returns the first child node of the node the most common usage is to access the text of an element node
lastChild return to the last child node of
the next nextSibling a node of
a node on previousSibling
resolve browser compatibility issues:
firstElementChild returns the first child node of the most common usage is to visit the text node element
lastElementChild returns the last child node of
the next node nextElementSibling
a node previousElementSibling
oNext = oParent.nextElementSibling || oParent.nextSibling: e.g.
node information:
the nodeName: node name
nodeValue: node value
nodeType: node type
Operation node:
node properties:
the getAttribute ( "attribute name")
the setAttribute ( "attribute name", "attribute value")
to create and insert nodes:
the createElement (tagName) Create a new element tag named tagName node of
A.appendChild (B) the node B is added to the end node a
insertBefore (a, B) prior to insertion into the node a node B
cloneNode (deep) copy a specified node
to delete and replace the node:
the removeChild (node) to delete the specified node
replaceChild (newNode, oldNode) specified attribute attr replaced with other nodes
operation node pattern:
/ * style property .style element * /
function whtmouseover () {
// make Hongtao small font color green
document.getElementById ( "wht") = .style.fontSize "15px";
. document.getElementById ( "wht") style.color = "Green";
};
function whtmouseout () {
// make Hongtao small font color green
document.getElementById ( "wht ") .style.fontSize="8px";
document.getElementById ( "WHT") style.backgroundColor = "Pink";.
};
/ * create a value called the element prior .className .className of the style in the style list * /
function lbmouseover () {
document.getElementById ( " LB. ") = className" LB ";
};
function lbmouseout () {
document.getElementById (" LB ") = className." LBOUT ";
};
/ * third way: element .style.cssText =" css properties value "* /
function llmouseover () {
document.getElementById (" LL ") Color: Red; font-size: style.cssText =." 10px; ";
}
function llmouseout () {
document.getElementById (" LL "). style.cssText = "color: black; font -size: 60px;";
}
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 return element height
Returns the width elements offsetWidth
offsetParent container element returns the offset, 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 element visible width
returns the element height clientHeight visible
element attributes apply:
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
or
document.body.scrollTop;
document.body.scrollLeft;
production fixed ad:
var adver;
the window.onload = function () {
= document.getElementById adver ( "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;
// follow the scroll bar elements with changes
adver.style.top scorlltop = 30 + + "PX";
adver.style.left scorllleft = 10 + + "PX";
}