1. load方法
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != ‘function‘) {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
2. 移上高亮
function highlightRows() {
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for (var i=0; i<rows.length; i++) {
rows[i].onmouseover = function() {
this.style.fontWeight = "bold";
}
rows[i].onmouseout = function() {
this.style.fontWeight = "normal";
}
}
}
addLoadEvent(highlightRows);
3. table,单和偶
function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],"odd");
odd = false;
} else {
odd = true;
}
}
}
}
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
4. 动画
function moveElement(elementID,final_x,final_y,interval) {
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
if (elem.movement) {
clearTimeout(elem.movement);
}
if (!elem.style.left) {
elem.style.left = "0px";
}
if (!elem.style.top) {
elem.style.top = "0px";
}
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement(‘"+elementID+"‘,"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
function positionMessage() {
if (!document.getElementById) return false;
if (!document.getElementById("message")) return false;
var elem = document.getElementById("message");
elem.style.position = "absolute";
elem.style.left = "50px";
elem.style.top = "100px";
moveElement("message",125,25,20);
}
addLoadEvent(positionMessage);
5. 插入之前
function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
6. 添加样式
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
7. 提交
function getHTTPObject() {
if (typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function () {
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); }
catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {}
return false;
}
return new XMLHttpRequest();
}
function displayAjaxLoading(element) {
while (element.hasChildNodes()) {
element.removeChild(element.lastChild);
}
var content = document.createElement("img");
content.setAttribute("src","images/loading.gif");
content.setAttribute("alt","Loading...");
element.appendChild(content);
}
function submitFormWithAjax( whichform, thetarget ) {
var request = getHTTPObject();
if (!request) { return false; }
displayAjaxLoading(thetarget);
var dataParts = [];
var element;
for (var i=0; i<whichform.elements.length; i++) {
element = whichform.elements[i];
dataParts[i] = element.name + ‘=‘ + encodeURIComponent(element.value);
}
var data = dataParts.join(‘&‘);
request.open(‘POST‘, whichform.getAttribute("action"), true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function () {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 0) {
var matches = request.responseText.match(/<article>([\s\S]+)<\/article>/);
if (matches.length > 0) {
thetarget.innerHTML = matches[1];
} else {
thetarget.innerHTML = ‘<p>Oops, there was an error. Sorry.</p>‘;
}
} else {
thetarget.innerHTML = ‘<p>‘ + request.statusText + ‘</p>‘;
}
}
};
request.send(data);
return true;
};
submitFormWithAjax(this, document.getElementsByTagName(‘article‘)[0]);
原文:http://www.cnblogs.com/floraCnblogs/p/js-dom-methods.html