DOM.js

//=============================================================
//--------------------------DOM--------------------------------
//向aobj对象中添加class
aobj.className="test";

element.style.cssText="width:20px;height:20px;border:solid 1px red;"; 
//--------------------------表单对象---------------------------
//-------------------------------------------------------------
document.forms
document.forms.length
document.forms[1].username.value
document.forms["frm2"].username.value

/* <form action="" onsubmit="return 函数()" ></form> */

document.close();		//关闭文档流,不能再一个已经结束的文档流中再加入输出

//=============================================================
//---------------------------找节点---------------------------
/*	1.文档比作一个倒树，每一部分（元素，内容，属性，注释）都是一个节点。
	2.只要知道一个节点，按关系找到其他节点
		父节点： parentNode
		子节点： childNodes	firstChild	lastChild
		同胞节点： nextSibling	previousSibling 上一个
		
	3.找到节点：
		nodeName节点名(含有节点的名称)
			元素节点的nodeName是标签名称
			属性节点的nodeName是属性名称
			文本节点的nodeName永远是#text
			文档节点的nodeName永远是#document
			nodeName所包含的XML元素的标签名称永远是大写
		nodeValue节点值
			对于文本节点nodeValue属性包含文本
			对于属性节点nodeValue属性包含属性值
			nodeValue属性对于文档节点和元素节点是不可用的
		nodeType节点类型
			nodeType属性可返回节点的类型
			最重要的节点类型是：
				元素		1
				属性		2
				文本		3
				注释		8
				文档		9	*/
//======================找节点例========================
//------------------------------------------------------
Obj.parentNode.nodeName		//找父节点
Obj.children.nodeName			//子节点（仅HTML）
Obj.childNodes.nodeName		//子节点
Obj.childNodes.length			//节点的长度
Obj.childNodes[0].nodeName	//节点名称
Obj.lastChild.nodeName			//最后一个子节点
Obj.firstChild.nodeName			//第一个子节点
Obj.nextSibling.nodeType		//节点类型
Obj.nextSibling.nextSibling.nodeType	//下一个的下一个节点类型
Obj.previousSibling.previousSibling.nodeName		//上一个的上一个节点类型
	
//=======================一些DOM对象方法======================
//------------------------创建节点-----------------------------
createElement()		//创建元素节点。
createAttribute()	//创建属性节点。
createTextNode()	//创建文本节点。

removeChild()		//删除子节点
remove()			//删除节点

hasChildNodes()		//判断是否有子节点

replaceChild()		//替换子节点。

getAttribute()		//返回指定的属性值。（可用于自定义属性）
setAttribute()		//把指定属性设置或修改为指定的值。（可用于自定义属性）
	
appendChild()		//是在父级节点中的子节点的末尾添加新的节点（相对于父级节点来说）

insertBefore('父节点','插入到第几个位置')
//=============================================================
//----------------------实用自定义函数------------------------
//下一个非文本节点
function nextElement(node){
	for(var nextNode = node.nextSibling;nextNode;nextNode = nextNode.nextSibling){
		if(nextNode.nodeType == 1){
			return nextNode;
		}
	}
	return null;
}
//上一个非文本节点
function previousElement(node){
	for(var previousNode = node.previousSibling;previousNode;previousNode = previousNode.previousSibling){
		if(previousNode.nodeType == 1){
			return previousNode;
		}
	}
	return null;
}
//最后一个非文本节点
function lastElement(node){
	for(var lastNode = node.lastChild;lastNode;lastNode = lastNode.previousSibling){
		if(lastNode.nodeType == 1){
			return lastNode;
		}
	}
	return null;
}
 //第一个非文本节点
function firstElement(node){
	for(var firstNode = node.firstChild;firstNode;firstNode = firstNode.nextSibling){
		if(firstNode.nodeType == 1){
			return firstNode;
		}
	}
	return null;
}
//-------------------------------------------------------------
//------------------------trim()函数---------------------------
String.prototype.trim=function(){
	return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.ltrim=function(){
	return this.replace(/(^\s*)/g,"");
}
String.prototype.rtrim=function(){
	return this.replace(/(\s*$)/g,"");
}
//=============================================================
//-------------------------------------------------------------
e.clientX/clientY			// 当前触发点离“可视区域”左上角的水平和垂直距离

e.screenX/screenY		// 当前触发点离“屏幕”左上角的水平和垂直距离

HTMLElement.offsetWidth/offsetHeight		// height+padding+border

HTMLElement.clientLeft/clientTop			// 元素左border的宽度和上border的高度。

HTMLElement.clientWidth/clientHeight		// height+padding-滚动条的宽或高

HTMLElement.scrollLeft/scrollTop

// 元素水平、垂直滚动条切去的宽度或高度。
/* 注意：FF在W3C标准模式下,document.documentElement.scrollLeft/Top
获取页面滚动条切去的部分;W3C怪异模式下，则采用body.scrollLeft/Top来获取 */

// 解决方法如下
// 滑动页面时：document页面的最上端-->到-->浏览器窗口最上端 的距离
var h = document.documentElement.scrollTop || document.body.scrollTop;

HTMLElement.offsetParent
// 最近一个已进行CSS定位的祖先元素。

HTMLElement.offsetTop/Left
// 元素border外边框的左上角离offsetParent的padding外边框的左上角的垂直、水平距离。

window.innerHeight
// 浏览器窗口的高度

//=============================================================
//-------------------------------------------------------------
// offsetHeight		一切元素的 height+padding+border


// 应用于body
// document.body.clientHeight   除了body的margin
// document.body.scrollHeight	整个页面空白区域的高度

// 应用于元素
// box.clientHeight		height+padding
// box.scrollHeight		height+padding

//-------------------------------------------------------------
// 网页被卷去的高： document.body.scrollTop
// 网页被卷去的左： document.body.scrollLeft
// 网页正文部分上： window.screenTop
// 网页正文部分左： window.screenLeft
// 屏幕分辨率的高： window.screen.height
// 屏幕分辨率的宽： window.screen.width
// 屏幕可用工作区高度： window.screen.availHeight
// 屏幕可用工作区宽度： window.screen.availWidth